/* DataVia Visual Foundations v1
   Applies tokens to shared interface elements without changing application logic. */
html, body, button, input, select, textarea {
  font-family: var(--dv-font-family);
}

body {
  background: var(--dv-color-canvas);
  color: var(--dv-color-neutral-900);
  font-size: var(--dv-font-size-md);
  line-height: var(--dv-line-height-normal);
}

button, input, select, textarea {
  transition:
    border-color var(--dv-duration-fast) var(--dv-ease-standard),
    box-shadow var(--dv-duration-fast) var(--dv-ease-standard),
    background-color var(--dv-duration-fast) var(--dv-ease-standard),
    color var(--dv-duration-fast) var(--dv-ease-standard),
    transform var(--dv-duration-fast) var(--dv-ease-standard);
}

:focus-visible {
  outline: 3px solid rgba(59, 115, 173, .22);
  outline-offset: 2px;
}

.sidebar {
  background: linear-gradient(180deg, var(--dv-color-sidebar) 0%, #17233f 100%);
}

.top {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--dv-color-neutral-200);
}

.card,
.modal-box,
.score,
.report-option,
.org-row,
.matrix-card,
.hierarchy-card,
.kpi-summary-card {
  background: var(--dv-color-surface);
  border-color: var(--dv-color-neutral-200);
  border-radius: var(--dv-radius-lg);
  box-shadow: var(--dv-shadow-sm);
}

.btn {
  min-height: 38px;
  border-radius: var(--dv-radius-md);
  border-color: var(--dv-color-neutral-300);
  background: var(--dv-color-surface);
  color: var(--dv-color-neutral-700);
  font-weight: var(--dv-font-weight-medium);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--dv-shadow-xs); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--dv-color-primary-800); border-color: var(--dv-color-primary-800); color: #fff; }
.btn.primary:hover { background: var(--dv-color-primary-900); }
.btn.success { background: var(--dv-color-success-700); border-color: var(--dv-color-success-700); color: #fff; }
.btn.danger { color: var(--dv-color-danger-700); }

input, select, textarea {
  min-height: 38px;
  border-color: var(--dv-color-neutral-300);
  border-radius: var(--dv-radius-md);
  background: var(--dv-color-surface);
  color: var(--dv-color-neutral-900);
}
input:hover, select:hover, textarea:hover { border-color: var(--dv-color-neutral-400); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--dv-color-primary-600);
  box-shadow: 0 0 0 3px rgba(59, 115, 173, .12);
}

.table th {
  background: var(--dv-color-surface-subtle);
  color: var(--dv-color-neutral-600);
  font-weight: var(--dv-font-weight-semibold);
}
.table th, .table td { border-bottom-color: var(--dv-color-neutral-100); }
.table tbody tr:hover { background: var(--dv-color-primary-50); }

.badge, .kpi-status, .form-code, .form-status, .graph-result-count {
  border-radius: var(--dv-radius-pill);
}

.page { background: var(--dv-color-canvas); }
.muted, .status { color: var(--dv-color-neutral-500); }
.num { font-variant-numeric: tabular-nums; }

@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;
  }
}