/* ── Universal Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  line-height: 1.4;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.1); }

.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}
.btn--secondary:hover:not(:disabled) { background: var(--border); }

.btn--destructive {
  background: var(--btn-destructive-bg);
  color: var(--btn-destructive-text);
}
.btn--destructive:hover:not(:disabled) { filter: brightness(1.1); }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn--ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }

.btn--sm { padding: 5px 12px; font-size: var(--text-small); }
.btn--lg { padding: 10px 20px; font-size: var(--text-subsection); }

/* ── Universal Form Elements ── */
.form-group { margin-bottom: var(--space-md); }

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%; box-sizing: border-box;
  padding: var(--space-sm) 12px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.form-input::placeholder { color: var(--text-muted); }
.form-textarea { min-height: 80px; resize: vertical; }
.form-hint {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* ── Universal Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-md);
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.modal-box--lg { max-width: 720px; }
.modal-box--sm { max-width: 440px; }

.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-section-title);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.modal__close {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.modal__close:hover { background: var(--bg-hover); color: var(--text-primary); }

.modal__body { padding: var(--space-lg); }

.modal__footer {
  display: flex; justify-content: flex-end; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
}
/* Background click target inside modal-overlay */
.modal-overlay__bg {
  position: absolute; inset: 0; z-index: -1;
}
/* Modal action buttons */
.modal__cancel {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-base); color: var(--text-secondary); font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: var(--font-body);
  transition: background .12s;
}
.modal__cancel:hover { background: var(--bg-hover); }
.modal__submit {
  padding: 8px 16px; border: none; border-radius: var(--radius-md);
  background: var(--accent); color: #fff; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: var(--font-body);
  transition: filter .12s;
}
.modal__submit:hover { filter: brightness(1.1); }
.modal__error {
  margin-top: var(--space-sm);
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--tint-danger); color: var(--color-danger);
  font-size: 12px; font-weight: 600;
}

/* ── Stat Card / KPI Component ── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.stat-card__label {
  font-size: var(--text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}
.stat-card__value {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.stat-card__change { font-size: var(--text-small); margin-top: 2px; }
.stat-card__change--up { color: var(--color-success); }
.stat-card__change--down { color: var(--color-danger); }