/* ============================================================
   bootstrap-overrides.css — Bootstrap defaults → Robust Health tokens
   Phase 3c-3. Replaces the legacy rh-overrides.css.

   Loads after Bootstrap and tokens.css, before components.css.
   Order in the new chrome:
     bootstrap.min.css
     bootstrap-icons.min.css
     tokens.css
     bootstrap-overrides.css       ← this file
     components.css
     [page-specific.css]

   We keep Bootstrap loaded for grid (.row, .col-*) and a small set of
   utilities (.d-flex, .gap-*, .align-items-*, visibility helpers).
   Everything visual — buttons, cards, forms, modals, dropdowns, tables,
   alerts — is reskinned here so legacy code that still uses Bootstrap
   classes inherits the design system without touching every page.

   The !important declarations are deliberate: we are losing the cascade
   battle against Bootstrap's specificity by design. Phase 4 surface
   tranches migrate pages off Bootstrap classes onto .rh-* primitives;
   when the last page is migrated, this file shrinks substantially.

   Out of scope here:
     - Bootstrap grid (.row, .col-*) — left alone, used as-is
     - Bootstrap utilities (spacing, flex, display) — left alone
     - Legacy v2-feature CSS (.cal-*, .msg-*, .coach-*, etc.) — moves
       to legacy-deprecated.css, only loaded on hidden pages
   ============================================================ */


/* ── Body baseline ─────────────────────────────────────────── */

body {
  background: var(--bg) !important;
  color: var(--ink-1) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}


/* ── Buttons ───────────────────────────────────────────────── */

.btn {
  border-radius: var(--radius-md) !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary,
.btn-primary:focus {
  background: var(--kelly) !important;
  border-color: var(--kelly) !important;
  color: var(--surface) !important;
}

.btn-primary:hover,
.btn-primary.active {
  background: var(--kelly-deep) !important;
  border-color: var(--kelly-deep) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--ink-3) !important;
  border-color: var(--ink-3) !important;
  opacity: 1 !important;
}

.btn-outline-secondary {
  background: var(--surface) !important;
  border-color: var(--border-emphasis) !important;
  color: var(--ink-1) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary.active {
  background: var(--sunken) !important;
  border-color: var(--border-emphasis) !important;
  color: var(--ink-1) !important;
}

.btn-outline-danger {
  background: var(--surface) !important;
  border-color: rgba(154, 45, 45, 0.30) !important;
  color: var(--signal-alert) !important;
}

.btn-outline-danger:hover {
  background: var(--signal-alert-dim) !important;
  color: var(--signal-alert) !important;
}

.btn-link {
  color: var(--kelly) !important;
  text-decoration: none !important;
}

.btn-link:hover {
  color: var(--kelly-deep) !important;
}


/* ── Cards ─────────────────────────────────────────────────── */

.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--ink-1) !important;
  box-shadow: none !important;
}

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink-1) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--ink-1) !important;
}


/* ── Forms ─────────────────────────────────────────────────── */

.form-control,
.form-select {
  background: var(--sunken) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-1) !important;
  border-radius: var(--radius-md) !important;
  font-family: inherit !important;
  min-height: 48px;
  padding: 14px;
}

.form-control:focus,
.form-select:focus {
  background: var(--surface) !important;
  border-color: var(--kelly) !important;
  box-shadow: var(--shadow-focus) !important;
  color: var(--ink-1) !important;
}

.form-control::placeholder {
  color: var(--ink-3) !important;
}

.form-control:disabled,
.form-select:disabled {
  background: var(--sunken) !important;
  color: var(--ink-3) !important;
  cursor: not-allowed;
}

.form-label {
  color: var(--ink-2) !important;
  font-size: var(--type-stat-label-size);
  font-weight: var(--type-stat-label-weight);
  letter-spacing: var(--type-stat-label-tracking);
}

.form-text {
  color: var(--ink-2) !important;
  font-size: var(--type-meta-size);
}

.input-group-text {
  background: var(--sunken) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-2) !important;
}


/* ── Modals (legacy — bottom sheet replaces these) ─────────── */

.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--ink-1) !important;
  box-shadow: none !important;
}

.modal-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink-1) !important;
}

.modal-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

.modal-title {
  color: var(--ink-1) !important;
}

.btn-close {
  filter: none !important;
  opacity: 0.7;
}

.btn-close:hover {
  opacity: 1;
}


/* ── Dropdowns ─────────────────────────────────────────────── */

.dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--ink-1) !important;
  box-shadow: none !important;
}

.dropdown-item {
  color: var(--ink-1) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sunken) !important;
  color: var(--ink-1) !important;
}

.dropdown-divider {
  border-top-color: var(--border) !important;
}


