/* WPSI Fluent UI design tokens (dark theme, brand blue-violet #5C56CA).
   Shared theme for WPSI web applications. Source of truth for color, typography,
   and surface tokens. App/component CSS should reference these tokens instead of hard-coded colors. */

:root {
  color-scheme: dark;

  /* —— WPSI brand palette (app-specific; do not alias Fluent accent tokens here) —— */
  --wpsi-accent: #5c56ca;
  --wpsi-accent-light: #7570e6;
  --wpsi-accent-dark: #4844a0;
  --wpsi-accent-soft: rgba(92, 86, 202, 0.22);
  --wpsi-media-progress: var(--wpsi-accent);

  /* —— Layout (non-color) —— */
  --wpsi-border-radius: 12px;
  --wpsi-sidebar-width: 13rem;
  --wpsi-sidebar-collapsed-width: 3.25rem;

  /* —— Fluent neutral surfaces (WPSI dark grays) —— */
  --neutral-layer-1: #121212;
  --neutral-layer-2: #1e1e1e;
  --neutral-layer-3: #252525;
  --neutral-layer-4: #2d2d2d;
  --neutral-layer-floating: #1e1e1e;

  /* —— Fluent neutral foreground —— */
  --neutral-foreground-rest: #e6e8f8;
  --neutral-foreground-hover: #ffffff;
  --neutral-foreground-active: #ffffff;
  --neutral-foreground-focus: #e6e8f8;
  --neutral-foreground-hint: #9ea4d4;

  /* —— Fluent neutral strokes —— */
  --neutral-stroke-rest: #2d2d2d;
  --neutral-stroke-hover: #3a3a3a;
  --neutral-stroke-active: #454545;
  --neutral-stroke-focus: var(--wpsi-accent);
  --neutral-stroke-divider: #2c3150;

  /* —— Fluent fill tokens —— */
  --neutral-fill-rest: #2d2d2d;
  --neutral-fill-hover: #353535;
  --neutral-fill-active: #3d3d3d;
  --neutral-fill-input-rest: #1e1e1e;
  --neutral-fill-input-hover: #252525;
  --neutral-fill-input-active: #2d2d2d;
  --neutral-fill-input-focus: #1e1e1e;
  --neutral-fill-stealth-rest: transparent;
  --neutral-fill-stealth-hover: rgba(255, 255, 255, 0.06);
  --neutral-fill-stealth-active: rgba(255, 255, 255, 0.1);
  --neutral-fill-strong-rest: #353535;
  --neutral-fill-strong-hover: #3d3d3d;
  --neutral-fill-strong-active: #454545;

  /* —— Semantic status / feedback (Fluent + WPSI) —— */
  --success: #43a047;
  --warning: #e8a317;
  --error: #e53935;
  --info: var(--wpsi-accent-light);

  /* —— App semantic aliases (prefer Fluent tokens above in new CSS) —— */
  --wpsi-surface-canvas: var(--neutral-layer-1);
  --wpsi-surface-elevated: var(--neutral-layer-2);
  --wpsi-surface-header: var(--neutral-layer-3);
  --wpsi-surface-overlay: rgba(26, 26, 26, 0.8);
  --wpsi-surface-overlay-strong: rgba(17, 23, 34, 0.92);
  --wpsi-surface-overlay-medium: rgba(17, 23, 34, 0.72);
  --wpsi-text-primary: var(--neutral-foreground-rest);
  --wpsi-text-muted: var(--neutral-foreground-hint);
  --wpsi-text-on-accent: var(--accent-foreground-rest);
  --wpsi-border-subtle: var(--neutral-stroke-rest);
  --wpsi-border-muted: var(--neutral-stroke-divider);

  /* —— Domain status colors (operational indicators) —— */
  --wpsi-status-recording: #43a047;
  --wpsi-status-sip-call: #29b6f6;
  --wpsi-status-registered: #9c27b0;
  --wpsi-status-registering: #ffc107;
  --wpsi-status-failed: #e53935;
  --wpsi-status-skipped: #78909c;
  --wpsi-status-not-started: #455a64;
  --wpsi-status-idle: #6e6e6e;
  --wpsi-status-monitoring: #4a90d9;
  --wpsi-status-reconnecting: #e8a317;
  --wpsi-status-initiated: #29b6f6;
  --wpsi-status-alerting: #ff8c00;
  --wpsi-status-offered: #ffa726;
  --wpsi-status-connected: #9c27b0;
  --wpsi-status-hold: #fdd835;
  --wpsi-status-conferenced: #26c6da;
  --wpsi-status-transferred: #00897b;
  --wpsi-status-diverted: #607d8b;
  --wpsi-status-network-reached: #1e88e5;
  --wpsi-status-unknown: #9e9e9e;
  --wpsi-status-unmonitored-border: #9e9e9e;
  --wpsi-station-idle: #43a047;

  /* —— Metric highlights —— */
  --wpsi-metric-success: #43d17a;
  --wpsi-metric-warning: #ffb74d;
  --wpsi-metric-error: #ff6b6b;
  --wpsi-metric-muted: #c8c8c8;

  /* —— Message bar intents (dark theme) —— */
  --wpsi-messagebar-error-bg: #3f1011;
  --wpsi-messagebar-error-border: #d13438;
  --wpsi-messagebar-error-text: #ffebee;
  --wpsi-messagebar-warning-bg: #411200;
  --wpsi-messagebar-warning-border: #da3b01;
  --wpsi-messagebar-warning-text: #fff3e0;
  --wpsi-messagebar-success-bg: #052505;
  --wpsi-messagebar-success-border: #107c10;
  --wpsi-messagebar-success-text: #e8f5e9;
  --wpsi-messagebar-info-bg: #141414;
  --wpsi-messagebar-info-border: #666666;
  --wpsi-messagebar-info-text: #ede7f6;

  /* —— Widget surfaces —— */
  --wpsi-widget-bg: #2b2b2b;
  --wpsi-widget-border: #ffffff;
  --wpsi-widget-icon-bg: var(--neutral-fill-rest);
  --wpsi-widget-shadow: 0 2px 5px rgb(0 0 0 / 20%);

  /* —— Grid typography & spacing —— */
  --wpsi-grid-cell-padding-y: 0.3rem;
  --wpsi-grid-cell-padding-x: 0.45rem;
  --wpsi-grid-cell-font-size: 0.82rem;
  --wpsi-grid-cell-line-height: 1.25;
  --wpsi-grid-row-min-height: 2.5rem;
  --wpsi-grid-row-comfortable-min-height: 4rem;
  --wpsi-grid-header-padding-y: 0.35rem;
  --wpsi-grid-header-padding-x: 0.65rem;
  --wpsi-grid-header-font-size: 0.78rem;
  --wpsi-grid-header-line-height: 1.15;
  --wpsi-grid-header-min-height: 2.125rem;
  --wpsi-grid-sort-icon-size: 0.85rem;
  --wpsi-grid-row-selected: var(--neutral-fill-stealth-hover);
  --wpsi-grid-detail-radius: 8px;
  --wpsi-grid-detail-shadow: 0 2px 8px rgb(0 0 0 / 18%);
  --wpsi-config-tab-font-size: 0.95rem;
  --wpsi-config-tab-min-height: 2.75rem;
  --wpsi-config-tab-padding-x: 1rem;
  --wpsi-config-tab-panel-gap: 0.75rem;

  /* —— Switch idle (header feature toggles) —— */
  --wpsi-switch-idle-hover: #808080;
  --wpsi-switch-idle-active: #5a5a5a;

  /* —— Chart / dashboard series colors —— */
  --wpsi-chart-series-1: #4fc3f7;
  --wpsi-chart-series-2: #81c784;
  --wpsi-chart-series-3: #ffb74d;
  --wpsi-chart-series-4: #e57373;
  --wpsi-chart-series-5: #9575cd;
  --wpsi-chart-series-6: #4db6ac;
  --wpsi-chart-series-7: #f06292;
  --wpsi-chart-series-8: #aed581;
}

