/* Default: light theme */
:root, [data-theme="light"] {
  --surface-1: #fcfcfb;
  --surface-2: rgba(0, 0, 0, 0.045);
  --page-plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #595752;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.15);
  --input-border: #76746e;
  --series-1: #2a78d6;
  --series-2: #0d9488;
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --focus-ring: rgba(99, 102, 241, 0.4);
  --error: #d03b3b;
}

/* System preference fallback (when no data-theme set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-1: #1a1a19;
    --surface-2: rgba(255, 255, 255, 0.05);
    --page-plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #9e9c95;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.15);
    --input-border: #898781;
    --series-1: #3987e5;
    --series-2: #2dd4bf;
    --accent: #6366f1;
    --accent-strong: #4f46e5;
    --focus-ring: rgba(99, 102, 241, 0.4);
    --error: #e66767;
  }
}

/* Explicit dark theme override */
[data-theme="dark"] {
  --surface-1: #1a1a19;
  --surface-2: rgba(255, 255, 255, 0.05);
  --page-plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #9e9c95;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.15);
  --input-border: #898781;
  --series-1: #3987e5;
  --series-2: #2dd4bf;
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --focus-ring: rgba(99, 102, 241, 0.4);
  --error: #e66767;
}

/* Utility accessibility classes */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 8px 16px;
  border: 2px solid var(--series-1);
  border-radius: 4px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.activity-bar:focus-visible,
.pie-slice:focus-visible,
.bar-rect:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
  opacity: 1.0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page-plane);
  color: var(--text-primary);
}

.topbar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 600;
}

