/*
 * CX Insights competitive dashboard experience layer.
 * Scope: presentation-only workspace surface styling.
 * This pass reinforces the existing CX Insights features against enterprise
 * dashboard expectations without changing data, routing, calculations,
 * filters, persistence, backend/API behavior, or production readiness claims.
 */

:root {
  color-scheme: light dark;
  --cx-shell-gap: 24px;
  --cx-density-4: 4px;
  --cx-density-8: 8px;
  --cx-density-16: 16px;
  --cx-density-24: 24px;
  --cx-density-32: 32px;
  --cx-dashboard-blue: #0b3b67;
  --cx-dashboard-blue-soft: rgba(11, 59, 103, 0.08);
  --cx-dashboard-indigo: #4452a3;
  --cx-dashboard-teal: #007c89;
  --cx-dashboard-amber: #d97706;
  --cx-dashboard-red: #b91c1c;
  --cx-skeleton-base: rgba(146, 168, 188, 0.18);
  --cx-skeleton-sheen: rgba(255, 255, 255, 0.52);
}

html {
  scroll-padding-top: 96px;
}

body {
  letter-spacing: -0.006em;
}

.sidebar .brand::after {
  display: block;
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 251, 255, 0.76);
  content: "Executive CX cockpit";
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group p::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  content: "";
  vertical-align: 1px;
}

.module-tab span::before {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(248, 251, 255, 0.82);
  background-image: radial-gradient(circle at center, currentColor 0 3px, transparent 4px);
  content: "";
  font-size: 13px;
  font-weight: 900;
}

.module-tab[aria-current="page"] span::before {
  background: rgba(255, 255, 255, 0.2);
  background-image:
    linear-gradient(45deg, transparent 0 44%, currentColor 45% 58%, transparent 59%),
    linear-gradient(-45deg, transparent 0 48%, currentColor 49% 62%, transparent 63%);
  background-position:
    5px 9px,
    9px 6px;
  background-repeat: no-repeat;
  background-size:
    7px 7px,
    9px 10px;
  color: #ffffff;
}

.topbar > div:first-child::before {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(0, 124, 137, 0.22);
  border-radius: 999px;
  background: #e9fbf9;
  color: #164b45;
  content: "Overview / Analysis / Operations / Governance";
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-scope::before {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px dashed rgba(0, 124, 137, 0.34);
  border-radius: 12px;
  background: rgba(233, 251, 249, 0.8);
  color: #164b45;
  content: "Search scope: tenant · property · source · topic";
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.command-center {
  display: grid;
  gap: var(--cx-density-24);
}

.command-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: clamp(20px, 3vw, 36px);
}

.command-hero::after {
  position: absolute;
  right: clamp(22px, 3vw, 40px);
  bottom: clamp(18px, 2.5vw, 32px);
  width: 190px;
  height: 190px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0 24%, transparent 25% 100%),
    conic-gradient(from 210deg, rgba(255, 255, 255, 0.2), rgba(255, 181, 71, 0.52), rgba(20, 184, 166, 0.36), rgba(255, 255, 255, 0.18));
  opacity: 0.52;
  content: "";
}

.top-issue-summary,
.top-issue-context {
  position: relative;
  z-index: 1;
}

.top-issue-actions .action-link:first-child::before,
.queue-actions .primary::before,
.replacement-evaluation-cta::before {
  margin-right: 8px;
  content: "↗";
  font-weight: 900;
}

.top-issue-actions .secondary-action::before,
.compact-action::before {
  margin-right: 8px;
  content: "⌁";
  font-weight: 900;
}

.command-metric-clusters {
  align-items: stretch;
}

.metric-cluster {
  padding: 18px;
}

.metric-cluster-head {
  gap: 12px;
  margin-bottom: 14px;
}

.metric-cluster-head strong,
.metric-card strong {
  font-variant-numeric: tabular-nums;
}

.metric-card {
  min-height: 148px;
  padding: 16px;
}

.metric-card::after,
.narrative-card::after,
.trend-day::after,
.role-card::after,
.report-card::after,
.evidence-record::after {
  position: absolute;
  inset: auto 14px 12px auto;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 124, 137, 0.24), rgba(68, 82, 163, 0.18));
  content: "";
  opacity: 0;
  transition: opacity 160ms ease;
}

.metric-card:hover::after,
.narrative-card:hover::after,
.trend-day:hover::after,
.role-card:hover::after,
.report-card:hover::after,
.evidence-record:hover::after {
  opacity: 1;
}

.metric-card-empty,
.empty-state {
  position: relative;
  overflow: hidden;
}

.metric-card-empty::before,
.empty-state::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--cx-skeleton-sheen) 46%, transparent 70%);
  animation: cx-skeleton-sweep 2.4s ease-in-out infinite;
  content: "";
  opacity: 0.34;
}