/* Fluent web components read design tokens from the provider, not :root alone. */
fluent-design-system-provider,
.fluent-design-system-provider {
  --accent-fill-rest: #5c56ca;
  --accent-fill-hover: #7570e6;
  --accent-fill-active: #4844a0;
  --accent-fill-focus: #5c56ca;
  --accent-foreground-rest: #ffffff;
  --focus-stroke-outer: #5c56ca;
  --neutral-layer-1: #121212;
  --neutral-layer-2: #1e1e1e;
  --neutral-layer-3: #252525;
  --neutral-layer-4: #2d2d2d;
  --neutral-layer-floating: #1e1e1e;
  --neutral-foreground-rest: #e6e8f8;
  --neutral-foreground-hint: #9ea4d4;
  --neutral-stroke-rest: #2d2d2d;
  --neutral-stroke-divider: #2c3150;
  --neutral-fill-rest: #2d2d2d;
  --neutral-fill-input-rest: #1e1e1e;
  --success: #43a047;
  --warning: #e8a317;
  --error: #e53935;
  --info: #7570e6;
}

body {
  background: var(--neutral-layer-1);
  color: var(--neutral-foreground-rest);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.fluent-nav-menu {
  --accent-fill-rest: var(--wpsi-accent);
}

fluent-card {
  background-color: var(--neutral-layer-2);
  color: var(--neutral-foreground-rest);
  border: 1px solid var(--neutral-stroke-rest);
}

/* Message bars — dark-theme contrast */
.fluent-messagebar {
  width: 100%;
  box-sizing: border-box;
}

.fluent-messagebar.intent-error {
  background-color: var(--wpsi-messagebar-error-bg) !important;
  border: 1px solid var(--wpsi-messagebar-error-border) !important;
  color: var(--wpsi-messagebar-error-text) !important;
}

.fluent-messagebar.intent-warning {
  background-color: var(--wpsi-messagebar-warning-bg) !important;
  border: 1px solid var(--wpsi-messagebar-warning-border) !important;
  color: var(--wpsi-messagebar-warning-text) !important;
}

.fluent-messagebar.intent-success {
  background-color: var(--wpsi-messagebar-success-bg) !important;
  border: 1px solid var(--wpsi-messagebar-success-border) !important;
  color: var(--wpsi-messagebar-success-text) !important;
}

.fluent-messagebar.intent-info {
  background-color: var(--wpsi-messagebar-info-bg) !important;
  border: 1px solid var(--wpsi-messagebar-info-border) !important;
  color: var(--wpsi-messagebar-info-text) !important;
}

.fluent-messagebar.intent-error .fluent-messagebar-message,
.fluent-messagebar.intent-warning .fluent-messagebar-message,
.fluent-messagebar.intent-success .fluent-messagebar-message,
.fluent-messagebar.intent-info .fluent-messagebar-message {
  color: inherit;
}

.login-form .fluent-messagebar {
  margin: 0;
}

/* Fluent switches — use design tokens instead of inline background hacks */
fluent-switch {
  --accent-fill-rest: var(--wpsi-accent);
  --accent-fill-hover: var(--wpsi-accent-light);
  --accent-fill-active: var(--wpsi-accent-dark);
}

fluent-switch.header-status-switch--connected {
  --accent-fill-rest: var(--wpsi-status-recording);
  --accent-fill-hover: var(--wpsi-status-recording);
  --accent-fill-active: var(--wpsi-status-recording);
}

fluent-switch.header-status-switch--failure {
  --accent-fill-rest: var(--wpsi-status-failed);
  --accent-fill-hover: var(--wpsi-status-failed);
  --accent-fill-active: var(--wpsi-status-failed);
}

fluent-switch.header-status-switch--recovering {
  --accent-fill-rest: var(--wpsi-status-reconnecting);
  --accent-fill-hover: var(--wpsi-status-reconnecting);
  --accent-fill-active: var(--wpsi-status-reconnecting);
}

fluent-switch.header-status-switch--idle,
fluent-switch.header-status-switch--disconnected {
  --accent-fill-rest: var(--wpsi-status-idle);
  --accent-fill-hover: var(--wpsi-switch-idle-hover);
  --accent-fill-active: var(--wpsi-switch-idle-active);
}

fluent-switch.header-status-switch--active {
  --accent-fill-rest: var(--wpsi-status-recording);
  --accent-fill-hover: var(--wpsi-status-recording);
  --accent-fill-active: var(--wpsi-status-recording);
}

fluent-switch.header-status-switch--inactive {
  --accent-fill-rest: var(--wpsi-status-idle);
  --accent-fill-hover: var(--wpsi-switch-idle-hover);
  --accent-fill-active: var(--wpsi-switch-idle-active);
}

fluent-switch.wpsi-setting-switch {
  display: block;
  margin: 0.2rem 0;
}

fluent-switch.wpsi-grid-switch {
  vertical-align: middle;
}

/* Filter/toolbar form rows — labels above fields, left-aligned */
.wpsi-filter-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  width: 100%;
}