.topbar-logo {
  width: 28px;
  height: auto;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.topbar-logo:hover {
  opacity: 1;
}

.link-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.link-button:hover {
  color: var(--text-primary);
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 16px;
}

h2 {
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.muted {
  color: var(--text-secondary);
}

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.range-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Executive dashboard filter bar — same visual language as the Individual
   page controls (pill date box, dropdown selects) in a single non-wrapping
   row: labels stay short (Range / Env / Dept), date inputs and selects are
   width-capped so the whole bar fits on one line at desktop widths. Below
   700px it degrades to wrapping rows instead of overflowing. */
.exec-filter-form {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.exec-filter-form .control-label {
  min-width: auto;
  white-space: nowrap;
}

.exec-filter-form .date-input {
  width: 108px;
}

.exec-filter-form .dropdown-select {
  max-width: 210px;
}

@media (max-width: 700px) {
  .exec-filter-form {
    flex-wrap: wrap;
  }
}

/* Each filter line is its own wrapping row: line 1 = dates + env, line 2 =
   account-code pills. Keeping the pills on a dedicated full-width row stops
   them from overflowing the page head / topbar framing. */
.range-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.range-form input[type="date"] {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
}

.chart-empty {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 18px 24px;
  border: 1px dashed var(--baseline);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.9rem;
}

.axis-label {
  fill: var(--text-secondary);
  font-size: 11px;
}

.value-label {
  fill: var(--text-secondary);
  font-size: 11px;
}

.baseline {
  stroke: var(--baseline);
  stroke-width: 1;
}
.gridline {
  stroke: var(--gridline);
  stroke-width: 1;
}



.series-1-line {
  fill: none;
  stroke: var(--series-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.series-1-dot {
  fill: var(--series-1);
  stroke: var(--surface-1);
  stroke-width: 2;
}

.series-1-bar {
  fill: var(--series-1);
}

.series-2-line {
  fill: none;
  stroke: var(--series-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.series-2-dot {
  fill: var(--series-2);
  stroke: var(--surface-1);
  stroke-width: 2;
}

.right-axis-label {
  fill: var(--text-muted);
  font-size: 11px;
}

.chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.series-1-swatch { background: var(--series-1); }
.series-2-swatch { background: var(--series-2); }

.table-note {
  font-size: 0.75rem;
  margin-top: 8px;
}

.login-card {
  max-width: 320px;
  margin: 80px auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.login-logo {
  width: 72px;
  height: auto;
  margin-bottom: 12px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.login-form label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

.login-form input {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
}

.login-form button {
  margin-top: 16px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: var(--series-1);
  color: white;
  font: inherit;
  cursor: pointer;
}

.form-error {
  color: var(--error);
  font-size: 0.9rem;
}

/* ---- Executive dashboard ---- */

.metric-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.metric-card {
  text-align: center;
}

.metric-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.metric-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
}

.two-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.activity-bar {
  opacity: 0.55;
  transition: opacity 0.15s ease;
  cursor: pointer;
}

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

.activity-chart.has-selection .activity-bar:not(.selected) {
  opacity: 0.15;
}

.activity-chart.has-selection .activity-bar.selected {
  opacity: 1.0;
  stroke: var(--text-primary, #ffffff);
  stroke-width: 1px;
}

.activity-dot {
  fill: var(--series-1);
  stroke: var(--surface-1);
  stroke-width: 2;
}

.top-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.top-users-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}

.top-users-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.top-users-table th.num,
.top-users-table td.num {
  text-align: right;
}

.top-users-table a {
  color: var(--series-1);
  text-decoration: none;
}

.top-users-table a:hover {
  text-decoration: underline;
}

/* spend-by-user-table shares the .top-users-table styles (the element carries
   both classes); this keeps its numerics aligned/tabular like the print tables. */
.spend-by-user-table th.num,
.spend-by-user-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Calls-by-model hover tooltip on the Prompts/Responses count: the cell
   stays a single number, the per-model breakdown appears on hover/focus
   (embedding/batch workloads can dwarf chat calls — the total alone misleads).
   CSS-only so it survives HTMX swaps with no JS. */
.calls-hover {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.calls-tip {
  display: none;
  position: absolute;
  z-index: 20;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 230px;
  padding: 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  text-align: left;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: nowrap;
  color: var(--text-primary);
}

.calls-hover:hover .calls-tip,
.calls-hover:focus .calls-tip,
.calls-hover:focus-within .calls-tip {
  display: block;
}

.calls-tip-title {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text-secondary);
}

.calls-tip-line {
  display: block;
}

.calls-tip-line .calls-model {
  color: var(--text-muted);
}

.bar-link {
  text-decoration: none;
  color: inherit;
}

.bar-link:hover rect {
  filter: brightness(1.15);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
}

.nav-link:hover {
  color: var(--text-primary);
}

/* ---- User detail ---- */

.user-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin-bottom: 24px;
  font-size: 0.9rem;
}

.user-detail dt {
  color: var(--text-muted);
  font-weight: 500;
}

.user-detail dd {
  margin: 0;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
  .metric-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .capacity-card-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .user-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .metric-row {
    grid-template-columns: 1.5fr 1fr;
    gap: 8px;
  }

  .topbar-inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .user-stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---- Chart centering ---- */
.viz-root {
  display: block;
  margin: 0 auto;
}

/* ---- Theme toggle ---- */
.theme-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  line-height: 0;
}
.theme-toggle:hover {
  color: var(--text-primary);
}

/* ---- Tooltip ---- */
.chart-tooltip {
  display: none;
  position: absolute;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--text-primary);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ---- Chart legend ---- */
.chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ---- Topbar layout groups ---- */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Keep every topbar label on one line; if the clusters don't fit side by
   side, wrap the whole right cluster onto its own row instead of squeezing
   mid-label (nav links and "Log out" used to break across lines). */
@media (max-width: 900px) {
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}
/* Position context for tooltip positioning */
.panel {
  position: relative;
}

/* ---- Pagination (for department bar chart + tables) ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.pagination .link-button {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--surface-1);
}

.pagination .link-button:hover:not(:disabled) {
  border-color: var(--series-1);
  color: var(--series-1);
}

.pagination .link-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination select {
  font: inherit;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.85rem;
}

/* ---- Table hover states ---- */
.top-users-table tbody tr:hover {
  background: rgba(42, 120, 214, 0.05);
}

[data-theme="dark"] .top-users-table tbody tr:hover {
  background: rgba(57, 135, 229, 0.08);
}

/* ---- Section spacing ---- */
section.panel + section.panel {
  margin-top: 0;
}

/* ---- Select dropdown styling ---- */
.range-form select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Account-code multi-select pills: reuse the .pill-btn design system from the
   individual page (30px, 8px radius, accent fill on active). A checkmark
   prefix on active pills makes the multi-select state unmistakable. */
.range-form .ac-hint {
  align-self: center;
  font-size: 0.75rem;
  white-space: nowrap;
}

#ac-chips .pill-btn.active::before {
  content: "✓ ";
  font-weight: 700;
}

/* ---- Chart container centering ---- */
section.panel svg.viz-root {
  max-width: 100%;
}

/* ---- Executive dashboard panel consistency ---- */



/* ---- Pie chart ---- */
.pie-chart-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

.pie-chart-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  flex-shrink: 0;
}

.pie-caption {
  width: 200px;
  min-height: 2.4em;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
  background: var(--surface-alt, rgba(127,127,127,0.06));
  border: 1px solid var(--border);
  text-align: center;
  box-sizing: border-box;
  transition: color 0.15s ease, background 0.15s ease;
}

.pie-caption.active {
  color: var(--text-primary);
  font-weight: 500;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  min-width: 0;
  flex: 1;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.pie-legend-item:hover,
.pie-legend-item.active {
  background: rgba(42, 120, 214, 0.08);
}

[data-theme="dark"] .pie-legend-item:hover {
  background: rgba(57, 135, 229, 0.08);
}

.pie-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pie-legend-label {
  color: var(--text-primary);
  font-weight: 500;
}

.pie-legend-value {
  margin-left: auto;
  color: var(--text-secondary);
}

.pie-legend-pct {
  color: var(--text-muted);
  min-width: 3em;
  text-align: right;
}

.pie-legend-tokens {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 6em;
  text-align: right;
}

.pie-slice {
  transition: opacity 0.15s ease;
  cursor: pointer;
}

.pie-slice:hover {
  opacity: 0.8;
}

.pie-slice-dimmed {
  opacity: 0.2;
}

/* ---- Capacity dashboard ---- */

:root, [data-theme="light"] {
  --capacity-green: #27ae60;
  --capacity-amber: #f39c12;
  --capacity-red: #e74c3c;
}

[data-theme="dark"] {
  --capacity-green: #2ecc71;
  --capacity-amber: #f1c40f;
  --capacity-red: #e66767;
}

.capacity-card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.capacity-gauge {
  text-align: center;
  padding: 12px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.capacity-gauge .gauge-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.capacity-gauge .gauge-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.capacity-gauge .gauge-subtitle {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.capacity-green .gauge-value { color: var(--capacity-green); }
.capacity-amber .gauge-value { color: var(--capacity-amber); }
.capacity-red .gauge-value { color: var(--capacity-red); }

.capacity-bar {
  transition: filter 0.15s ease;
}

.bar-link:hover .capacity-bar {
  filter: brightness(1.15);
}

.capacity-bar.capacity-green { fill: var(--capacity-green); }
.capacity-bar.capacity-amber { fill: var(--capacity-amber); }
.capacity-bar.capacity-red { fill: var(--capacity-red); }

/* ---- Tab bar ---- */
.tab-bar {
  display: flex;
  gap: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  max-width: 960px;
  margin: 0 auto;
}

.tab-link {
  display: inline-block;
  padding: 10px 20px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-link:hover {
  color: var(--text-primary);
}

.tab-link[href="/admin/permissions"] {
  margin-left: auto;
}

/* ---- Admin permissions table ---- */
.admin-table {
  overflow-x: auto;
}

.permissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.permissions-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.permissions-table th a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.permissions-table th a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.permissions-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.permissions-table tbody tr:hover {
  background: rgba(42, 120, 214, 0.04);
}

[data-theme="dark"] .permissions-table tbody tr:hover {
  background: rgba(57, 135, 229, 0.06);
}

.username-cell {
  font-weight: 500;
}

/* ---- Registered users: department groups (collapsible) ---- */
.dept-user-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dept-user-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  overflow: hidden;
}

.dept-user-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s ease;
  user-select: none;
}

/* Hide the native disclosure triangle (replaced by a chevron). */
.dept-user-group-summary::-webkit-details-marker {
  display: none;
}

.dept-user-group-summary:hover {
  background: rgba(42, 120, 214, 0.06);
}

[data-theme="dark"] .dept-user-group-summary:hover {
  background: rgba(57, 135, 229, 0.10);
}

.dept-user-group-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Chevron that rotates when the group is open. */
.dept-user-group-name::before {
  content: "▸";
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.8em;
  transition: transform 0.15s ease;
}

.dept-user-group[open] .dept-user-group-name::before {
  transform: rotate(90deg);
}

.dept-user-group-count {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(42, 120, 214, 0.08);
  border-radius: 12px;
  padding: 2px 10px;
  white-space: nowrap;
}

[data-theme="dark"] .dept-user-group-count {
  background: rgba(57, 135, 229, 0.15);
}

.dept-user-table {
  border-top: 1px solid var(--border);
}

.dept-user-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dept-user-table td {
  font-size: 0.88rem;
}

.role-select,
.dept-select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.85rem;
  min-width: 130px;
}

/* ---- Role badge ---- */
.role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.role-badge--admin {
  background: #2a78d6;
  color: #fff;
}

.role-badge--executive {
  background: #6c5ce7;
  color: #fff;
}

.role-badge--dept_admin {
  background: #27ae60;
  color: #fff;
}

.role-badge--sso {
  background: #e67e22;
  color: #fff;
}

/* ---- Admin add-user form ---- */
.admin-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.add-form-row label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 90px;
}

.add-form-row input,
.add-form-row select {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.9rem;
  flex: 1;
  max-width: 300px;
}

.admin-add-form .link-button:hover {
	border-color: var(--series-1);
	color: var(--series-1);
}

/* ---- Permissions page: remove-user action ---- */
.row-actions {
	text-align: right;
	white-space: nowrap;
}

.remove-user-btn {
	padding: 2px 8px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.remove-user-btn:hover {
	color: var(--error);
	border-color: var(--error);
}

/* ---- License input ---- */
.license-input {
	font: inherit;
	padding: 4px 8px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface-1);
	color: var(--text-primary);
	font-size: 0.9rem;
	width: 100px;
	transition: border-color 0.15s ease;
}

.license-input:focus {
	outline: none;
	border-color: var(--series-1);
}

.save-indicator {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  min-width: 56px;
}
.save-indicator.saved {
  color: #1a7f37;
}
.save-indicator.error {
  color: #d03b3b;
}

/* ---- Responsive tab bar ---- */
@media (max-width: 480px) {
  .tab-bar {
    flex-wrap: wrap;
    padding: 0 12px;
  }

  .tab-link[href="/admin/permissions"] {
    margin-left: 0;
  }
}

/* ---- Global loading bar ---- */
/* Thin progress bar pinned to the top of the viewport. Shown by app.js
   while HTMX requests are in flight or a full-page navigation is starting,
   so users get feedback that "something is happening" between clicks. */
#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1000;
  pointer-events: none;   /* never blocks clicks on the page */
  opacity: 0;
  transition: opacity 0.2s ease;
}
#loading-bar.active {
  opacity: 1;
}
#loading-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  border-radius: 0 2px 2px 0;
  background: var(--series-1);
  box-shadow: 0 0 6px var(--series-1);
  animation: loading-bar-slide 1.1s ease-in-out infinite;
}
@keyframes loading-bar-slide {
  0%   { left: -40%; }
  100% { left: 110%; }
}
@media (prefers-reduced-motion: reduce) {
  #loading-bar::before {
    animation: none;
    left: 0;
    width: 100%;
  }
}

/* ---- Page head (H1 + Export to PDF) ---- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head h1 {
  margin: 0;
}

/* ---- Export to PDF button ---- */
.export-button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  min-height: 32px;           /* WCAG 2.5.8 target size */
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.export-button:hover {
  border-color: var(--series-1);
  color: var(--series-1);
}
.export-button:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}
.export-button-sm {
  font-size: 0.75rem;
  padding: 3px 10px;
  min-height: 24px;
}
/* Panel header with a trailing action (Export table) */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.panel-head h2 {
  margin: 0;
}

