/* Executive dashboard modernization layer
   Scoped to .cp-executive-page so no other CostPilot page is affected. */

.cp-executive-page {
  --bg-base: var(--cp-color-canvas);
  --bg-panel: var(--cp-color-surface-1);
  --bg-input: var(--cp-color-surface-2);
  --border: var(--cp-color-border);
  --text-primary: var(--cp-color-text);
  --text-muted: var(--cp-color-text-secondary);
  --accent: var(--cp-color-primary);
  --accent-green: var(--cp-color-positive);
  --accent-yellow: var(--cp-color-warning);
  --accent-red: var(--cp-color-danger);
  --accent-purple: var(--cp-color-info);
  font-family: var(--cp-font-sans);
  background:
    radial-gradient(circle at 50% -20%, rgba(76, 154, 255, 0.06), transparent 34%),
    var(--cp-color-canvas);
}

.cp-executive-page .exec-header {
  min-height: 64px;
  height: auto;
  padding: 10px clamp(20px, 2.2vw, 36px);
  gap: var(--cp-space-5);
  border-bottom-color: var(--cp-color-border);
  background: var(--cp-color-surface-1);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 20;
}

.cp-executive-page .exec-header-left {
  gap: var(--cp-space-5);
}

.cp-executive-page .exec-logo-img {
  max-height: 38px;
}

.cp-executive-page .exec-tagline {
  color: var(--cp-color-text-muted);
  letter-spacing: 0.1em;
}

.cp-executive-page .exec-header-right {
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cp-executive-page .exec-header-right::-webkit-scrollbar {
  display: none;
}

.cp-executive-page .nav-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 10px;
  color: var(--cp-color-text-secondary);
  border-color: transparent;
  border-radius: var(--cp-radius-sm);
  transition:
    color var(--cp-transition-fast),
    background-color var(--cp-transition-fast),
    border-color var(--cp-transition-fast);
}

.cp-executive-page .nav-link:hover {
  color: var(--cp-color-text);
  background: var(--cp-color-surface-2);
  border-color: var(--cp-color-border);
}

.cp-executive-page .nav-link:focus-visible,
.cp-executive-page button:focus-visible,
.cp-executive-page select:focus-visible,
.cp-executive-page input:focus-visible,
.cp-executive-page textarea:focus-visible,
.cp-executive-page a:focus-visible {
  outline: none;
  box-shadow: var(--cp-shadow-focus);
}

.cp-executive-page .exec-body {
  padding: clamp(20px, 2.2vw, 36px) clamp(20px, 2.5vw, 44px) 48px;
  scrollbar-color: var(--cp-color-border-strong) transparent;
}

.cp-executive-page .exec-body > * {
  width: min(100%, var(--cp-content-max));
  margin-left: auto;
  margin-right: auto;
}

.cp-executive-page .exec-filter-card,
.cp-executive-page .hero-card,
.cp-executive-page .exec-action-strip,
.cp-executive-page .usage-card,
.cp-executive-page .burn-card,
.cp-executive-page .spend-visual-card,
.cp-executive-page .recommendation-card,
.cp-executive-page .source-tile,
.cp-executive-page .exec-kpi-card,
.cp-executive-page .exec-insight-card,
.cp-executive-page .annual-savings-proof-card {
  border-color: var(--cp-color-border);
  border-radius: var(--cp-radius-md);
  background-color: var(--cp-color-surface-1);
  box-shadow: none;
}

.cp-executive-page .hero-card:hover,
.cp-executive-page .spend-visual-card:hover,
.cp-executive-page .exec-kpi-card:hover {
  border-color: var(--cp-color-border-strong);
}

.cp-executive-page .exec-filter-card {
  padding: var(--cp-space-4);
  margin-bottom: var(--cp-space-5);
}

.cp-executive-page .exec-filter-head {
  margin-bottom: var(--cp-space-3);
}

.cp-executive-page .exec-filter-title,
.cp-executive-page .chart-label,
.cp-executive-page .burn-label,
.cp-executive-page .usage-label,
.cp-executive-page .exec-action-kicker {
  color: var(--cp-color-text-secondary);
  letter-spacing: 0.085em;
}

.cp-executive-page .exec-filter,
.cp-executive-page .exec-filter-clear,
.cp-executive-page .trial-test-input,
.cp-executive-page .trial-test-textarea {
  min-height: var(--cp-control-height);
  border-color: var(--cp-color-border);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-color-surface-2);
  color: var(--cp-color-text);
  transition:
    border-color var(--cp-transition-fast),
    background-color var(--cp-transition-fast);
}

.cp-executive-page .exec-filter:hover,
.cp-executive-page .exec-filter-clear:hover {
  border-color: var(--cp-color-border-strong);
}

.cp-executive-page .exec-action-strip {
  padding: var(--cp-space-4);
}

.cp-executive-page .exec-action-card,
.cp-executive-page .savings-compare-card,
.cp-executive-page .savings-proof {
  border-radius: var(--cp-radius-sm);
  box-shadow: none;
}

.cp-executive-page .hero-number,
.cp-executive-page .annual-savings-value,
.cp-executive-page .savings-compare-value,
.cp-executive-page .usage-value,
.cp-executive-page .burn-value,
.cp-executive-page .exec-kpi-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.cp-executive-page .chart-canvas-wrap {
  border-radius: var(--cp-radius-sm);
}

.cp-executive-page table {
  border-collapse: separate;
  border-spacing: 0;
}

.cp-executive-page th {
  color: var(--cp-color-text-secondary);
  background: var(--cp-color-surface-2);
  font-size: 10px;
  letter-spacing: 0.075em;
}

.cp-executive-page td {
  border-color: var(--cp-color-border);
}

.cp-executive-page tbody tr {
  transition: background-color var(--cp-transition-fast);
}

.cp-executive-page tbody tr:hover {
  background: rgba(76, 154, 255, 0.045);
}

.cp-executive-page .exec-footer {
  min-height: 58px;
  height: auto;
  padding: 10px clamp(20px, 2.2vw, 36px);
  border-top-color: var(--cp-color-border);
  background: var(--cp-color-surface-1);
}

.cp-executive-page .btn-operate {
  border-radius: var(--cp-radius-sm);
  background: var(--cp-color-positive);
  box-shadow: none;
}

/* Color remains supplemental: status cards also differ by border treatment. */
.cp-executive-page .exec-action-card.green,
.cp-executive-page .savings-compare-card.saved {
  border-style: solid;
}

.cp-executive-page .exec-action-card.yellow,
.cp-executive-page .savings-compare-card.warning {
  border-style: dashed;
  border-width: 2px;
}

.cp-executive-page .exec-action-card.red,
.cp-executive-page .savings-compare-card.risk {
  border-style: double;
  border-width: 3px;
}

.cp-executive-page .exec-action-badge {
  border: 1px solid currentColor;
}

.cp-executive-page .exec-action-badge.badge-yellow {
  border-style: dashed;
}

.cp-executive-page .exec-action-badge.badge-red {
  border-style: double;
  border-width: 3px;
}

.cp-executive-page .exec-action-strip.warning {
  border-style: dashed;
  border-width: 2px;
}

.cp-executive-page .exec-action-strip.danger {
  border-style: double;
  border-width: 3px;
}

/* Tier names gain a stable ordinal cue instead of relying on hue. */
.cp-executive-page .badge-scout::before { content: "S1 · "; }
.cp-executive-page .badge-analyst::before { content: "S2 · "; }
.cp-executive-page .badge-advisor::before { content: "S3 · "; }
.cp-executive-page .badge-strategist::before { content: "S4 · "; }