.wpsi-filter-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.wpsi-filter-field--wide {
  flex: 0 0 18rem;
  width: 18rem;
  max-width: 18rem;
}

.wpsi-filter-field--medium {
  flex: 0 0 12rem;
  width: 12rem;
  max-width: 12rem;
}

.wpsi-filter-field--narrow {
  flex: 0 0 10rem;
  width: 10rem;
  max-width: 10rem;
}

.wpsi-filter-field--select {
  flex: 0 0 11rem;
  width: 11rem;
  max-width: 11rem;
}

.wpsi-filter-field--select-sm {
  flex: 0 0 9rem;
  width: 9rem;
  max-width: 9rem;
}

.wpsi-filter-field--date {
  flex: 0 0 13rem;
  width: 13rem;
  max-width: 13rem;
}

.wpsi-filter-field > :not(style),
.wpsi-filter-field-control,
.wpsi-filter-field fluent-text-field,
.wpsi-filter-field fluent-select,
.wpsi-filter-field fluent-date-picker {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wpsi-filter-field .fluent-input-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--wpsi-grid-header-font-size);
  line-height: var(--wpsi-grid-header-line-height);
  text-align: left;
}

/* Shared widget card shell (dashboard tiles, search mode, recording widgets) */
.wpsi-widget-card {
  padding: 0.55rem 0.75rem 0.65rem;
  border: 1px solid var(--wpsi-widget-border);
  border-radius: 0.55rem;
  background: var(--wpsi-widget-bg);
  box-shadow: var(--wpsi-widget-shadow);
  color: var(--neutral-foreground-rest);
  box-sizing: border-box;
}