/* ---- Cost statement card (US 3921) ---- */
.cost-statement { padding: 16px 20px; }
.cost-statement-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cost-statement-header h2 { font-size: 1.05rem; margin: 0; }
.cost-statement-range { font-size: 0.8rem; }
.cost-empty { color: var(--text-secondary); font-size: 0.9rem; padding: 8px 0; }

.cost-statement-list { margin: 0; padding: 0; }
.cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cost-label { display: block; color: var(--text-primary); font-weight: 500; }
.cost-support { display: block; font-size: 0.75rem; color: var(--text-secondary); font-weight: 400; margin-top: 2px; }
.cost-value {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* aligned $ figures */
  white-space: nowrap;
}
.cost-row-overage .cost-value { color: var(--capacity-red); } /* accent only — meaning always carried by "Overage" label + support text */
.cost-row-total {
  border-bottom: none;
  padding-top: 14px;
  margin-top: 2px;
  border-top: 2px solid var(--baseline);
}
.cost-row-total .cost-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ---- Threshold visualization ---- */
.cost-threshold { margin: 8px 0 4px; }
.cost-threshold-svg { width: 100%; height: auto; display: block; }
.cost-threshold-caption {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
}
.cost-threshold-limit-line { stroke: var(--text-secondary); stroke-dasharray: 4 3; stroke-width: 2; }
.cost-threshold-actual { fill: var(--series-1); }
.cost-threshold-overage { fill: var(--capacity-red); }
.cost-threshold-label {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.cost-threshold-overage-label {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text-primary);
}
.cost-threshold-actual-label {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-primary);
}