/* Status dots change shape as well as color. Visible text remains adjacent. */
.cp-executive-page .status-dot.online {
  border-radius: 50%;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.cp-executive-page .status-dot.offline {
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: none;
}

.cp-executive-page .risk-dot.clear {
  border-radius: 50%;
  background: var(--cp-color-positive);
  outline: 1px solid var(--cp-color-positive);
  outline-offset: 2px;
}

.cp-executive-page .risk-dot.critical {
  border-radius: 1px;
  background: var(--cp-color-danger);
  transform: rotate(45deg);
  outline: 1px solid var(--cp-color-danger);
  outline-offset: 2px;
}

/* Bars combine color with patterns. Numeric values and captions remain visible. */
.cp-executive-page .savings-compare-gauge-fill.status-healthy {
  background-color: var(--cp-color-positive);
  background-image: none;
}

.cp-executive-page .savings-compare-gauge-fill.status-warning {
  background-color: var(--cp-color-warning);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.28) 0 3px,
    transparent 3px 7px
  );
}

.cp-executive-page .savings-compare-gauge-fill.status-critical {
  background-color: var(--cp-color-danger);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.34) 0 2px,
    transparent 2px 5px
  );
}

.cp-executive-page .spend-bar-fill.blue,
.cp-executive-page .rec-driver-fill {
  background-color: var(--cp-color-primary);
  background-image: none;
}

.cp-executive-page .spend-bar-fill.yellow {
  background-color: var(--cp-color-warning);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.26) 0 3px,
    transparent 3px 7px
  );
}

.cp-executive-page .source-dot.yellow {
  border-radius: 1px;
  transform: rotate(45deg);
}

.cp-executive-page .source-dot.red {
  border-radius: 1px;
  outline: 2px solid var(--cp-color-danger);
  outline-offset: 2px;
}

.cp-executive-page .source-fill.yellow {
  background-color: var(--cp-color-warning);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.28) 0 3px,
    transparent 3px 7px
  );
}

.cp-executive-page .source-fill.red {
  background-color: var(--cp-color-danger);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.34) 0 2px,
    transparent 2px 5px
  );
}

.cp-executive-page .savings-mix-swatch {
  border-radius: 50%;
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 1px;
}

.cp-executive-page .savings-mix-swatch.pruning {
  border-radius: 1px;
}

.cp-executive-page .savings-mix-swatch.throttle {
  border-radius: 1px;
  transform: rotate(45deg);
}

.cp-executive-page .savings-mix-swatch.blocked {
  border-radius: 1px;
  outline-style: double;
  outline-width: 3px;
}

.cp-executive-page .budget-gauge-track {
  background:
    repeating-linear-gradient(135deg, transparent 0 5px, rgba(0, 0, 0, 0.25) 5px 7px),
    linear-gradient(
      90deg,
      var(--cp-color-positive) 0 70%,
      var(--cp-color-warning) 70% 90%,
      var(--cp-color-danger) 90% 100%
    );
}

/* Executive glance: the visible scorecard. Legacy dashboard sections remain in
   the DOM so their established calculations and drill-downs stay available. */
.cp-executive-page .hero-row,
.cp-executive-page #execCustomizeBar,
.cp-executive-page #execLayoutZone {
  display: none !important;
}

.cp-executive-page .exec-action-strip.clear {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-block: 10px;
}

.cp-executive-page .exec-action-strip.clear .exec-action-grid {
  display: none;
}

.cp-executive-page .exec-action-strip.clear .exec-action-title {
  font-size: 12px;
}

.cp-executive-page .exec-action-head-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.cp-executive-page .exec-action-review-btn {
  background: transparent;
  border: 1px solid var(--cp-color-danger);
  border-radius: 999px;
  color: var(--cp-color-danger);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .045em;
  min-height: 30px;
  padding: 0 11px;
}

.cp-executive-page .exec-action-review-btn:hover {
  background: rgba(248, 81, 73, .1);
}

.cp-executive-page .exec-action-review-btn:disabled {
  cursor: wait;
  opacity: .6;
}

.cp-executive-page .exec-action-review-btn[hidden] {
  display: none;
}

.cp-executive-page .exec-footer {
  justify-content: flex-end;
}

.cp-executive-page .exec-footer .footer-stats {
  display: none;
}

.cp-executive-page .exec-glance {
  display: grid;
  gap: 14px;
}

.cp-executive-page .exec-glance-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cp-executive-page .exec-glance-kpi,
.cp-executive-page .exec-glance-panel {
  background: var(--cp-color-surface-1);
  border: 1px solid var(--cp-color-border);
  border-radius: var(--cp-radius-md);
  box-shadow: none;
}

.cp-executive-page .exec-glance-kpi {
  min-width: 0;
  padding: 14px 15px;
}

.cp-executive-page .exec-glance-kpi.positive {
  border-top: 3px solid var(--cp-color-positive);
}

.cp-executive-page .exec-glance-kpi.optimization {
  border-top: 3px solid var(--cp-color-primary);
}

.cp-executive-page .exec-glance-kpi.warning {
  border-top: 3px dashed var(--cp-color-warning);
}

.cp-executive-page .exec-glance-kpi.critical {
  border: 3px double var(--cp-color-danger);
}