/* Chart series fills — use class wpsi-chart-series-N on bar/legend swatches */
.wpsi-chart-series-1 { background-color: var(--wpsi-chart-series-1); }
.wpsi-chart-series-2 { background-color: var(--wpsi-chart-series-2); }
.wpsi-chart-series-3 { background-color: var(--wpsi-chart-series-3); }
.wpsi-chart-series-4 { background-color: var(--wpsi-chart-series-4); }
.wpsi-chart-series-5 { background-color: var(--wpsi-chart-series-5); }
.wpsi-chart-series-6 { background-color: var(--wpsi-chart-series-6); }
.wpsi-chart-series-7 { background-color: var(--wpsi-chart-series-7); }
.wpsi-chart-series-8 { background-color: var(--wpsi-chart-series-8); }

/* Configuration admin tabs — labels above fields */
.wpsi-config-tabs fluent-tab {
  min-height: var(--wpsi-config-tab-min-height);
  padding-inline: var(--wpsi-config-tab-padding-x);
  font-size: var(--wpsi-config-tab-font-size);
}

.wpsi-config-tabs fluent-tab-panel {
  padding-top: var(--wpsi-config-tab-panel-gap);
}

.wpsi-config-panel fluent-text-field,
.wpsi-config-panel fluent-number-field,
.wpsi-config-panel fluent-select,
.wpsi-config-panel fluent-date-picker,
.wpsi-config-panel fluent-text-area,
.wpsi-config-panel fluent-combobox,
.wpsi-config-panel fluent-autocomplete {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wpsi-config-panel .wpsi-form-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wpsi-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  align-items: end;
}

.wpsi-form-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.wpsi-form-grid--medium {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.wpsi-form-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.35rem;
}

.wpsi-form-grid--config {
  gap: 0.65rem 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.wpsi-config-field-footnote {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.75rem;
}

/* Shared config field grids — labels above fields, wrap horizontally then stack */
.wpsi-config-field-grid .wpsi-form-field > :not(style),
.wpsi-config-field-grid .wpsi-form-field fluent-text-field,
.wpsi-config-field-grid .wpsi-form-field fluent-number-field,
.wpsi-config-field-grid .wpsi-form-field fluent-select,
.wpsi-config-field-grid .wpsi-form-field fluent-date-picker,
.wpsi-config-field-grid .wpsi-form-field fluent-text-area,
.wpsi-config-field-grid .wpsi-form-field fluent-combobox {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wpsi-config-field-grid .wpsi-form-field .fluent-input-label,
.wpsi-config-field-grid .wpsi-form-field fluent-label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.76rem;
  line-height: 1.15;
  text-align: left;
}

.wpsi-config-field-grid .wpsi-form-field--switch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  min-height: 0;
  padding-bottom: 0.05rem;
}

