/* =====================================================================
   bootstrap-bridge.css
   Load AFTER bootstrap.css and tokens.css, BEFORE components.css.
   Targets Bootstrap 5.3. Re-skins stock Bootstrap classes with the Magnibiz
   tokens, so pages that are not migrated yet already look on-brand.
   If the project is on Bootstrap 4, tell Claude Code: the --bs-* variables
   below do not exist there and the rules must be rewritten as plain overrides.
   ===================================================================== */
:root {
  --bs-body-bg: var(--mb-bg);
  --bs-body-color: var(--mb-text);
  --bs-body-font-family: var(--mb-font-body);
  --bs-primary: var(--mb-ink);
  --bs-primary-rgb: var(--mb-ink-rgb);
  --bs-link-color: var(--mb-ink);
  --bs-link-hover-color: var(--mb-accent-ink);
  --bs-border-color: var(--mb-line);
  --bs-border-radius: var(--mb-r-md);
  --bs-border-radius-lg: var(--mb-r-lg);
  --bs-border-radius-pill: var(--mb-r-pill);
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--mb-font-head); font-weight: 700; letter-spacing: var(--mb-head-tracking); }
h1, .h1 { font-weight: var(--mb-head-weight); }

/* Buttons: pills, teal primary */
.btn { --bs-btn-border-radius: var(--mb-r-pill); --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.65rem; --bs-btn-font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--mb-ink); --bs-btn-border-color: var(--mb-ink); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--mb-ink-hover); --bs-btn-hover-border-color: var(--mb-ink-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--mb-ink-hover); --bs-btn-active-border-color: var(--mb-ink-hover); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--mb-ink); --bs-btn-disabled-border-color: var(--mb-ink); --bs-btn-focus-shadow-rgb: 196, 169, 123; }
.btn-outline-primary, .btn-outline-secondary { --bs-btn-color: var(--mb-ink); --bs-btn-border-color: var(--mb-line); --bs-btn-hover-bg: var(--mb-surface); --bs-btn-hover-color: var(--mb-ink); --bs-btn-hover-border-color: var(--mb-ink); --bs-btn-active-bg: var(--mb-surface); --bs-btn-active-color: var(--mb-ink); --bs-btn-active-border-color: var(--mb-ink); }
.btn-danger { --bs-btn-bg: var(--mb-danger); --bs-btn-border-color: var(--mb-danger); --bs-btn-hover-bg: #8C3223; --bs-btn-hover-border-color: #8C3223; }

/* Forms */
.form-control, .form-select { min-height: 44px; border-radius: var(--mb-r-md); border-color: var(--mb-line); }
.form-control:focus, .form-select:focus { border-color: var(--mb-ink); box-shadow: var(--mb-focus); }
.form-label { font-weight: 500; font-size: 0.875rem; }
.form-check-input:checked { background-color: var(--mb-ink); border-color: var(--mb-ink); }
.form-check-input:focus { border-color: var(--mb-ink); box-shadow: var(--mb-focus); }
.form-switch .form-check-input { width: 2.75em; height: 1.5em; }

/* Tabs become pills */
.nav-tabs { border: 0; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 16px; }
.nav-tabs .nav-link { border: 1px solid var(--mb-line); border-radius: var(--mb-r-pill); background: var(--mb-surface); color: var(--mb-ink); white-space: nowrap; font-weight: 500; }
.nav-tabs .nav-link.active { background: var(--mb-ink); color: #fff; border-color: var(--mb-ink); }

/* Surfaces */
.card { border-color: var(--mb-line); border-radius: var(--mb-r-lg); }
.table { --bs-table-bg: transparent; }
.table thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-muted); font-weight: 500; }
.badge { border-radius: var(--mb-r-pill); font-weight: 500; }
.progress { height: 6px; border-radius: 99px; background: var(--mb-track); }
.progress-bar { background: var(--mb-ink); }
.alert { border-radius: var(--mb-r-md); }
.alert-warning { --bs-alert-bg: var(--mb-warn-bg); --bs-alert-border-color: var(--mb-accent); --bs-alert-color: var(--mb-accent-ink); }
.alert-danger { --bs-alert-bg: var(--mb-danger-bg); --bs-alert-border-color: var(--mb-danger); --bs-alert-color: var(--mb-danger); }
.modal-content { border: 0; border-radius: var(--mb-r-lg); }
.dropdown-menu { border-color: var(--mb-line); border-radius: var(--mb-r-md); }
.offcanvas { background: var(--mb-ink); color: #fff; }