/*
  Site-wide Bootstrap component overrides, built on top of tokens.css.

  Bootstrap (loaded via CDN in base.html) supplies layout/grid/behavior;
  this file re-skins its visual defaults (color, radius, shadow) to match
  the locked design system instead of Bootstrap's stock blue/rounded look.
  Load this after tokens.css and after the Bootstrap CSS link.

  Scope: the main site only. The garmin/ and campsite_finder/ blueprints
  use their own base.html from their standalone repos and are not affected
  by this file — see SITE_V2_HANDOFF.md on why those aren't edited here.
*/

/* ---- buttons ---- */
.btn {
  border-radius: var(--radius-md);
}
.btn-secondary,
.btn-outline-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn-success {
  background: var(--success);
  border-color: var(--success);
}
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
}
.btn-info {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
}

/* ---- cards ---- */
.card {
  /* Bootstrap's .card sets its own color: var(--bs-body-color), a fixed
     #212529 that only changes under [data-bs-theme="dark"] — an attribute
     this site never sets (see the .text-muted note above for the same
     issue). Left alone, card titles/body text stay dark grey regardless of
     our own theme. */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card, var(--shadow-sm));
}
.card-header {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}
.card-footer {
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
}

/* ---- alerts ---- */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.alert-info {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.alert-success {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--text);
}
.alert-warning {
  background: var(--warning-soft);
  border-color: var(--warning);
  color: var(--text);
}
.alert-danger {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--text);
}

/* ---- muted text ---- */
/* Bootstrap's .text-muted resolves against --bs-secondary-color, which only
   changes under [data-bs-theme="dark"] — a Bootstrap-owned attribute this
   site never sets, since dark mode here is driven by our own --text-muted
   token instead (see tokens.css). Without this override .text-muted stays
   pinned to Bootstrap's light-mode grey and goes low-contrast/illegible
   against a dark --bg. */
.text-muted,
.text-secondary,
.text-body-secondary {
  color: var(--text-muted) !important;
}

/* ---- tables ---- */
.table {
  color: var(--text);
  border-color: var(--border);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--border);
}
.table thead th {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  border-bottom-color: var(--border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-raised);
  color: var(--text);
}

/* ---- forms ---- */
.form-control,
.form-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.form-label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: var(--label-transform);
  letter-spacing: var(--tracking-label);
}

/* ---- dropdowns ---- */
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.dropdown-item {
  color: var(--text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---- list groups ---- */
.list-group-item {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* ---- footer ---- */
.site-footer {
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
  box-shadow: none;
}