.wpsi-form-field--span-all {
  grid-column: 1 / -1;
}

.cdr-config-panel {
  width: 100%;
  max-width: none;
}

.cdr-config-section-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  max-width: none;
}

.cdr-config-switches-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
  align-items: flex-end;
}

.cdr-config-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

/* Native recording player — Chromium uses the inherited control color for
   the played portion and thumb; accent-color covers compatible engines. */
audio.wpsi-audio-player {
  color: var(--wpsi-media-progress);
  accent-color: var(--wpsi-media-progress);
  color-scheme: dark;
}

audio.wpsi-audio-player::-webkit-media-controls-timeline {
  color: var(--wpsi-media-progress);
  accent-color: var(--wpsi-media-progress);
}

/* FluentDataGrid — shared chrome (apply class="wpsi-data-grid" on every grid) */
fluent-data-grid.wpsi-data-grid td,
.fluent-data-grid.wpsi-data-grid td {
  padding: var(--wpsi-grid-cell-padding-y) var(--wpsi-grid-cell-padding-x);
  font-size: var(--wpsi-grid-cell-font-size);
  line-height: var(--wpsi-grid-cell-line-height);
  min-height: var(--wpsi-grid-row-min-height);
  box-sizing: border-box;
  vertical-align: middle;
}

fluent-data-grid.wpsi-data-grid.wpsi-data-grid--comfortable td,
.fluent-data-grid.wpsi-data-grid.wpsi-data-grid--comfortable td {
  min-height: var(--wpsi-grid-row-comfortable-min-height);
}

fluent-data-grid.wpsi-data-grid th,
.fluent-data-grid.wpsi-data-grid th {
  padding: 0;
  vertical-align: middle;
}

fluent-data-grid.wpsi-data-grid th .column-header,
.fluent-data-grid.wpsi-data-grid th .column-header {
  display: flex;
  align-items: center;
  min-height: var(--wpsi-grid-header-min-height);
  padding: var(--wpsi-grid-header-padding-y) var(--wpsi-grid-header-padding-x);
  box-sizing: border-box;
}

fluent-data-grid.wpsi-data-grid th .col-title,
.fluent-data-grid.wpsi-data-grid th .col-title {
  padding: 0;
  font-weight: 600;
  font-size: var(--wpsi-grid-header-font-size);
  line-height: var(--wpsi-grid-header-line-height);
  white-space: normal;
}

fluent-data-grid.wpsi-data-grid .col-sort-button,
.fluent-data-grid.wpsi-data-grid .col-sort-button {
  width: 100%;
  max-width: 100%;
}

fluent-data-grid.wpsi-data-grid .col-sort-button::part(control),
.fluent-data-grid.wpsi-data-grid .col-sort-button::part(control) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: auto;
  height: auto;
  padding: 0;
  gap: 0.25rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--wpsi-grid-header-font-size);
  line-height: var(--wpsi-grid-header-line-height);
  color: var(--neutral-foreground-rest);
  cursor: pointer;
}

fluent-data-grid.wpsi-data-grid .col-sort-button::part(control):hover,
fluent-data-grid.wpsi-data-grid .col-sort-button::part(control):active,
fluent-data-grid.wpsi-data-grid .col-sort-button::part(control):focus-visible,
.fluent-data-grid.wpsi-data-grid .col-sort-button::part(control):hover,
.fluent-data-grid.wpsi-data-grid .col-sort-button::part(control):active,
.fluent-data-grid.wpsi-data-grid .col-sort-button::part(control):focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--neutral-foreground-hover);
}

fluent-data-grid.wpsi-data-grid .col-sort-button::part(content),
.fluent-data-grid.wpsi-data-grid .col-sort-button::part(content) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

fluent-data-grid.wpsi-data-grid .col-sort-button svg,
.fluent-data-grid.wpsi-data-grid .col-sort-button svg {
  width: var(--wpsi-grid-sort-icon-size);
  height: var(--wpsi-grid-sort-icon-size);
  flex-shrink: 0;
  opacity: 0.85;
  fill: currentColor;
}

fluent-data-grid.wpsi-data-grid .col-justify-center .col-sort-button::part(control),
.fluent-data-grid.wpsi-data-grid .col-justify-center .col-sort-button::part(control) {
  justify-content: center;
}

