/*
 * CX Insights enterprise dashboard polish layer.
 * Scope: presentation-only workspace surface styling.
 * This layer refines dashboard composition, spacing, interaction affordance,
 * and executive-review scanability without adding runtime behavior.
 */

:root {
  --cx-page-gutter: clamp(18px, 2.2vw, 34px);
  --cx-card-radius: 18px;
  --cx-card-radius-sm: 12px;
  --cx-elevation-1: 0 1px 2px rgba(10, 27, 47, 0.06), 0 10px 28px rgba(10, 27, 47, 0.08);
  --cx-elevation-2: 0 1px 2px rgba(10, 27, 47, 0.08), 0 18px 48px rgba(10, 27, 47, 0.12);
  --cx-elevation-hover: 0 2px 8px rgba(10, 27, 47, 0.08), 0 24px 54px rgba(10, 27, 47, 0.14);
  --cx-grid-line: rgba(146, 168, 188, 0.28);
  --cx-premium-surface: rgba(255, 255, 255, 0.88);
}

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 14% -8%, rgba(0, 124, 137, 0.18), transparent 34rem),
    radial-gradient(circle at 92% 0%, rgba(91, 75, 183, 0.12), transparent 30rem),
    linear-gradient(180deg, #f7fafc 0%, #edf3f7 48%, #e8eef5 100%);
  color: var(--cx-text-primary);
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cx-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cx-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 34rem);
  content: "";
}

.shell {
  grid-template-columns: minmax(252px, 286px) minmax(0, 1fr);
}

.sidebar {
  padding: 28px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.brand {
  margin-bottom: 30px;
  padding: 0 4px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand h1 {
  letter-spacing: -0.02em;
}

.brand p,
.nav-group p {
  letter-spacing: 0.08em;
}

.primary-nav {
  gap: 20px;
}

.module-tab {
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 42px;
  padding: 10px 12px;
}

.module-tab:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.module-tab[aria-current="page"] {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateX(0);
}

.workspace {
  gap: 22px;
  padding: 24px var(--cx-page-gutter) 44px;
}

.topbar {
  align-items: center;
  margin: -24px calc(var(--cx-page-gutter) * -1) 2px;
  padding: 18px var(--cx-page-gutter);
}

.topbar h2 {
  font-size: clamp(24px, 2vw, 32px);
  letter-spacing: -0.035em;
}

.guardrail,
.scope-guardrail,
.account-scope,
.scope-row select,
.scope-row strong,
select,
input,
textarea,
button {
  border-radius: var(--cx-card-radius-sm);
}

.account-scope {
  max-width: min(760px, 100%);
  padding: 8px;
  border: 1px solid rgba(146, 168, 188, 0.48);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(10, 27, 47, 0.08);
}

.panel,
.chart-panel,
.metric-cluster,
.queue-bucket,
.evidence-panel,
.saved-view-panel,
.report-workspace-panel,
.admin-import-panel,
.replacement-evaluation-panel,
.command-hero,
.hotspot-panel,
.ranking-trace-panel,
.saved-view-summary,
.evidence-workspace {
  border-radius: var(--cx-card-radius);
}

.panel,
.chart-panel,
.metric-cluster,
.queue-bucket,
.evidence-panel,
.saved-view-panel,
.report-workspace-panel,
.admin-import-panel,
.replacement-evaluation-panel,
.ranking-trace-panel,
.saved-view-summary,
.evidence-workspace {
  border-color: rgba(146, 168, 188, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 253, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(0, 124, 137, 0.07), transparent 18rem);
  box-shadow: var(--cx-elevation-1);
}

.panel-head,
.evidence-panel-head {
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
}

.panel-head h3,
.evidence-panel-head h3,
.command-hero h3 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.panel-head > span,
.helper-text,
.operation-note,
.evidence-context-note,
.narrative-guardrail-note {
  max-width: 74ch;
}

.command-hero {
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(135deg, rgba(7, 24, 44, 0.98), rgba(11, 59, 103, 0.92) 44%, rgba(0, 124, 137, 0.86)),
    radial-gradient(circle at 82% 20%, rgba(255, 181, 71, 0.5), transparent 19rem);
  box-shadow: 0 28px 70px rgba(10, 27, 47, 0.26);
}

.command-hero h3 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
}

.command-metric-clusters,
.cockpit-grid,
.decision-path,
.narrative-grid,
.trend-chart-grid,
.queue-buckets,
.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 {
  gap: 20px;
}

.metric-card,
.issue-card,
.narrative-card,
.p0-narrative-scan,
.taxonomy-row,
.taxonomy-example-card,
.taxonomy-buyer-frame > div,
.taxonomy-buyer-answers article,
.taxonomy-surface-links article,
.trend-day,
.trend-takeaway,
.governed-topic-movement-card,
.role-card,
.story-card,
.report-card,
.recommendation,
.analyst-review-card,
.saved-view-card,
.segment-card,
.export-evidence-card,
.phase-evidence-card,
.artifact-row,
.source-health-row,
.admin-section-row,
.evidence-record,
.source-record-grid > div,
.evidence-summary-strip > div,
.trust-handoff-strip > div,
.action-trace-grid > div,
.investigation-chain-panel > div,
.evidence-chain-callout,
.gate-list span,
.matrix div,
.import-scope-grid div,
.validation-grid div,
.import-status-strip div,
.admin-guardrail-strip div {
  border-radius: 14px;
  border-color: rgba(146, 168, 188, 0.5);
  box-shadow: 0 8px 20px rgba(10, 27, 47, 0.06);
}

.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 {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.metric-card:hover,
.issue-card:hover,
.narrative-card:hover,
.taxonomy-row:hover,
.trend-day:hover,
.role-card:hover,
.story-card:hover,
.report-card:hover,
.recommendation:hover,
.analyst-review-card:hover,
.saved-view-card:hover,
.artifact-row:hover,
.source-health-row:hover,
.admin-section-row:hover,
.evidence-record:hover {
  border-color: rgba(0, 124, 137, 0.42);
  box-shadow: var(--cx-elevation-hover);
  transform: translateY(-1px);
}

.metric-card strong,
.issue-card strong,
.narrative-card strong,
.taxonomy-row strong,
.trend-day strong,
.role-card strong,
.report-card strong,
.recommendation strong,
.evidence-record strong,
.matrix strong {
  letter-spacing: -0.015em;
}

.metric-card p,
.queue-item p,
.recommendation p,
.evidence-record p,
.report-card p,
.story-card p,
.analyst-review-card p {
  line-height: 1.55;
}

.metric-gauge,
.metric-card > span:not(.status-badge),
.trend-legend-item,
.status-badge,
.ui-chip,
.action-state-badge,
.investigation-match-label {
  font-variant-numeric: tabular-nums;
}

.trend-chart,
.trend-grid,
.executive-trend-grid,
.weekly-counts,
.compact-trend,
.movement-sparkline,
.metric-sparkline {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 251, 0.98)),
    linear-gradient(90deg, rgba(146, 168, 188, 0.18) 1px, transparent 1px) 0 0 / 48px 100%;
}