@keyframes cx-skeleton-sweep {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

.decision-path {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-step-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  border-radius: 16px;
}

.process-step-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--cx-dashboard-teal), var(--cx-dashboard-indigo));
  content: "";
}

.cockpit-grid,
.queue-buckets,
.trend-chart-grid,
.report-grid,
.role-mode-grid,
.workspace-grid,
.trust-grid,
.ops-grid {
  align-items: stretch;
}

.panel,
.chart-panel,
.hotspot-panel,
.queue-snapshot-panel,
.root-cause-panel,
.evidence-sample-panel,
.evidence-panel,
.saved-view-panel,
.report-workspace-panel,
.admin-import-panel {
  min-width: 0;
}

.panel-head .action-link,
.panel-head .compact-action {
  white-space: nowrap;
}

.heatmap {
  align-items: stretch;
}

.heatmap-header {
  position: sticky;
  top: 76px;
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.heatmap .cell {
  min-height: 88px;
  padding: 12px;
  scroll-margin-top: 180px;
}

.heatmap .cell span,
.heatmap .cell strong,
.heatmap .cell small {
  position: relative;
  z-index: 1;
}

.heatmap .cell::after {
  position: absolute;
  inset: auto 10px 10px 10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 124, 137, 0.22);
  content: "";
}

.heatmap .cell[aria-pressed="true"]::after,
.heatmap .selected-cell::after {
  background: rgba(255, 255, 255, 0.72);
}

.trend-semantic-legend,
.trend-controls,
.heatmap-reading-key,
.analytics-meaning-grid,
.movement-meaning-grid,
.trend-workflow-grid {
  border-radius: 16px;
}

.trend-chart-grid article,
.governed-topic-movement-card {
  min-height: 220px;
}

.trend-day {
  min-height: 122px;
}

.trend-bar,
.trend-chart-grid .bar i,
.movement-sparkline i,
.metric-sparkline i,
.executive-mix-row i {
  transition: filter 160ms ease, transform 160ms ease;
}

.trend-day:hover .trend-bar,
.trend-chart-grid article:hover .bar i,
.governed-topic-movement-card:hover .movement-sparkline i {
  filter: saturate(1.08) contrast(1.04);
  transform: scaleY(1.02);
  transform-origin: bottom;
}

.queue-item,
.queue-item-compact {
  position: relative;
  overflow: hidden;
}

.queue-item::before,
.queue-item-compact::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--cx-dashboard-red), var(--cx-dashboard-amber));
  content: "";
}

.queue-item-runner-up::before {
  background: linear-gradient(180deg, var(--cx-dashboard-teal), var(--cx-dashboard-indigo));
}

.queue-title-stack,
.queue-recommendation-block,
.queue-investigation-chain,
.action-trace-grid {
  position: relative;
  z-index: 1;
}

.queue-actions .row-action,
.top-issue-actions .action-link,
.evidence-tabs button,
.saved-view-controls button,
.taxonomy-row button,
.trend-drilldown,
.action-link,
.primary-action,
.compact-action {
  touch-action: manipulation;
}

.role-mode-grid::before {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border: 1px solid rgba(0, 124, 137, 0.24);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(0, 124, 137, 0.12), rgba(68, 82, 163, 0.08));
  color: var(--cx-text-primary);
  content: "Role-based cockpit: Executive Overview · Detailed Analytics · Journey and source operations";
  font-size: 13px;
  font-weight: 850;
}

.role-card,
.saved-view-panel,
.saved-view-card {
  min-height: 168px;
}

.evidence-panel-head::before,
.report-workspace-panel .panel-head::before,
.admin-import-panel .panel-head::before {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--cx-dashboard-blue-soft);
  color: var(--cx-dashboard-blue);
  content: "◆";
  font-size: 14px;
}

.evidence-record,
.source-record-grid > div,
.report-card,
.artifact-row,
.source-health-row,
.admin-section-row {
  padding: 16px;
}

.evidence-hierarchy,
.evidence-summary-strip > div,
.action-trace-grid > div,
.source-record-grid > div,
.admin-guardrail-strip div,
.import-scope-grid div,
.validation-grid div,
.import-status-strip div,
.matrix div {
  border-radius: 14px;
}

.filter-drawer {
  border-radius: 18px;
  box-shadow: var(--cx-elevation-1);
}

.filter-drawer summary::before {
  margin-right: 10px;
  content: "⌕";
  font-weight: 900;
}

.filter-panel {
  gap: 16px;
}

.filter-field label,
.scope-row label,
.scope-row span {
  letter-spacing: 0.065em;
}

select,
input,
textarea {
  min-height: 40px;
}