fluent-data-grid.wpsi-data-grid .col-justify-end .col-sort-button::part(control),
.fluent-data-grid.wpsi-data-grid .col-justify-end .col-sort-button::part(control) {
  justify-content: end;
}

/* Legacy: grids without wpsi-data-grid still get header sort chrome */
fluent-data-grid th,
.fluent-data-grid th {
  padding: 0;
  vertical-align: middle;
}

fluent-data-grid th .column-header,
.fluent-data-grid th .column-header {
  display: flex;
  align-items: center;
  min-height: var(--wpsi-grid-header-min-height);
  padding: var(--wpsi-grid-header-padding-y) var(--wpsi-grid-header-padding-x);
  box-sizing: border-box;
}

fluent-data-grid th .col-title,
.fluent-data-grid th .col-title {
  padding: 0;
  font-weight: 600;
  font-size: var(--wpsi-grid-header-font-size);
  line-height: var(--wpsi-grid-header-line-height);
  white-space: normal;
}

fluent-data-grid .col-sort-button,
.fluent-data-grid .col-sort-button {
  width: 100%;
  max-width: 100%;
}

fluent-data-grid .col-sort-button::part(control),
.fluent-data-grid .col-sort-button::part(control) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: auto;
  height: auto;
  padding: 0;
  gap: 0.25rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--wpsi-grid-header-font-size);
  line-height: var(--wpsi-grid-header-line-height);
  color: var(--neutral-foreground-rest);
  cursor: pointer;
}

fluent-data-grid .col-sort-button::part(control):hover,
fluent-data-grid .col-sort-button::part(control):active,
fluent-data-grid .col-sort-button::part(control):focus-visible,
.fluent-data-grid .col-sort-button::part(control):hover,
.fluent-data-grid .col-sort-button::part(control):active,
.fluent-data-grid .col-sort-button::part(control):focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--neutral-foreground-hover);
}

fluent-data-grid .col-sort-button::part(content),
.fluent-data-grid .col-sort-button::part(content) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

fluent-data-grid .col-sort-button svg,
.fluent-data-grid .col-sort-button svg {
  width: var(--wpsi-grid-sort-icon-size);
  height: var(--wpsi-grid-sort-icon-size);
  flex-shrink: 0;
  opacity: 0.85;
  fill: currentColor;
}

fluent-data-grid .col-justify-center .col-sort-button::part(control),
.fluent-data-grid .col-justify-center .col-sort-button::part(control) {
  justify-content: center;
}

fluent-data-grid .col-justify-end .col-sort-button::part(control),
.fluent-data-grid .col-justify-end .col-sort-button::part(control) {
  justify-content: end;
}

/* Column resize handles — hidden until header hover (when ResizableColumns is enabled) */
fluent-data-grid,
.fluent-data-grid {
  --fluent-data-grid-header-opacity: 0;
  --fluent-data-grid-resize-handle-color: transparent;
}

fluent-data-grid th:hover,
fluent-data-grid th:focus-within,
.fluent-data-grid th:hover,
.fluent-data-grid th:focus-within {
  --fluent-data-grid-header-opacity: 1;
  --fluent-data-grid-resize-handle-color: var(--neutral-stroke-hover);
}

fluent-data-grid .resize-handle,
.fluent-data-grid .resize-handle {
  opacity: var(--fluent-data-grid-header-opacity);
  border-inline-end-color: var(--fluent-data-grid-resize-handle-color);
  transition: opacity 0.12s ease, border-color 0.12s ease;
}

/* FluentDataGrid hierarchical expander (HierarchicalToggle column) */
fluent-data-grid.wpsi-data-grid .hierarchical-toggle-container,
.fluent-data-grid.wpsi-data-grid .hierarchical-toggle-container {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

fluent-data-grid.wpsi-data-grid .hierarchical-expander,
.fluent-data-grid.wpsi-data-grid .hierarchical-expander {
  flex-shrink: 0;
}

fluent-data-grid.wpsi-data-grid .hierarchical-expand-button::part(control),
.fluent-data-grid.wpsi-data-grid .hierarchical-expand-button::part(control) {
  color: var(--neutral-foreground-rest);
}

fluent-data-grid.wpsi-data-grid .hierarchical-expand-button svg,
.fluent-data-grid.wpsi-data-grid .hierarchical-expand-button svg {
  fill: currentColor;
  color: var(--neutral-foreground-rest);
}

.wpsi-grid-expander-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Expander column */
.wpsi-grid-expander-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  cursor: pointer;
}