/* ---- Quick Reference Data section ---- */
/* Four spacious, modern KPI cards:
   1. % of Subscribed Capacity Limit
   2. Plan (Pay Per User (PPU) or Tier X)
   3. Total Usage
   4. User Adoption gauge
   Each card has clean vertical distribution with the label at top,
   the metric value centered in the available space, and sub-note at bottom. */
.user-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 180px;
  align-items: stretch;
  gap: 16px;
}
.user-stat {
  min-width: 0;
  min-height: 114px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
}
[data-theme="dark"] .user-stat {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.user-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0;
}
.user-stat-value {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin: auto 0;
  display: flex;
  align-items: center;
}
.user-stat-plan {
  font-size: 1.2rem;
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}
.user-stat-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: auto;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adopt-tile {
  align-items: stretch;
}
.adopt-gauge-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0;
}
.adopt-tile .user-stat-note {
  text-align: center;
}

/* ---- Activity Summary Table ---- */
.activity-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 4px;
}
.activity-summary-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.activity-summary-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.activity-summary-table th.num,
.activity-summary-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Click-to-sort column headings on the spend-by-user table: they read as
   headings (muted) until hovered, unlike the blue drill-down links. */
.top-users-table th a.sort-link {
  color: var(--text-muted);
  text-decoration: none;
  display: inline-block;
}
.top-users-table th a.sort-link:hover {
  color: var(--series-1);
  text-decoration: underline;
}