/* ── Tables ────────────────────────────────────────────────── */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-1);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--sunken);
  --bs-table-hover-bg: var(--sunken);
  color: var(--ink-1) !important;
}

.table th {
  color: var(--ink-3) !important;
  font-size: var(--type-stat-label-size);
  font-weight: var(--type-stat-label-weight);
  letter-spacing: var(--type-stat-label-tracking);
}

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


/* ── Alerts ────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  font-size: var(--type-body-size);
}

.alert-success {
  background: var(--signal-success-dim) !important;
  border-color: rgba(47, 107, 64, 0.20) !important;
  color: var(--signal-success) !important;
}

.alert-warning {
  background: var(--signal-caution-dim) !important;
  border-color: rgba(160, 112, 32, 0.20) !important;
  color: var(--signal-caution) !important;
}

.alert-danger {
  background: var(--signal-alert-dim) !important;
  border-color: rgba(154, 45, 45, 0.20) !important;
  color: var(--signal-alert) !important;
}

.alert-info {
  background: var(--kelly-dim) !important;
  border-color: rgba(47, 122, 51, 0.20) !important;
  color: var(--kelly) !important;
}


/* ── Badges (Bootstrap badge → muted .rh-pill style) ───────── */

.badge {
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

.bg-primary,
.text-bg-primary {
  background: var(--kelly-dim) !important;
  color: var(--kelly) !important;
}


/* ── Pagination ────────────────────────────────────────────── */

.page-link {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-2) !important;
}

.page-link:hover {
  background: var(--sunken) !important;
  color: var(--ink-1) !important;
}

.page-item.active .page-link {
  background: var(--kelly) !important;
  border-color: var(--kelly) !important;
  color: var(--surface) !important;
}

.page-item.disabled .page-link {
  background: var(--surface) !important;
  color: var(--ink-3) !important;
}


/* ── Bootstrap utility overrides ───────────────────────────── */

.text-muted {
  color: var(--ink-3) !important;
}

.text-primary {
  color: var(--kelly) !important;
}

.text-success {
  color: var(--signal-success) !important;
}

.text-danger {
  color: var(--signal-alert) !important;
}

.text-warning {
  color: var(--signal-caution) !important;
}

.bg-success-subtle {
  background: var(--signal-success-dim) !important;
}

.bg-danger-subtle {
  background: var(--signal-alert-dim) !important;
}

.bg-warning-subtle {
  background: var(--signal-caution-dim) !important;
}

.bg-info-subtle {
  background: var(--kelly-dim) !important;
}


/* ── Scrollbar ─────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-emphasis);
}


/* ── Transitional aliases ──────────────────────────────────── */

/* Transitional alias for legacy .rh-activity-card.
   Used by science.php cards (cloned into the sciPopup sheet) and by
   any kept-at-launch surface that still emits .rh-activity-card.
   Drops out when phase 4 surface tranches migrate to .rh-study-card. */

.rh-activity-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--ink-1);
  margin-bottom: var(--space-3);
}

.rh-activity-card:last-child {
  margin-bottom: 0;
}

/* Force readable text inside legacy cards even when the card markup
   includes inline styles set against the old dark palette. */
.rh-activity-card,
.rh-activity-card * {
  color: var(--ink-1);
}

.rh-activity-card .text-muted,
.rh-activity-card [style*="color:"][style*="--rh-muted"],
.rh-activity-card [style*="color:#888"],
.rh-activity-card [style*="color:#999"],
.rh-activity-card [style*="color: #888"],
.rh-activity-card [style*="color: #999"] {
  color: var(--ink-2) !important;
}


/* Legacy .rh-activity-row — exercise feed list rows.
   Defined in pages/training.css; transitional defensive override
   to guarantee row separators and readable text on light surfaces. */

.rh-activity-row {
  background: var(--surface);
  color: var(--ink-1);
  padding: var(--space-3) var(--space-4);
}

.rh-activity-row + .rh-activity-row {
  border-top: 1px solid var(--border);
}

.rh-card-day-sep {
  border-bottom: 1px solid var(--border-emphasis);
  background: var(--bg);
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-stat-label-size);
  font-weight: var(--type-stat-label-weight);
  color: var(--ink-3);
}

.rh-card-sep {
  border-bottom: 1px solid var(--border);
}


/* ── Legacy .sci-info-btn (transitional) ──────────────────── */
/* Citation trigger used by pages not yet migrated to .rh-cite.
   Drops out when all pages migrate. */

.sci-info-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
  color: var(--kelly);
  opacity: 1;
  transition: color var(--duration-fast) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.sci-info-btn:hover {
  color: var(--kelly-deep);
}

.sci-info-btn i {
  font-size: 14px;
  line-height: 1;
}