.wpsi-grid-expander-icon,
.wpsi-grid-expander-cell fluent-icon,
.wpsi-grid-expander-cell .fluent-icon {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.wpsi-grid-expander-icon svg,
.wpsi-grid-expander-cell svg {
  width: 3rem;
  height: 3rem;
}

fluent-data-grid .wpsi-grid-row-expanded,
.fluent-data-grid .wpsi-grid-row-expanded {
  background: var(--wpsi-grid-row-selected);
}

fluent-data-grid .wpsi-grid-row-selected td,
.fluent-data-grid .wpsi-grid-row-selected td {
  background: var(--wpsi-grid-row-selected);
}

fluent-data-grid .wpsi-grid-child-row,
.fluent-data-grid .wpsi-grid-child-row {
  background: var(--neutral-layer-2);
}

fluent-data-grid .wpsi-grid-child-row > td,
.fluent-data-grid .wpsi-grid-child-row > td {
  display: none;
}

fluent-data-grid .wpsi-grid-child-row > td:first-child,
.fluent-data-grid .wpsi-grid-child-row > td:first-child {
  display: block;
  grid-column: 1 / -1 !important;
  width: auto !important;
  min-width: 0;
  max-width: none;
  justify-self: stretch;
  padding: 0.5rem;
  overflow: visible;
  background: var(--neutral-layer-1);
  border-top: 1px solid var(--neutral-stroke-divider);
}

fluent-data-grid .wpsi-grid-child-row .hierarchical-toggle-container,
.fluent-data-grid .wpsi-grid-child-row .hierarchical-toggle-container {
  display: block;
  width: 100%;
  height: auto;
  margin-inline-start: 0 !important;
  left: 0;
}

fluent-data-grid .wpsi-grid-child-row .hierarchical-expander,
.fluent-data-grid .wpsi-grid-child-row .hierarchical-expander {
  display: none;
}

.wpsi-grid-expander-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--neutral-foreground-rest);
  cursor: pointer;
  line-height: 0;
}

.wpsi-grid-expander-btn:hover {
  background: var(--neutral-fill-stealth-hover);
  color: var(--neutral-foreground-hover);
}

.wpsi-grid-expander-btn:focus-visible {
  outline: 2px solid var(--focus-stroke-outer);
  outline-offset: 1px;
}

/* Detail panel rendered below the main grid */
.wpsi-grid-detail-panel {
  display: block;
  margin: 0;
  padding: 0.5rem 2.5rem 1rem;
  border: 1px solid var(--neutral-stroke-divider);
  border-radius: var(--wpsi-grid-detail-radius);
  background: var(--neutral-layer-1);
  width: min(100%, calc(100vw - var(--wpsi-sidebar-width) - 4rem));
  max-width: calc(100vw - 4rem);
  min-height: 4rem;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: var(--wpsi-grid-detail-shadow);
}

.wpsi-grid-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding: 0.1rem 0.2rem 0.65rem;
  color: var(--neutral-foreground-hint);
  font-size: var(--wpsi-grid-cell-font-size);
}

.wpsi-grid-detail-header strong,
.wpsi-grid-detail-panel-title {
  color: var(--neutral-foreground-rest);
  font-weight: 600;
}

.wpsi-grid-detail-header strong {
  margin-inline-end: auto;
}

.wpsi-grid-detail-scroll {
  width: 100%;
  max-height: 24rem;
  overflow: auto;
  border: 1px solid var(--neutral-stroke-rest);
  border-radius: calc(var(--wpsi-grid-detail-radius) - 4px);
  background: var(--neutral-layer-1);
}

.wpsi-grid-detail-grid {
  width: max-content !important;
  min-height: 0 !important;
  margin: 0;
}

.wpsi-grid-detail-grid th {
  background: var(--neutral-layer-2) !important;
}

.wpsi-grid-detail-grid td {
  background: var(--neutral-layer-1);
  border-bottom-color: var(--neutral-stroke-rest);
}

.wpsi-grid-detail-play::part(control) {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
}

@media (max-width: 60rem) {
  .wpsi-grid-detail-panel {
    padding-inline: 0.75rem;
  }
}