.trend-bar,
.trend-chart-grid .bar i,
.executive-mix-row i,
.metric-sparkline i,
.movement-sparkline i {
  border-radius: 999px 999px 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.heatmap {
  gap: 10px;
}

.heatmap .cell {
  border-radius: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.heatmap .cell:hover,
.heatmap .cell:focus-visible {
  border-color: rgba(0, 124, 137, 0.48);
  box-shadow: 0 14px 32px rgba(0, 124, 137, 0.14);
  transform: translateY(-1px);
}

.queue-item,
.queue-item-compact {
  border-radius: 16px;
}

.queue-item-title-row,
.queue-state-badges,
.queue-actions,
.top-issue-actions {
  gap: 10px;
}

.queue-recommendation-block,
.why-action,
.queue-investigation-chain,
.evidence-hierarchy,
.evidence-chain-callout,
.heatmap-selection-summary,
.action-queue-scope-disclosure,
.taxonomy-governance-strip,
.trend-controls,
.import-form,
.export-controls,
.layout-edit-affordance,
.global-focus-indicator {
  border-radius: 14px;
}

.evidence-panel {
  box-shadow: var(--cx-elevation-2);
}

.evidence-tabs {
  gap: 8px;
}

.evidence-tabs button,
.row-action,
.action-link,
.primary-action,
.compact-action,
.taxonomy-row button,
.trend-drilldown,
.saved-view-controls button {
  min-height: 38px;
  border-radius: 12px;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.evidence-tabs button:hover,
.row-action:hover,
.action-link:hover,
.primary-action:hover,
.compact-action:hover,
.taxonomy-row button:hover,
.trend-drilldown:hover,
.saved-view-controls button:hover {
  transform: translateY(-1px);
}

.evidence-tabs button:focus-visible,
.row-action:focus-visible,
.action-link:focus-visible,
.primary-action:focus-visible,
.compact-action:focus-visible,
.taxonomy-row button:focus-visible,
.trend-drilldown:focus-visible,
.saved-view-controls button:focus-visible,
.module-tab:focus-visible,
.scope-row select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0, 124, 137, 0.24);
  outline-offset: 2px;
}

.status-badge,
.ui-chip,
.action-state-badge,
.investigation-match-label,
.trend-legend-item {
  letter-spacing: 0.04em;
}

.replacement-evaluation-panel,
.report-workspace-panel,
.admin-import-panel,
.evidence-panel {
  overflow: hidden;
}

.replacement-evaluation-cta,
.top-issue-actions .primary,
.queue-actions .primary {
  min-height: 42px;
  border-radius: 14px;
}

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .workspace {
    padding-inline: 22px;
  }

  .topbar {
    margin-inline: -22px;
    padding-inline: 22px;
  }
}

@media (max-width: 920px) {
  .shell {
    display: block;
  }

  .sidebar {
    position: relative;
    height: auto;
    max-height: 148px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .workspace {
    padding: 18px 16px 32px;
  }

  .topbar {
    position: relative;
    display: grid;
    margin: -18px -16px 0;
    padding: 16px;
  }

  .account-scope {
    grid-template-columns: 1fr;
  }

  .command-hero h3 {
    font-size: 28px;
  }

  .command-metric-clusters,
  .cockpit-grid,
  .decision-path,
  .narrative-grid,
  .trend-chart-grid,
  .queue-buckets,
  .role-mode-grid,
  .saved-view-grid,
  .report-grid,
  .workspace-grid,
  .trust-grid,
  .ops-grid,
  .decision-grid {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}