/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.chart-wrapper {
  max-height: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* ---------- Forms ---------- */
.form-label {
  color: var(--ink-faint);
  font-size: var(--text-sm);
  font-weight: 500;
}

.form-control {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
}

.form-control:focus {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem hsl(204 82% 34% / 0.15);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-outline-danger {
  color: var(--status-pending);
  border-color: var(--status-pending);
  border-radius: var(--radius-sm);
}

.btn-outline-danger:hover {
  background: var(--status-pending-soft);
  color: var(--status-pending);
  border-color: var(--status-pending);
}

.alert-success {
  background: hsl(150 45% 94%);
  color: var(--status-done);
  border: 1px solid hsl(150 45% 80%);
  border-radius: var(--radius-sm);
}

.alert-danger {
  background: var(--status-pending-soft);
  color: var(--status-pending);
  border: 1px solid hsl(4 74% 85%);
  border-radius: var(--radius-sm);
}

/* ---------- Table ---------- */
.table {
  color: var(--ink);
  margin-bottom: 0;
}

.table thead th {
  color: var(--ink-faint);
  font-size: var(--text-sm);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.table > :not(caption) > * > * {
  background: transparent;
  border-color: var(--border-subtle);
}

.table tbody tr:hover {
  background: hsl(214 90% 98%);
}

/* ---------- Instrument card (ONs / CEDEARs) ---------- */
.instrument-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.instrument-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.instrument-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}

.instrument-meta {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

.instrument-stats {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.stat-block .stat-label {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-block .stat-value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}

.subsection-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  margin: var(--space-4) 0 var(--space-2);
}

.mini-form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: var(--space-3);
}

.mini-form .form-control {
  width: auto;
  min-width: 110px;
}

.gain-positive {
  color: var(--status-done);
  font-weight: 600;
}

.gain-negative {
  color: var(--status-pending);
  font-weight: 600;
}