/* ---- Print / export ---- */
/* The print document lives OFF-SCREEN (fixed, far left) instead of
   display:none. Chromium's print preview snapshots the page at window.print()
   time; an element that is display:none at that moment has no layout and the
   preview renders BLANK (even when the swap happened moments earlier). An
   off-screen element is always laid out, so the print snapshot always has
   content. It is invisible to the user and aria-hidden for AT. */
.print-root,
.print-root[hidden] {
  display: block;
  position: fixed;
  top: 0;
  left: -9999px;
  width: 100%;
}
.print-doc { padding: 0; }
.print-title { font-size: 1.4rem; margin: 0 0 4px; }
.print-range { margin: 0 0 16px; }
.print-section { break-inside: avoid; margin-bottom: 16px; }
.print-section.page-break { break-before: page; }

/* On screen, the print document is hidden and aria-hidden; it becomes visible
   only inside @media print (see below). */
@media print {
.topbar, .skip-link, #loading-bar,
.page-head, .range-form,
#department-panels, #exec-panels, #user-panels,
.page > *:not(#print-root) { display: none !important; }

#print-root,
#print-root[hidden] {
  display: block !important;
  position: static !important;
  inset: auto !important;
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  visibility: visible !important;
}

  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  .page { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #print-root svg.viz-root {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  @page { size: letter portrait; margin: 14mm; }

  .print-section { break-inside: avoid; }
  .print-section.page-break { break-before: page; }
  /* A section CONTAINING a long table must be allowed to break, or the table
     gets clipped exactly like the absolute-positioning bug did. */
  .print-section:has(> table.print-table) { break-inside: auto; }

  table.print-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  table.print-table thead { display: table-header-group; }
  table.print-table tfoot { display: table-footer-group; }
  table.print-table tr { break-inside: avoid; page-break-inside: avoid; }
  table.print-table th, table.print-table td { border: 1px solid var(--baseline); padding: 4px 8px; text-align: left; }
  table.print-table td.num, table.print-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

  a { color: inherit; text-decoration: none; }
}

/* ---- Per-user token usage chart (fresh/cached input + output) ---- */
.token-usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.token-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.token-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.user-token-usage-chart { width: 100%; height: auto; display: block; }

.token-usage-row {
  cursor: pointer;
}

.token-usage-track {
  fill: var(--gridline);
  transition: opacity 0.15s ease;
}

.token-usage-track-empty {
  fill: var(--gridline);
  opacity: 0.5;
}

.token-usage-row:hover .token-usage-track {
  opacity: 0.7;
}

.token-usage-segment {
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.token-usage-row:hover .token-usage-segment {
  filter: brightness(1.08);
}

/* Thin divider between adjacent segments so the composition reads clearly
   even when two segments share a near-identical color at a glance. */
.token-usage-segment + .token-usage-segment {
  stroke: var(--surface-1);
  stroke-width: 1;
}

.token-usage-total {
  font-size: 12px;
  font-weight: 600;
  fill: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.token-usage-cache-pct {
  font-size: 10.5px;
  fill: var(--capacity-green);
  font-variant-numeric: tabular-nums;
}

.token-usage-cache-pct-muted {
  fill: var(--text-muted);
}

.token-usage-empty-label {
  font-size: 11px;
  fill: var(--text-muted);
  font-style: italic;
}

/* ── Individual Usage View Styles (Nous Portal Design System Match) ──────── */
/* Refined: Nous-Portal-style pill controls, legend chips, unified cards,
   dark-aware selects/date pickers, and pie-legend layout. All colors come
   from the site theme tokens at the top of this file (accent #6366f1). */

.individual-dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 32px;
}

/* The individual dashboard is designed for a 1200px canvas (Nous Portal
   layout); widen the page wrapper for it. Other pages keep the 960px max. */
.page:has(.individual-dashboard-container) {
  max-width: 1200px;
}

/* ── User selector (admin) ──────────────────────────────────────────────── */
.user-selector-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.user-select-dropdown {
  padding: 0 30px 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--surface-1);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23595752' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  height: 30px;
  max-width: 420px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
}

[data-theme="dark"] .user-select-dropdown {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e9c95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.user-select-dropdown:hover,
.user-select-dropdown:focus {
  border-color: var(--accent);
}

/* ── Top metric summary cards ───────────────────────────────────────────── */
.individual-summary-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .individual-summary-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .individual-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ind-metric-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ind-metric-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.ind-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .ind-metric-value {
    font-size: 1.15rem;
  }
}

/* ── Unified cards ──────────────────────────────────────────────────────── */
.individual-main-card,
.individual-secondary-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.card-section-title {
  margin: 0 0 18px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Controls area ──────────────────────────────────────────────────────── */
.individual-controls-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.control-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 90px;
}

.setting-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.setting-item .control-label {
  min-width: auto;
}

.settings-row {
  gap: 28px;
}

.time-row {
  gap: 20px;
}

/* ── Pill buttons ───────────────────────────────────────────────────────── */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-btn:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text-primary);
}

