/*
 * Valoris Visual Closure RC26-28
 * Native CSS adaptation of the approved Design handoff.
 * Loaded last so the professional language reaches every active module.
 */

:root {
  --vc-real: #43e0b4;
  --vc-projected: #68a4ff;
  --vc-pending: #f6b94b;
  --vc-risk: #ff6474;
  --vc-restricted: #b58cff;
  --vc-line: color-mix(in srgb, var(--border) 78%, transparent);
  --vc-panel: color-mix(in srgb, var(--card) 94%, transparent);
}

.view.active > .page-header,
.view.active > .centro-header,
.opp-header {
  position: relative;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vc-line);
}

.view.active > .page-header::after,
.view.active > .centro-header::after,
.opp-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(140px, 32%);
  height: 2px;
  background: var(--vc-real);
}

.stat-card,
.centro-kpi,
.card {
  border-color: var(--vc-line);
  background: var(--vc-panel);
  box-shadow: 0 12px 32px rgb(0 0 0 / 10%);
}

.stat-card::before,
.centro-kpi::before {
  height: 2px;
}

.badge,
.status-badge,
.money-state {
  border-radius: 4px;
  border: 1px solid currentColor;
  font-weight: 700;
}

[data-money-state="real"],
.money-real {
  color: var(--vc-real);
}

[data-money-state="projected"],
.money-projected {
  color: var(--vc-projected);
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgb(104 164 255 / 12%) 5px 7px);
}

[data-money-state="pending"],
.money-pending {
  color: var(--vc-pending);
  background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgb(246 185 75 / 12%) 7px 9px);
}

[data-money-state="restricted"],
.money-restricted {
  color: var(--vc-restricted);
  background-image: radial-gradient(rgb(181 140 255 / 18%) 1px, transparent 1px);
  background-size: 7px 7px;
}

[data-money-state="risk"],
.money-risk {
  color: var(--vc-risk);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgb(255 100 116 / 13%) 5px 7px);
}

table {
  font-variant-numeric: tabular-nums;
}

table thead th {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}

.empty-state,
.loading-state,
.error-state {
  border: 1px dashed var(--vc-line);
  background: color-mix(in srgb, var(--card) 82%, transparent);
}

.btn-primary {
  box-shadow: 0 8px 18px rgb(67 224 180 / 16%);
}

.modal-content {
  border: 1px solid var(--vc-line);
  box-shadow: 0 24px 70px rgb(0 0 0 / 38%);
}

@media (max-width: 767px) {
  .view.active > .page-header,
  .view.active > .centro-header,
  .opp-header {
    padding-bottom: 12px;
  }

  .stat-card,
  .centro-kpi {
    min-height: 112px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .view.active {
    animation: vc-enter .2s ease-out;
  }
}

@keyframes vc-enter {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}