.export-controls,
.import-form,
.taxonomy-form,
.saved-view-controls {
  gap: 12px;
}

.row-action,
.action-link,
.primary-action,
.compact-action,
.evidence-tabs button,
.filter-drawer summary {
  min-height: 42px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cx-background: #08111f;
    --cx-surface: #101d2f;
    --cx-surface-subtle: #132235;
    --cx-surface-muted: #182a3f;
    --cx-border: #28425d;
    --cx-border-strong: #3a5a78;
    --cx-text-primary: #eef6ff;
    --cx-text-muted: #aec1d4;
    --cx-text-soft: #8ea5bb;
    --cx-primary: #061426;
    --cx-primary-hover: #10243e;
    --cx-accent-soft: rgba(20, 184, 166, 0.22);
    --cx-shadow-panel: 0 22px 52px rgba(0, 0, 0, 0.34);
    --cx-skeleton-base: rgba(142, 165, 187, 0.18);
    --cx-skeleton-sheen: rgba(255, 255, 255, 0.08);
  }

  body {
    background:
      radial-gradient(circle at 12% -8%, rgba(0, 124, 137, 0.24), transparent 34rem),
      radial-gradient(circle at 92% 0%, rgba(68, 82, 163, 0.2), transparent 30rem),
      linear-gradient(180deg, #07111f 0%, #0a1627 48%, #08111f 100%);
  }

  .topbar,
  .account-scope,
  .panel,
  .chart-panel,
  .metric-cluster,
  .queue-bucket,
  .evidence-panel,
  .saved-view-panel,
  .report-workspace-panel,
  .admin-import-panel,
  .replacement-evaluation-panel,
  .filter-drawer,
  .metric-card,
  .issue-card,
  .narrative-card,
  .taxonomy-row,
  .trend-day,
  .role-card,
  .story-card,
  .report-card,
  .recommendation,
  .analyst-review-card,
  .saved-view-card,
  .artifact-row,
  .source-health-row,
  .admin-section-row,
  .evidence-record,
  .source-record-grid > div,
  .matrix div {
    border-color: rgba(142, 165, 187, 0.28);
    background:
      linear-gradient(180deg, rgba(16, 29, 47, 0.94), rgba(12, 24, 39, 0.98)),
      radial-gradient(circle at 100% 0%, rgba(0, 124, 137, 0.12), transparent 18rem);
    color: var(--cx-text-primary);
    box-shadow: var(--cx-shadow-panel);
  }

  .topbar > div:first-child::before,
  .account-scope::before,
  .role-mode-grid::before,
  .trend-legend-item,
  .guardrail,
  .scope-guardrail,
  .taxonomy-governance-strip,
  .trend-controls,
  .action-queue-scope-disclosure,
  .heatmap-reading-key {
    border-color: rgba(20, 184, 166, 0.28);
    background: rgba(20, 184, 166, 0.12);
    color: #d8fffb;
  }

  select,
  input,
  textarea,
  .scope-row strong,
  .scope-row select {
    border-color: rgba(142, 165, 187, 0.34);
    background: #0c1827;
    color: var(--cx-text-primary);
  }

  .helper-text,
  .operation-note,
  .panel-head > span,
  .evidence-context-note,
  .narrative-guardrail-note,
  .filter-field label,
  .scope-row label,
  .scope-row span {
    color: var(--cx-text-muted);
  }

  .heatmap .cell:not([aria-pressed="true"]),
  .trend-chart,
  .trend-grid,
  .weekly-counts,
  .metric-sparkline,
  .movement-sparkline {
    background: linear-gradient(180deg, #101d2f 0%, #0c1827 100%);
  }
}

@media (max-width: 1180px) {
  .decision-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-hero {
    grid-template-columns: 1fr;
  }

  .command-hero::after {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 760px) {
  .topbar > div:first-child::before,
  .account-scope::before,
  .role-mode-grid::before {
    font-size: 11px;
    line-height: 1.35;
  }

  .decision-path,
  .command-metric-clusters,
  .cockpit-grid,
  .queue-buckets,
  .trend-chart-grid,
  .role-mode-grid,
  .saved-view-grid,
  .report-grid,
  .workspace-grid,
  .trust-grid,
  .ops-grid,
  .decision-grid,
  .source-record-grid,
  .import-scope-grid,
  .validation-grid,
  .import-status-strip,
  .admin-guardrail-strip,
  .tenant-guardrail-strip {
    grid-template-columns: 1fr;
  }

  .heatmap-header {
    position: static;
  }

  .panel-head,
  .evidence-panel-head {
    display: grid;
  }

  .panel-head .action-link,
  .panel-head .compact-action {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-card-empty::before,
  .empty-state::before {
    animation: none;
  }
}