.pill-btn:active {
  background: var(--accent-strong);
}

.pill-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

/* Entra invite status pills in the spend-by-user table (screen + print).
   Accepted = green, Pending = amber; both keep WCAG AA contrast on the
   surface background via darkened text on a tinted fill. */
.invite-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.invite-pill.accepted {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.invite-pill.pending {
  background: rgba(217, 119, 6, 0.16);
  color: #b45309;
}

.pill-btn.active:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* ── Icon buttons (chart style toggle) ──────────────────────────────────── */
.icon-toggle-group {
  display: inline-flex;
  gap: 6px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn svg {
  display: block;
}

.icon-btn:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text-primary);
}

.icon-btn:active {
  background: var(--accent-strong);
}

.icon-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.icon-btn.active:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* ── Dropdown selects & date inputs ─────────────────────────────────────── */
.dropdown-select {
  height: 30px;
  padding: 0 30px 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--surface-1);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23595752' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

[data-theme="dark"] .dropdown-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e9c95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dropdown-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e9c95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }
}

.dropdown-select option {
  background: var(--surface-1);
  color: var(--text-primary);
}

.dropdown-select:hover,
.dropdown-select:focus {
  border-color: var(--accent);
}

.date-range-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  transition: border-color 0.15s ease;
}

.date-range-box:focus-within {
  border-color: var(--accent);
}