.cp-executive-page .exec-glance-kpi-label {
  color: var(--cp-color-text-secondary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.cp-executive-page .exec-glance-kpi-value {
  color: var(--cp-color-text);
  font-family: var(--cp-font-mono);
  font-size: clamp(22px, 2vw, 29px);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-executive-page .exec-glance-kpi.positive .exec-glance-kpi-value {
  color: var(--cp-color-positive);
}

.cp-executive-page .exec-glance-kpi.optimization .exec-glance-kpi-value {
  color: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-kpi-sub {
  color: var(--cp-color-text-muted);
  font-size: 9px;
  line-height: 1.35;
  margin-top: 7px;
  min-height: 24px;
}

.cp-executive-page .exec-glance-budget-track,
.cp-executive-page .exec-glance-pruning-track {
  background: var(--cp-color-surface-2);
  border-radius: 99px;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
}

.cp-executive-page .exec-glance-budget-track > div,
.cp-executive-page .exec-glance-pruning-track > div {
  background: var(--cp-color-positive);
  height: 100%;
  transition: width .25s ease;
  width: 0;
}

.cp-executive-page .exec-glance-pruning-track > div {
  background: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-primary,
.cp-executive-page .exec-glance-breakdowns {
  display: grid;
  gap: 14px;
}

.cp-executive-page .exec-glance-primary {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr);
}

.cp-executive-page .exec-glance-breakdowns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cp-executive-page .exec-glance-panel {
  min-width: 0;
  padding: 16px 18px;
}

.cp-executive-page .exec-glance-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cp-executive-page .exec-glance-panel h2 {
  color: var(--cp-color-text);
  font-size: 13px;
  margin: 0 0 4px;
}

.cp-executive-page .exec-glance-panel p {
  color: var(--cp-color-text-muted);
  font-size: 9px;
  line-height: 1.4;
  margin: 0;
}

.cp-executive-page .exec-glance-panel-head > a {
  color: var(--cp-color-primary);
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.cp-executive-page .exec-glance-chart-wrap {
  height: 238px;
  position: relative;
}

.cp-executive-page .exec-glance-chart-legend {
  align-items: center;
  color: var(--cp-color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 8px;
  gap: 10px;
}

.cp-executive-page .exec-glance-chart-legend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.cp-executive-page .exec-glance-chart-legend i {
  display: inline-block;
  height: 7px;
  width: 14px;
}

.cp-executive-page .exec-glance-chart-legend i.actual {
  background: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-chart-legend i.baseline {
  border-top: 2px dashed var(--cp-color-text-secondary);
}

.cp-executive-page .exec-glance-donut-wrap {
  height: 150px;
  margin: 0 auto 9px;
  max-width: 210px;
  position: relative;
}

.cp-executive-page .exec-glance-donut-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
}

.cp-executive-page .exec-glance-donut-center strong {
  color: var(--cp-color-text);
  font-family: var(--cp-font-mono);
  font-size: 17px;
}

.cp-executive-page .exec-glance-donut-center span {
  color: var(--cp-color-text-muted);
  font-size: 8px;
}

.cp-executive-page .exec-glance-savings-list {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cp-executive-page .exec-glance-savings-row {
  align-items: center;
  color: var(--cp-color-text-secondary);
  display: grid;
  font-size: 8px;
  gap: 5px;
  grid-template-columns: 7px minmax(0, 1fr) auto;
}

.cp-executive-page .exec-glance-savings-row i {
  background: var(--swatch);
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.cp-executive-page .exec-glance-savings-row.pruning i {
  border-radius: 1px;
}

.cp-executive-page .exec-glance-savings-row.budget i {
  border-radius: 1px;
  transform: rotate(45deg);
}

.cp-executive-page .exec-glance-savings-row.blocked i {
  border-radius: 1px;
  outline: 1px double var(--cp-color-danger);
}

.cp-executive-page .exec-glance-savings-row strong {
  color: var(--cp-color-text);
  font-family: var(--cp-font-mono);
  font-weight: 700;
}

.cp-executive-page .exec-glance-model-bars,
.cp-executive-page .exec-glance-concentration {
  display: grid;
  gap: 11px;
}
.cp-executive-page .exec-glance-context-link {
  color: inherit;
  display: block;
  text-decoration: none;
}
.cp-executive-page .exec-glance-context-link:hover strong {
  color: var(--cp-color-primary);
}
.cp-executive-page .exec-glance-attribution {
  align-items: center;
  border-top: 1px solid var(--cp-color-border);
  color: var(--cp-color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 8px;
  gap: 8px 14px;
  margin-top: 13px;
  padding-top: 11px;
}
.cp-executive-page .exec-glance-attribution strong {
  color: var(--cp-color-text);
  font-family: var(--cp-font-mono);
}
.cp-executive-page .exec-glance-attribution a {
  color: var(--cp-color-primary);
  margin-left: auto;
  text-decoration: none;
}

.cp-executive-page .exec-glance-accountability-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-executive-page .exec-glance-accountability-card {
  background: var(--cp-color-surface-2);
  border: 1px solid var(--cp-color-border);
  border-radius: var(--cp-radius-sm);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
}

.cp-executive-page .exec-glance-accountability-card > span {
  color: var(--cp-color-text-secondary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.cp-executive-page .exec-glance-accountability-card > strong {
  color: var(--cp-color-text);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-executive-page .exec-glance-accountability-card > b {
  color: var(--cp-color-primary);
  font-family: var(--cp-font-mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.cp-executive-page .exec-glance-accountability-card > small,
.cp-executive-page .exec-glance-accountability-note {
  color: var(--cp-color-text-muted);
  font-size: 8px;
  line-height: 1.4;
}

.cp-executive-page .exec-glance-accountability-card.empty > b {
  display: none;
}

.cp-executive-page .exec-glance-accountability-note {
  border-top: 1px solid var(--cp-color-border);
  margin-top: 12px;
  padding-top: 10px;
}

.cp-executive-page .exec-glance-panel-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cp-executive-page .exec-glance-model-insight {
  background: rgba(88, 166, 255, .06);
  border: 1px solid rgba(88, 166, 255, .22);
  border-radius: 6px;
  color: var(--cp-color-text-secondary);
  font-size: 8px;
  line-height: 1.45;
  margin-bottom: 11px;
  padding: 7px 9px;
}
.cp-executive-page .exec-glance-model-insight strong { color: var(--cp-color-text); }

.cp-executive-page .exec-glance-bar-meta {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 5px;
}

.cp-executive-page .exec-glance-bar-meta strong {
  color: var(--cp-color-text);
  font-size: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-executive-page .exec-glance-bar-meta span {
  color: var(--cp-color-text);
  font-family: var(--cp-font-mono);
  font-size: 9px;
}

.cp-executive-page .exec-glance-bar-track {
  background: var(--cp-color-surface-2);
  border-radius: 3px;
  display: flex;
  height: 8px;
  overflow: hidden;
}

.cp-executive-page .exec-glance-bar-input {
  background: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-bar-output {
  background: var(--cp-color-warning);
}

.cp-executive-page .exec-glance-bar-unknown {
  background: var(--cp-color-text-muted);
}
.cp-executive-page .exec-glance-bar-metric {
  background: var(--cp-color-primary);
  height: 100%;
}
.cp-executive-page .exec-glance-bar-metric.average {
  background: var(--cp-color-warning);
}

.cp-executive-page .exec-glance-bar-caption {
  color: var(--cp-color-text-muted);
  display: flex;
  font-size: 8px;
  gap: 9px;
  margin-top: 4px;
}

.cp-executive-page .exec-glance-bar-caption .input::before,
.cp-executive-page .exec-glance-bar-caption .output::before {
  content: "";
  display: inline-block;
  height: 5px;
  margin-right: 4px;
  width: 5px;
}

.cp-executive-page .exec-glance-bar-caption .input::before {
  background: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-bar-caption .output::before {
  background: var(--cp-color-warning);
}

.cp-executive-page .exec-glance-concentration .exec-glance-bar-track > div {
  background: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-switch {
  background: var(--cp-color-surface-2);
  border: 1px solid var(--cp-color-border);
  border-radius: var(--cp-radius-sm);
  display: flex;
  padding: 2px;
}

.cp-executive-page .exec-glance-switch button {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--cp-color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  padding: 5px 7px;
}

.cp-executive-page .exec-glance-switch button.active {
  background: rgba(76, 154, 255, .12);
  color: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-table-wrap {
  overflow-x: auto;
}

.cp-executive-page .exec-glance-table-wrap table {
  width: 100%;
}

.cp-executive-page .exec-glance-table-wrap th,
.cp-executive-page .exec-glance-table-wrap td {
  border-bottom: 1px solid var(--cp-color-border);
  padding: 9px 10px;
  text-align: left;
}

.cp-executive-page .exec-glance-table-wrap th {
  font-size: 8px;
}

.cp-executive-page .exec-glance-table-wrap td {
  color: var(--cp-color-text-secondary);
  font-size: 9px;
}

.cp-executive-page .exec-glance-table-wrap td:first-child {
  color: var(--cp-color-text);
  font-weight: 750;
}

.cp-executive-page .exec-glance-table-wrap td:nth-child(n+3):nth-child(-n+5) {
  font-family: var(--cp-font-mono);
}

.cp-executive-page .exec-glance-signal {
  border: 1px solid var(--cp-color-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 7px;
  white-space: nowrap;
}

.cp-executive-page .exec-glance-signal.watch {
  border-style: dashed;
  color: var(--cp-color-warning);
}

.cp-executive-page .exec-glance-empty {
  color: var(--cp-color-text-muted);
  font-size: 9px;
  padding: 20px 0;
}

@media (max-width: 1100px) {
  .cp-executive-page .exec-glance-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-executive-page .exec-glance-primary,
  .cp-executive-page .exec-glance-breakdowns {
    grid-template-columns: 1fr;
  }

  .cp-executive-page .exec-glance-accountability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .cp-executive-page .exec-glance-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-executive-page .exec-glance-panel-head {
    flex-direction: column;
  }

  .cp-executive-page .exec-glance-savings-list {
    grid-template-columns: 1fr;
  }

  .cp-executive-page .exec-glance-accountability-grid {
    grid-template-columns: 1fr;
  }
}

/* Manual chart legend mirrors the actual line and point styles. */
.cp-executive-page .chart-legend-dot.baseline {
  width: 20px;
  height: 8px;
  border-radius: 0;
  background: transparent;
  border-top: 2px dashed var(--cp-color-text-secondary);
  position: relative;
}

.cp-executive-page .chart-legend-dot.baseline::after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 8px;
  top: -4px;
  background: var(--cp-color-text-secondary);
  transform: rotate(45deg);
}

.cp-executive-page .chart-legend-dot.actual {
  width: 20px;
  height: 8px;
  border-radius: 0;
  background: transparent;
  border-top: 3px solid var(--cp-color-positive);
  position: relative;
}

.cp-executive-page .chart-legend-dot.actual::after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  left: 7px;
  top: -5px;
  border-radius: 50%;
  background: var(--cp-color-positive);
}

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

@media (max-width: 1180px) and (min-width: 768px) {
  .cp-executive-page .exec-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-executive-page .exec-header-right {
    width: 100%;
    padding-bottom: 2px;
  }

  .cp-executive-page .exec-filter-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

/* Tabler executive pilot
   Tabler supplies the component foundation; this scoped layer preserves
   CostPilot's identity and adds color-vision-safe states. */
html.cp-executive-theme {
  /* Matched to the rest of the site's dark palette (styles.css/tokens.css,
     both remapped to the Cockpit's shadcn ".dark" theme) instead of this
     page's own previously-independent light palette. Accent colors reuse
     the exact same values styles.css already uses (--accent/--accent-green/
     etc.) rather than inventing new ones, since those were already tuned
     for contrast against this same near-black background elsewhere. */
  --cp-color-canvas: #0a0a0a;
  --cp-color-surface-1: var(--cp-color-surface-1);
  --cp-color-surface-2: var(--cp-color-surface-1);
  --cp-color-surface-raised: #262626;
  --cp-color-border: rgba(255, 255, 255, 0.1);
  --cp-color-border-strong: rgba(255, 255, 255, 0.15);
  --cp-color-text: #fafafa;
  --cp-color-text-secondary: #d4d4d4;
  --cp-color-text-muted: #a3a3a3;
  --cp-color-primary: #58a6ff;
  --cp-color-positive: #3fb950;
  --cp-color-warning: #d29922;
  --cp-color-danger: #f85149;
  --cp-color-info: #bc8cff;
  --cp-shadow-focus: 0 0 0 3px rgba(88, 166, 255, 0.25);
  --cp-shadow-raised: 0 10px 28px rgba(0, 0, 0, 0.5);
  --tblr-body-bg: var(--cp-color-canvas);
  --tblr-bg-surface: var(--cp-color-surface-1);
  --tblr-bg-surface-secondary: var(--cp-color-surface-2);
  --tblr-body-color: var(--cp-color-text);
  --tblr-secondary-color: var(--cp-color-text-secondary);
  --tblr-border-color: var(--cp-color-border);
  --tblr-primary: var(--cp-color-primary);

  /* The block above only covered the ~7 Tabler variables this file
     originally touched. Tabler's OWN [data-bs-theme=dark] rule (loaded
     first, in vendor/tabler/tabler.min.css) sets ~40 --tblr-* variables
     to its default blue-slate palette (--tblr-body-bg:#111827 etc.) --
     since this selector (html.cp-executive-theme) has higher specificity
     than Tabler's bare attribute selector, these overrides win regardless
     of load order, but ONLY for variables actually listed here. Every one
     Tabler sets that isn't overridden below still renders Tabler's blue
     default, which is exactly what caused the reported "light grey and
     dark blue" mixed look -- most of the page's borders, subtle
     backgrounds, and link/emphasis colors were still Tabler's own. */
  --tblr-emphasis-color: var(--cp-color-text);
  --tblr-tertiary-color: var(--cp-color-text-muted);
  --tblr-tertiary-bg: var(--cp-color-surface-raised);
  --tblr-primary-text-emphasis: var(--cp-color-primary);
  --tblr-secondary-text-emphasis: var(--cp-color-text-secondary);
  --tblr-success-text-emphasis: var(--cp-color-positive);
  --tblr-info-text-emphasis: var(--cp-color-info);
  --tblr-warning-text-emphasis: var(--cp-color-warning);
  --tblr-danger-text-emphasis: var(--cp-color-danger);
  --tblr-light-text-emphasis: var(--cp-color-text);
  --tblr-dark-text-emphasis: var(--cp-color-text-secondary);
  --tblr-primary-bg-subtle: rgba(88, 166, 255, 0.12);
  --tblr-secondary-bg-subtle: var(--cp-color-surface-2);
  --tblr-success-bg-subtle: rgba(63, 185, 80, 0.12);
  --tblr-info-bg-subtle: rgba(188, 140, 255, 0.12);
  --tblr-warning-bg-subtle: rgba(210, 153, 34, 0.12);
  --tblr-danger-bg-subtle: rgba(248, 81, 73, 0.12);
  --tblr-light-bg-subtle: var(--cp-color-surface-1);
  --tblr-dark-bg-subtle: var(--cp-color-canvas);
  --tblr-primary-border-subtle: rgba(88, 166, 255, 0.35);
  --tblr-secondary-border-subtle: var(--cp-color-border-strong);
  --tblr-success-border-subtle: rgba(63, 185, 80, 0.35);
  --tblr-info-border-subtle: rgba(188, 140, 255, 0.35);
  --tblr-warning-border-subtle: rgba(210, 153, 34, 0.35);
  --tblr-danger-border-subtle: rgba(248, 81, 73, 0.35);
  --tblr-light-border-subtle: var(--cp-color-border);
  --tblr-dark-border-subtle: var(--cp-color-border);
  --tblr-border-color-translucent: rgba(255, 255, 255, 0.1);
  --tblr-link-color: var(--cp-color-primary);
  --tblr-link-hover-color: var(--cp-color-primary);
  --tblr-highlight-color: var(--cp-color-text);
  --tblr-highlight-bg: rgba(210, 153, 34, 0.2);
  --tblr-form-valid-color: var(--cp-color-positive);
  --tblr-form-valid-border-color: var(--cp-color-positive);
  --tblr-form-invalid-color: var(--cp-color-danger);
  --tblr-form-invalid-border-color: var(--cp-color-danger);
  color-scheme: dark;
}

.cp-executive-page {
  color: var(--cp-color-text);
  background:
    linear-gradient(180deg, rgba(88, 166, 255, 0.035), transparent 260px),
    var(--cp-color-canvas);
}

.cp-executive-page .exec-header {
  background: #132238;
  border-bottom: 0;
  box-shadow: 0 2px 10px rgba(13, 27, 45, 0.2);
}

.cp-executive-page .exec-header,
.cp-executive-page .exec-header .nav-link,
.cp-executive-page .exec-header #statusLabel {
  color: #dce5f0;
}

.cp-executive-page .exec-header .nav-link:hover,
.cp-executive-page .exec-header .nav-link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.cp-executive-page .exec-tagline {
  color: #aebfd2;
}

.cp-executive-page .exec-body {
  padding-top: clamp(22px, 2.4vw, 38px);
}

.cp-executive-page .cp-exec-page-heading {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.cp-executive-page .cp-exec-page-heading .page-pretitle {
  color: var(--cp-color-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.cp-executive-page .cp-exec-page-heading .page-title {
  color: var(--cp-color-text);
  font-size: clamp(25px, 2.4vw, 36px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0;
}

.cp-executive-page .cp-exec-page-summary {
  color: var(--cp-color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 7px 0 0;
  max-width: 720px;
}

.cp-executive-page .cp-exec-page-meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  min-width: 170px;
}

.cp-executive-page .cp-exec-meta-label {
  color: var(--cp-color-text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cp-executive-page .cp-exec-page-meta strong {
  color: var(--cp-color-text-secondary);
  font-size: 11px;
  margin-top: 4px;
}

.cp-executive-page .card,
.cp-executive-page .exec-filter-card,
.cp-executive-page .exec-action-strip,
.cp-executive-page .exec-glance-kpi,
.cp-executive-page .exec-glance-panel {
  background: var(--cp-color-surface-1);
  border-color: var(--cp-color-border);
  box-shadow: 0 1px 2px rgba(24, 36, 51, 0.03);
}

.cp-executive-page .exec-filter-card {
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 18px;
}

.cp-executive-page .exec-filter-title {
  color: var(--cp-color-text);
  font-size: 11px;
}

.cp-executive-page .exec-filter-status {
  color: var(--cp-color-text-secondary);
}

.cp-executive-page .exec-filter-grid {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.cp-executive-page .exec-filter,
.cp-executive-page .exec-filter-clear {
  background-color: #ffffff;
  border-color: var(--cp-color-border);
  color: var(--cp-color-text);
  min-height: 38px;
}

.cp-executive-page .exec-filter-clear {
  grid-column: 1 / span 2;
  justify-content: center;
}

.cp-executive-page .exec-filter-scope {
  background: #edf6ff;
  border-color: #8ab5ec;
  color: #274a73;
}

.cp-executive-page .exec-filter-scope strong,
.cp-executive-page .exec-filter-scope button {
  color: #174f91;
}

.cp-executive-page .exec-action-strip {
  border-left: 4px solid var(--cp-color-primary);
  border-radius: 10px;
  box-shadow: var(--cp-shadow-raised);
  margin-bottom: 18px;
  padding: 18px;
}

.cp-executive-page .exec-action-strip.warning {
  border: 1px dashed var(--cp-color-warning);
  border-left: 5px dashed var(--cp-color-warning);
}

.cp-executive-page .exec-action-strip.danger {
  border: 3px double var(--cp-color-danger);
  border-left-width: 7px;
}

.cp-executive-page .exec-action-card {
  background: var(--cp-color-surface-2);
  color: var(--cp-color-text);
}

.cp-executive-page .exec-action-title,
.cp-executive-page .exec-action-value {
  color: var(--cp-color-text);
}

.cp-executive-page .exec-action-sub {
  color: var(--cp-color-text-secondary);
}

.cp-executive-page .exec-action-badge {
  background: #ffffff;
}

.cp-executive-page .exec-glance {
  gap: 18px;
}

.cp-executive-page .exec-glance-kpis {
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-executive-page .exec-glance-kpi {
  border-radius: 10px;
  min-height: 132px;
  padding: 18px;
}

.cp-executive-page .exec-glance-kpi::before {
  color: var(--cp-color-text-muted);
  content: "Metric";
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  position: absolute;
  right: 16px;
  text-transform: uppercase;
  top: 16px;
}

.cp-executive-page .exec-glance-kpi {
  position: relative;
}

.cp-executive-page .exec-glance-kpi.positive::before {
  content: "Savings";
}

.cp-executive-page .exec-glance-kpi.optimization::before {
  content: "Optimization";
}

.cp-executive-page .exec-glance-kpi.warning::before {
  content: "Watch";
}

.cp-executive-page .exec-glance-kpi.critical::before {
  content: "Action";
}

.cp-executive-page .exec-glance-kpi-label {
  color: var(--cp-color-text-secondary);
  font-size: 10px;
  padding-right: 64px;
}

.cp-executive-page .exec-glance-kpi-value {
  color: var(--cp-color-text);
  font-family: var(--cp-font-sans);
  font-size: clamp(26px, 2.1vw, 34px);
  font-weight: 750;
}

.cp-executive-page .exec-glance-kpi-sub {
  color: var(--cp-color-text-secondary);
  font-size: 10px;
}

.cp-executive-page .exec-glance-budget-track,
.cp-executive-page .exec-glance-pruning-track {
  background: #e8edf3;
  height: 6px;
}

.cp-executive-page .exec-glance-kpi.warning .exec-glance-budget-track > div {
  background-color: var(--cp-color-warning);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0 3px,
    transparent 3px 7px
  );
}

.cp-executive-page .exec-glance-kpi.critical .exec-glance-budget-track > div {
  background-color: var(--cp-color-danger);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.5) 0 2px,
    transparent 2px 5px
  );
}

.cp-executive-page .exec-glance-primary,
.cp-executive-page .exec-glance-breakdowns {
  gap: 18px;
}

.cp-executive-page .exec-glance-panel {
  border-radius: 10px;
  padding: 22px;
}

.cp-executive-page .exec-glance-panel h2 {
  color: var(--cp-color-text);
  font-size: 15px;
  font-weight: 700;
}

.cp-executive-page .exec-glance-panel p,
.cp-executive-page .exec-glance-table-wrap td,
.cp-executive-page .exec-glance-empty {
  color: var(--cp-color-text-secondary);
  font-size: 10px;
}

.cp-executive-page .exec-glance-panel-head > a {
  color: var(--cp-color-primary);
  font-size: 10px;
}

.cp-executive-page .exec-glance-switch {
  background: var(--cp-color-surface-2);
  border-color: var(--cp-color-border);
}

.cp-executive-page .exec-glance-switch button {
  color: var(--cp-color-text-secondary);
  font-size: 9px;
}

.cp-executive-page .exec-glance-switch button.active {
  background: #dbeafe;
  color: #174f91;
}

.cp-executive-page .exec-glance-model-insight {
  background: #eef6ff;
  border-color: #9abce5;
  color: #274a73;
}

.cp-executive-page .exec-glance-table-wrap {
  border: 1px solid var(--cp-color-border);
  border-radius: 8px;
}

.cp-executive-page .exec-glance-table-wrap th {
  background: var(--cp-color-surface-2);
  color: var(--cp-color-text-secondary);
  font-size: 9px;
}

.cp-executive-page .exec-glance-table-wrap td {
  background: #ffffff;
  font-size: 10px;
}

.cp-executive-page tbody tr:hover td {
  background: #f0f6ff;
}

.cp-executive-page .exec-glance-signal {
  background: #ffffff;
}

.cp-executive-page .exec-footer {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -2px 10px rgba(24, 36, 51, 0.06);
}

@media (max-width: 1180px) {
  .cp-executive-page .exec-glance-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cp-executive-page .cp-exec-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-executive-page .cp-exec-page-meta {
    align-items: flex-start;
  }

  .cp-executive-page .exec-filter-grid,
  .cp-executive-page .exec-glance-kpis {
    grid-template-columns: 1fr;
  }

  .cp-executive-page .exec-filter-clear {
    grid-column: auto;
  }
}

/* Executive story layout: intentionally varied components rather than a
   uniform wall of cards. */
.cp-executive-page .exec-evidence {
  border: 1px solid var(--cp-color-border);
  border-radius: 12px;
  background: var(--cp-color-surface-1);
  margin-top: 24px;
  overflow: clip;
}

.cp-executive-page .exec-evidence-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  list-style: none;
  min-height: 76px;
  padding: 18px 22px;
  transition: background-color var(--cp-transition-fast);
}

.cp-executive-page .exec-evidence-summary::-webkit-details-marker {
  display: none;
}

.cp-executive-page .exec-evidence-summary:hover {
  background: var(--cp-color-surface-2);
}

.cp-executive-page .exec-evidence-summary strong,
.cp-executive-page .exec-evidence-summary small {
  display: block;
}

.cp-executive-page .exec-evidence-summary strong {
  color: var(--cp-color-text);
  font-size: 14px;
}

.cp-executive-page .exec-evidence-summary small {
  color: var(--cp-color-text-secondary);
  font-size: 11px;
  margin-top: 4px;
}

.cp-executive-page .exec-evidence-action {
  color: var(--cp-color-primary);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.cp-executive-page .exec-evidence-action::after {
  content: "  ↓";
}

.cp-executive-page .exec-evidence[open] .exec-evidence-action::after {
  content: "  ↑";
}

.cp-executive-page .exec-evidence[open] .exec-evidence-summary {
  border-bottom: 1px solid var(--cp-color-border);
}

.cp-executive-page .exec-evidence-body {
  padding: 22px;
}

.cp-executive-page .exec-evidence-body > :first-child {
  margin-top: 0;
}

.cp-executive-page .exec-evidence-body > :last-child {
  margin-bottom: 0;
}

.cp-executive-page .exec-command-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, 0.72fr);
  margin-bottom: 18px;
}

.cp-executive-page .exec-command-grid .exec-action-strip {
  height: 100%;
  margin: 0;
}

.cp-executive-page .exec-budget-command {
  align-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(51, 149, 255, 0.14), transparent 170px),
    linear-gradient(145deg, #1b2938, #172433);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 270px;
  padding: 20px;
}

.cp-executive-page .exec-budget-command.warning {
  border-top: 4px dashed var(--cp-color-warning);
}

.cp-executive-page .exec-budget-command.critical {
  border: 3px double var(--cp-color-danger);
}

.cp-executive-page .exec-budget-command-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.cp-executive-page .exec-budget-command-head a {
  color: #7dbbff;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.cp-executive-page .exec-budget-command-status {
  color: var(--cp-color-text);
  font-size: 13px;
  font-weight: 750;
  margin-top: 4px;
}

.cp-executive-page .exec-budget-gauge {
  --budget-pct: 0deg;
  align-items: center;
  background: conic-gradient(
    var(--cp-color-positive) 0 var(--budget-pct),
    #2a3a4b var(--budget-pct) 360deg
  );
  border-radius: 50%;
  display: flex;
  height: 132px;
  justify-content: center;
  margin: 10px auto;
  position: relative;
  width: 132px;
}

.cp-executive-page .exec-budget-command.warning .exec-budget-gauge {
  background: conic-gradient(
    var(--cp-color-warning) 0 var(--budget-pct),
    #2a3a4b var(--budget-pct) 360deg
  );
}

.cp-executive-page .exec-budget-command.critical .exec-budget-gauge {
  background: conic-gradient(
    var(--cp-color-danger) 0 var(--budget-pct),
    #2a3a4b var(--budget-pct) 360deg
  );
}

.cp-executive-page .exec-budget-gauge::after {
  background: #182636;
  border: 1px solid var(--cp-color-border);
  border-radius: 50%;
  content: "";
  inset: 13px;
  position: absolute;
}

.cp-executive-page .exec-budget-gauge-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.cp-executive-page .exec-budget-gauge-inner strong {
  color: var(--cp-color-text);
  font-size: 28px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cp-executive-page .exec-budget-gauge-inner span {
  color: var(--cp-color-text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin-top: 6px;
  text-transform: uppercase;
}

.cp-executive-page .exec-budget-command > .exec-glance-kpi-sub {
  text-align: center;
}

.cp-executive-page .exec-budget-command > .exec-glance-budget-track {
  width: 100%;
}

.cp-executive-page .exec-glance-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Home summary: a simple decision layer above the detailed dashboard. */
.cp-executive-page .home-summary,
.cp-executive-page .home-insight-grid,
.cp-executive-page .home-lower-grid { margin-bottom: 18px; }
.cp-executive-page .home-section-heading,
.cp-executive-page .home-panel-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.cp-executive-page .home-section-heading { margin-bottom: 12px; }
.cp-executive-page .home-section-heading h2,
.cp-executive-page .home-panel-head h2 { color: var(--cp-color-text); font-size: 18px; margin: 2px 0 4px; }
.cp-executive-page .home-section-heading > span { color: var(--cp-color-text-secondary); font-size: 11px; padding-top: 8px; }
.cp-executive-page .home-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cp-executive-page .home-metric-card { appearance: none; background: #152230; border: 1px solid var(--cp-color-border); border-radius: 9px; color: inherit; cursor: pointer; display: block; min-height: 132px; padding: 18px; text-align: left; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.cp-executive-page .home-metric-card:hover,
.cp-executive-page .home-metric-card:focus-visible { border-color: var(--cp-color-primary); outline: none; transform: translateY(-1px); }
.cp-executive-page .home-metric-card.positive { border-top: 3px solid var(--cp-color-positive); }
.cp-executive-page .home-metric-card.attention.has-items { border-top: 3px solid var(--cp-color-warning); }
.cp-executive-page .home-metric-card > span { color: var(--cp-color-text-muted); display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; min-height: 30px; text-transform: uppercase; }
.cp-executive-page .home-metric-card strong { color: var(--cp-color-text); display: block; font-size: 28px; letter-spacing: -.03em; margin: 8px 0; }
.cp-executive-page .home-metric-card small { color: var(--cp-color-text-secondary); font-size: 10px; }
.cp-executive-page .home-insight-grid,
.cp-executive-page .home-lower-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); }
.cp-executive-page .home-panel { background: #111d29; border-radius: 9px; padding: 18px; }
.cp-executive-page .home-panel-head { border-bottom: 1px solid var(--cp-color-border); margin-bottom: 14px; padding-bottom: 12px; }
.cp-executive-page .home-panel-head p { color: var(--cp-color-text-secondary); font-size: 11px; margin: 0; }
.cp-executive-page .home-panel-head a { color: var(--cp-color-primary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.cp-executive-page .home-panel-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cp-executive-page .home-panel-actions button { background: #17293a; border: 1px solid #31506d; border-radius: 7px; color: #79baff; cursor: pointer; font-size: 10px; font-weight: 800; padding: 8px 10px; white-space: nowrap; }
.cp-executive-page .home-panel-actions button:hover,
.cp-executive-page .home-panel-actions button:focus-visible { background: #1d3852; border-color: var(--cp-color-primary); outline: none; }
.cp-executive-page .home-panel-actions button:disabled { cursor: default; opacity: .45; }
.cp-executive-page .home-spend-answer { color: var(--cp-color-text); font-size: 15px; font-weight: 700; line-height: 1.45; margin-bottom: 12px; }
.cp-executive-page .home-insight-footer { align-items: center; border-top: 1px solid var(--cp-color-border); display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; }
.cp-executive-page .home-insight-footer span { color: var(--cp-color-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cp-executive-page .home-insight-footer a { color: var(--cp-color-primary); font-size: 10px; font-weight: 700; }
.cp-executive-page .home-driver-list,
.cp-executive-page .home-attention-list,
.cp-executive-page .home-risk-list,
.cp-executive-page .home-top-list { display: grid; gap: 8px; }
.cp-executive-page .home-list-row { align-items: center; background: #14212f; border: 1px solid transparent; border-radius: 7px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
.cp-executive-page .home-list-row strong { color: var(--cp-color-text); display: block; font-size: 12px; }
.cp-executive-page .home-list-row span,
.cp-executive-page .home-list-row small { color: var(--cp-color-text-secondary); display: block; font-size: 10px; margin-top: 2px; }
.cp-executive-page .home-list-row b { color: var(--cp-color-text); font-size: 12px; text-align: right; }
.cp-executive-page .home-list-row.warning { border-left: 3px solid var(--cp-color-warning); }
.cp-executive-page .home-list-row.danger { border-left: 3px solid var(--cp-color-danger); }
.cp-executive-page .home-tabs { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; }
.cp-executive-page .home-tabs button { background: transparent; border: 1px solid var(--cp-color-border); color: var(--cp-color-text-secondary); cursor: pointer; font-size: 10px; font-weight: 800; padding: 7px 10px; }
.cp-executive-page .home-tabs button.active { background: #1d3852; color: #79baff; }
.cp-executive-page .home-side-stack { display: grid; gap: 14px; }
.cp-executive-page .home-empty { color: var(--cp-color-text-secondary); font-size: 11px; padding: 14px 4px; }
.cp-executive-page .home-connection-status { align-items: center; display: flex; gap: 12px; }
.cp-executive-page .home-connection-status i { background: var(--cp-color-warning); border-radius: 50%; height: 12px; width: 12px; }
.cp-executive-page .home-connection-status i.online { background: var(--cp-color-positive); }
.cp-executive-page .home-connection-status i.offline { background: var(--cp-color-danger); }
.cp-executive-page .home-connection-status strong,
.cp-executive-page .home-connection-status span { display: block; }
.cp-executive-page .home-connection-status strong { color: var(--cp-color-text); font-size: 13px; }
.cp-executive-page .home-connection-status span { color: var(--cp-color-text-secondary); font-size: 10px; margin-top: 3px; }

@media (max-width: 1180px) {
  .cp-executive-page .home-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .cp-executive-page .home-metric-grid,
  .cp-executive-page .home-insight-grid,
  .cp-executive-page .home-lower-grid { grid-template-columns: 1fr; }
}

.cp-executive-page .exec-glance-kpi {
  min-height: 160px;
}

.cp-executive-page .exec-scope-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-executive-page .exec-scope-stat {
  align-items: center;
  background: #152230;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  min-height: 82px;
  padding: 14px 16px;
}

.cp-executive-page .exec-scope-stat .exec-glance-kpi-icon {
  flex: 0 0 30px;
  margin: 0;
}

.cp-executive-page .exec-scope-stat strong {
  color: var(--cp-color-text);
  display: block;
  font-size: 20px;
  line-height: 1.1;
  margin: 4px 0 3px;
}

.cp-executive-page .exec-scope-stat.warning {
  border-top: 3px dashed var(--cp-color-warning);
}

.cp-executive-page .exec-scope-stat.critical {
  border: 3px double var(--cp-color-danger);
}

.cp-executive-page .exec-change-panel {
  padding-bottom: 18px;
}

.cp-executive-page .exec-change-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.cp-executive-page .exec-change-grid article {
  background: #14212f;
  border-left: 2px solid #33475c;
  min-height: 104px;
  padding: 18px;
}

.cp-executive-page .exec-change-grid article:first-child {
  border-left-color: var(--cp-color-primary);
}

.cp-executive-page .exec-change-grid span {
  color: var(--cp-color-text-muted);
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cp-executive-page .exec-change-grid strong {
  color: var(--cp-color-text);
  display: block;
  font-size: 24px;
  margin: 9px 0 6px;
}

.cp-executive-page .exec-change-grid strong.up {
  color: #79baff;
}

.cp-executive-page .exec-change-grid strong.up::before {
  content: "↑ ";
}

.cp-executive-page .exec-change-grid strong.down {
  color: #c0aaff;
}

.cp-executive-page .exec-change-grid strong.down::before {
  content: "↓ ";
}

.cp-executive-page .exec-change-grid small {
  color: var(--cp-color-text-secondary);
  display: block;
  font-size: 9px;
}

.cp-executive-page .exec-dimension-switch {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cp-executive-page .exec-glance-concentration .exec-glance-bar-row {
  background: #14212f;
  border: 1px solid transparent;
  border-radius: 7px;
  margin-bottom: 9px;
  padding: 10px 12px;
}

.cp-executive-page .exec-glance-concentration .exec-glance-bar-row:hover {
  border-color: var(--cp-color-border-strong);
}

@media (max-width: 1180px) {
  .cp-executive-page .exec-command-grid {
    grid-template-columns: 1fr;
  }

  .cp-executive-page .exec-budget-command {
    min-height: 230px;
  }

  .cp-executive-page .exec-scope-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cp-executive-page .exec-glance-kpis,
  .cp-executive-page .exec-scope-strip,
  .cp-executive-page .exec-change-grid {
    grid-template-columns: 1fr;
  }

  .cp-executive-page .exec-dimension-switch {
    justify-content: flex-start;
  }
}

/* Tabler command-center composition
   Keeps the existing dashboard data contract while giving the executive view
   the hierarchy and density of a purpose-built analytics product. */
html.cp-executive-theme {
  /* THIS is the block that actually wins -- a second, later
     html.cp-executive-theme rule with identical specificity to the one
     near the top of this file, so cascade order (last rule wins) means
     THIS one was overriding every fix made there. Root cause of why
     earlier edits appeared to have no effect. Now matched to the same
     neutral dark palette as the rest of the site, with the same
     comprehensive --tblr-* coverage as the (now largely redundant, kept
     in sync anyway) first block. */
  --cp-color-canvas: #0a0a0a;
  --cp-color-surface-1: var(--cp-color-surface-1);
  --cp-color-surface-2: var(--cp-color-surface-1);
  --cp-color-surface-raised: #262626;
  --cp-color-border: rgba(255, 255, 255, 0.1);
  --cp-color-border-strong: rgba(255, 255, 255, 0.15);
  --cp-color-text: #fafafa;
  --cp-color-text-secondary: #d4d4d4;
  --cp-color-text-muted: #a3a3a3;
  --cp-color-primary: #58a6ff;
  --cp-color-positive: #3fb950;
  --cp-color-warning: #d29922;
  --cp-color-danger: #f85149;
  --cp-color-info: #bc8cff;
  --cp-shadow-focus: 0 0 0 3px rgba(88, 166, 255, 0.25);
  --cp-shadow-raised: 0 12px 30px rgba(0, 0, 0, 0.5);
  --tblr-body-bg: var(--cp-color-canvas);
  --tblr-bg-surface: var(--cp-color-surface-1);
  --tblr-bg-surface-secondary: var(--cp-color-surface-2);
  --tblr-body-color: var(--cp-color-text);
  --tblr-secondary-color: var(--cp-color-text-secondary);
  --tblr-border-color: var(--cp-color-border);
  --tblr-primary: var(--cp-color-primary);
  --tblr-emphasis-color: var(--cp-color-text);
  --tblr-tertiary-color: var(--cp-color-text-muted);
  --tblr-tertiary-bg: var(--cp-color-surface-raised);
  --tblr-border-color-translucent: rgba(255, 255, 255, 0.1);
  --tblr-link-color: var(--cp-color-primary);
  --tblr-link-hover-color: var(--cp-color-primary);
  color-scheme: dark;
}

.cp-executive-page {
  background:
    radial-gradient(circle at 50% -180px, rgba(88, 166, 255, 0.06), transparent 520px),
    var(--cp-color-canvas);
  color: var(--cp-color-text);
}

.cp-executive-page .exec-header {
  background: var(--cp-color-canvas);
  border-bottom: 1px solid var(--cp-color-border);
  box-shadow: none;
  min-height: 72px;
}

.cp-executive-page .exec-header,
.cp-executive-page .exec-header .nav-link,
.cp-executive-page .exec-header #statusLabel {
  color: var(--cp-color-text-secondary);
}

.cp-executive-page .exec-header .nav-link:hover,
.cp-executive-page .exec-header .nav-link:focus-visible {
  background: var(--cp-color-surface-raised);
  border-color: var(--cp-color-border-strong);
  color: #fff;
}

.cp-executive-page .cp-exec-subnav {
  background: var(--cp-color-canvas);
  border-bottom: 1px solid var(--cp-color-border);
  min-height: 48px;
}

.cp-executive-page .cp-exec-subnav-inner {
  align-items: stretch;
  display: flex;
  gap: 24px;
  margin: 0 auto;
  max-width: 1600px;
  overflow-x: auto;
  padding: 0 32px;
}

.cp-executive-page .cp-exec-subnav a {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--cp-color-text-muted);
  display: flex;
  font-size: 12px;
  font-weight: 650;
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
}

.cp-executive-page .cp-exec-subnav a:hover,
.cp-executive-page .cp-exec-subnav a:focus-visible,
.cp-executive-page .cp-exec-subnav a.active {
  border-bottom-color: var(--cp-color-primary);
  color: #fff;
}

.cp-executive-page .exec-body {
  margin: 0 auto;
  max-width: 1600px;
  padding: 30px 32px 80px;
  width: 100%;
}

.cp-executive-page .cp-exec-page-heading {
  align-items: center;
  margin-bottom: 22px;
}

.cp-executive-page .cp-exec-page-heading .page-pretitle {
  color: var(--cp-color-primary);
}

.cp-executive-page .cp-exec-page-heading .page-title,
.cp-executive-page .exec-action-title,
.cp-executive-page .exec-action-value,
.cp-executive-page .exec-glance-panel h2,
.cp-executive-page .exec-glance-kpi-value {
  color: var(--cp-color-text);
}

.cp-executive-page .cp-exec-page-summary,
.cp-executive-page .exec-action-sub,
.cp-executive-page .exec-glance-panel p,
.cp-executive-page .exec-glance-kpi-sub {
  color: var(--cp-color-text-secondary);
}

.cp-executive-page .cp-exec-page-meta {
  align-items: center;
  flex-direction: row;
  gap: 10px;
  min-width: auto;
}

.cp-executive-page .cp-exec-page-meta .btn {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 9px 14px;
}

.cp-executive-page .cp-exec-page-meta .btn-outline-secondary {
  background: var(--cp-color-surface-1);
  border-color: var(--cp-color-border-strong);
  color: var(--cp-color-text);
}

.cp-executive-page .cp-exec-page-meta .btn-primary {
  background: var(--cp-color-primary);
  border-color: var(--cp-color-primary);
  color: #07111d;
}

.cp-executive-page .card,
.cp-executive-page .exec-filter-card,
.cp-executive-page .exec-action-strip,
.cp-executive-page .exec-glance-kpi,
.cp-executive-page .exec-glance-panel {
  background: linear-gradient(145deg, var(--cp-color-surface-2), var(--cp-color-surface-1));
  border: 1px solid var(--cp-color-border);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.cp-executive-page .exec-filter-card {
  background: var(--cp-color-canvas);
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
}

.cp-executive-page .exec-filter-head {
  margin-bottom: 10px;
}

.cp-executive-page .exec-filter-title,
.cp-executive-page .exec-filter-status {
  color: var(--cp-color-text-muted);
}

.cp-executive-page .exec-filter,
.cp-executive-page .exec-filter-clear {
  background-color: var(--cp-color-surface-2);
  border-color: var(--cp-color-border);
  color: var(--cp-color-text);
}

.cp-executive-page .exec-filter:hover,
.cp-executive-page .exec-filter-clear:hover {
  background-color: #262626;
  border-color: var(--cp-color-border-strong);
}

.cp-executive-page .exec-filter-scope {
  background: rgba(88, 166, 255, 0.12);
  border-color: rgba(88, 166, 255, 0.35);
  color: var(--cp-color-text);
}

.cp-executive-page .exec-filter-scope strong,
.cp-executive-page .exec-filter-scope button {
  color: var(--cp-color-primary);
}

.cp-executive-page .exec-action-strip {
  background:
    radial-gradient(circle at 88% 0%, rgba(51, 149, 255, 0.15), transparent 330px),
    linear-gradient(145deg, var(--cp-color-surface-2), var(--cp-color-surface-1));
  border-left: 4px solid var(--cp-color-primary);
  border-radius: 9px;
  box-shadow: var(--cp-shadow-raised);
  margin-bottom: 18px;
  padding: 22px;
}

.cp-executive-page .exec-action-strip.clear {
  background:
    radial-gradient(circle at 88% 0%, rgba(63, 185, 80, 0.13), transparent 330px),
    linear-gradient(145deg, var(--cp-color-surface-2), var(--cp-color-surface-1));
}

.cp-executive-page .exec-action-strip.warning {
  background:
    radial-gradient(circle at 88% 0%, rgba(210, 153, 34, 0.13), transparent 330px),
    linear-gradient(145deg, var(--cp-color-surface-2), var(--cp-color-surface-1));
  border: 1px solid rgba(210, 153, 34, 0.3);
  border-left: 5px dashed var(--cp-color-warning);
}

.cp-executive-page .exec-action-strip.danger {
  background:
    radial-gradient(circle at 88% 0%, rgba(248, 81, 73, 0.14), transparent 330px),
    linear-gradient(145deg, var(--cp-color-surface-2), var(--cp-color-surface-1));
  border: 3px double rgba(248, 81, 73, 0.35);
  border-left-width: 7px;
}

.cp-executive-page .exec-action-card {
  background: var(--cp-color-surface-2);
  border-color: var(--cp-color-border);
  color: var(--cp-color-text);
}

.cp-executive-page .exec-action-badge {
  background: var(--cp-color-canvas);
}

.cp-executive-page .exec-glance {
  gap: 18px;
}

.cp-executive-page .exec-glance-kpis {
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-executive-page .exec-glance-kpi {
  border-radius: 8px;
  min-height: 148px;
  overflow: hidden;
  padding: 20px;
}

.cp-executive-page .exec-glance-kpi:nth-child(n + 5) {
  min-height: 118px;
}

.cp-executive-page .exec-glance-kpi::before {
  display: none;
}

.cp-executive-page .exec-glance-kpi-icon {
  align-items: center;
  background: rgba(88, 166, 255, 0.15);
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 6px;
  color: var(--cp-color-primary);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  margin-bottom: 18px;
  width: 30px;
}

.cp-executive-page .exec-glance-kpi.positive .exec-glance-kpi-icon {
  background: rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.35);
  color: var(--cp-color-positive);
}

.cp-executive-page .exec-glance-kpi.optimization .exec-glance-kpi-icon {
  background: rgba(188, 140, 255, 0.15);
  border-color: rgba(188, 140, 255, 0.35);
  color: var(--cp-color-info);
}

.cp-executive-page .exec-glance-kpi.warning .exec-glance-kpi-icon {
  background: rgba(210, 153, 34, 0.15);
  border-color: rgba(210, 153, 34, 0.35);
  color: var(--cp-color-warning);
}

.cp-executive-page .exec-glance-kpi.critical .exec-glance-kpi-icon {
  background: rgba(248, 81, 73, 0.15);
  border-color: rgba(248, 81, 73, 0.35);
  color: var(--cp-color-danger);
}

.cp-executive-page .exec-glance-kpi-label {
  color: var(--cp-color-text-muted);
  font-size: 9px;
  padding: 0;
}

.cp-executive-page .exec-glance-kpi-value {
  font-size: clamp(25px, 2vw, 33px);
}

.cp-executive-page .exec-glance-budget-track,
.cp-executive-page .exec-glance-pruning-track {
  background: var(--cp-color-surface-raised);
}

.cp-executive-page .exec-glance-primary {
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.75fr);
}

.cp-executive-page .exec-glance-breakdowns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cp-executive-page .exec-glance-primary,
.cp-executive-page .exec-glance-breakdowns {
  gap: 18px;
}

.cp-executive-page .exec-glance-panel {
  border-radius: 8px;
  padding: 22px;
}

.cp-executive-page .exec-glance-panel h2 {
  font-size: 15px;
}

.cp-executive-page .exec-glance-panel-head > a {
  color: var(--cp-color-primary);
}

.cp-executive-page .exec-glance-switch {
  background: var(--cp-color-canvas);
  border-color: var(--cp-color-border);
}

.cp-executive-page .exec-glance-switch button {
  color: var(--cp-color-text-muted);
}

.cp-executive-page .exec-glance-switch button.active {
  background: rgba(88, 166, 255, 0.2);
  color: #fff;
}

.cp-executive-page .exec-glance-model-insight {
  background: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.3);
  color: var(--cp-color-text);
}

.cp-executive-page .exec-glance-table-wrap {
  border-color: var(--cp-color-border);
}

.cp-executive-page .exec-glance-table-wrap th {
  background: var(--cp-color-canvas);
  color: var(--cp-color-text-muted);
}

.cp-executive-page .exec-glance-table-wrap td,
.cp-executive-page .exec-glance-signal {
  background: transparent;
  color: var(--cp-color-text-secondary);
}

.cp-executive-page tbody tr:hover td {
  background: var(--cp-color-surface-raised);
}

.cp-executive-page .exec-footer {
  background: var(--cp-color-surface-1);
  border-top: 1px solid var(--cp-color-border);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1180px) {
  .cp-executive-page .exec-glance-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cp-executive-page .exec-body {
    padding: 22px 16px 80px;
  }

  .cp-executive-page .cp-exec-subnav-inner {
    padding: 0 16px;
  }

  .cp-executive-page .cp-exec-page-meta {
    align-items: stretch;
    width: 100%;
  }

  .cp-executive-page .cp-exec-page-meta .btn {
    flex: 1;
  }

  .cp-executive-page .exec-glance-primary,
  .cp-executive-page .exec-glance-breakdowns,
  .cp-executive-page .exec-glance-kpis {
    grid-template-columns: 1fr;
  }
}