.date-input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  width: 124px;
}

.date-sep {
  color: var(--text-muted);
  font-size: 0.85rem;
  user-select: none;
}

/* ── Multi-series chart area ────────────────────────────────────────────── */
.individual-chart-area {
  width: 100%;
  padding-top: 10px;
}

.multi-series-container {
  width: 100%;
}

.multi-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

/* Legend chips — replaces the old wall of plain legend text */
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.legend-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.legend-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-chip-name {
  white-space: nowrap;
}

.multi-series-chart {
  display: block;
  width: 100%;
  height: auto;
}

.multi-chart-line {
  transition: stroke-width 0.15s ease;
}

.multi-chart-dot {
  cursor: pointer;
  transition: r 0.15s ease;
}

.multi-chart-dot:hover {
  r: 6;
}

.multi-chart-bar {
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.multi-chart-bar:hover {
  filter: brightness(1.15);
}

/* ── Model breakdown pie + legend (individual-page scoping) ─────────────── */
/* Base .pie-chart-container / .pie-legend / .pie-legend-* rules above serve
   the executive & team pages; these scoped overrides tune the individual
   page without touching those pages. */
.individual-secondary-card .pie-chart-container {
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.individual-secondary-card .pie-svg {
  flex-shrink: 0;
}

.individual-secondary-card .pie-legend {
  gap: 8px;
  flex: 1 1 auto;
  min-width: 240px;
}

.individual-secondary-card .pie-legend-item {
  font-size: 0.9rem;
  padding: 5px 8px;
  border-radius: 8px;
}

.individual-secondary-card .pie-legend-item:hover,
.individual-secondary-card .pie-legend-item.active {
  background: var(--surface-2);
}

.individual-secondary-card .pie-legend-swatch {
  width: 12px;
  height: 12px;
}

.individual-secondary-card .pie-legend-label {
  font-size: 0.9rem;
  flex-grow: 1;
}

.individual-secondary-card .pie-legend-value {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.individual-secondary-card .pie-legend-pct {
  font-size: 0.85rem;
  width: 45px;
  font-variant-numeric: tabular-nums;
}

/* ── Focus visibility (site convention, Nous indigo accent) ─────────────── */
.pill-btn:focus-visible,
.icon-btn:focus-visible,
.dropdown-select:focus-visible,
.user-select-dropdown:focus-visible,
.date-input:focus-visible,
.legend-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Native control color-scheme (dropdown arrow & date-picker icon) ────── */
:root .dropdown-select,
:root .date-input,
:root .user-select-dropdown,
[data-theme="light"] .dropdown-select,
[data-theme="light"] .date-input,
[data-theme="light"] .user-select-dropdown {
  color-scheme: light;
}

[data-theme="dark"] .dropdown-select,
[data-theme="dark"] .date-input,
[data-theme="dark"] .user-select-dropdown {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dropdown-select,
  :root:not([data-theme]) .date-input,
  :root:not([data-theme]) .user-select-dropdown {
    color-scheme: dark;
  }
}

/* ── User Adoption & Activation Gauge (Power BI Re-creation) ────────────── */
/* Compact tile version (design review 2026-08-31): sized to sit as the 6th
   cell of .user-stats-row instead of its own full-width panel. Full metric
   detail lives in a hover/focus popover reusing the .calls-hover/.calls-tip
   pattern already defined above (see "Calls-by-model hover tooltip") rather
   than a new component. */
.adopt-tile {
  align-items: flex-start;
}

.adopt-gauge-hover {
  position: relative;
  cursor: help;
  display: block;
  line-height: 0; /* collapse to the SVG's own height, no inherited text gap */
}

.adoption-gauge-svg {
  width: 92px;
  height: 55px;
  display: block;
}

.gauge-track-arc {
  stroke: var(--gridline);
}

.gauge-progress-arc {
  stroke: var(--series-1);
}

.gauge-threshold-line {
  stroke: var(--text-primary);
}

.gauge-center-value {
  font-size: 19px;
  font-weight: 700;
  fill: var(--text-primary);
}

/* .adopt-gauge-tip extends the shared .calls-tip panel (border/shadow/
   padding/typography all inherited) with layout specific to a tile that
   sits at the end of a row rather than inside a table cell: the base
   .calls-tip's `right: 0` anchor is correct for its existing table-cell
   callers (never the literal last pixel of the viewport) but overflowed
   67px past a 1100px viewport here, since this tile IS the rightmost
   column — centering under the trigger is the standard fix. */
.adopt-gauge-tip {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: min(280px, calc(100vw - 24px));
  white-space: normal;
  margin-top: 9px; /* room for the connector arrow */
}

/* Connector arrow: the shared .calls-tip never needed one anchored to a
   text baseline the eye is already tracking; a tile floating in open
   space reads as an unrelated card without it. */
.adopt-gauge-tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 11px;
  height: 11px;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.calls-tip-desc {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 1px;
}

.calls-tip-divider {
  display: block;
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.calls-tip-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
}

.calls-tip-swatch-track {
  background: var(--gridline);
  border: 1px solid var(--border);
}

/* Guard for if this gauge is ever wired into a print/PDF export in the
   future: the shared #print-root svg.viz-root rule forces width:100% on
   any SVG carrying that class, which would blow this compact tile back up
   to full page width. adoption-gauge-svg intentionally never carries
   viz-root (see charts.templ) to opt out of that rule, and .calls-tip is
   display:none by default so no floating popover appears on the static
   page — this comment exists so a future edit doesn't add viz-root back
   without noticing the interaction. */