/*
 * Bootstrap 5 theme: maps the design tokens onto Bootstrap's CSS variables and restyles its core components.
 */

:root,
[data-bs-theme] {
  --bs-body-font-family: var(--mc-font-sans);
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--mc-ink);
  --bs-body-color-rgb: 16, 24, 40;
  --bs-body-bg: var(--mc-bg);
  --bs-secondary-color: var(--mc-muted);
  --bs-tertiary-bg: var(--mc-surface-2);
  --bs-border-color: var(--mc-border);
  --bs-border-radius: var(--mc-radius-sm);
  --bs-border-radius-lg: var(--mc-radius);
  --bs-link-color: var(--mc-brand);
  --bs-link-color-rgb: var(--mc-brand-rgb);
  --bs-link-hover-color: var(--mc-brand-hover);
  --bs-primary: var(--mc-brand);
  --bs-primary-rgb: var(--mc-brand-rgb);
  --bs-focus-ring-color: rgba(var(--mc-brand-rgb), 0.28);
  --bs-heading-color: var(--mc-ink);
}

[data-bs-theme='dark'] {
  --bs-body-color-rgb: 238, 240, 244;
}

body {
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 650;
  letter-spacing: -0.015em;
}
h1, .h1 { font-size: 1.625rem; margin-bottom: var(--mc-space-5); }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.0625rem; }
table th, b, strong { font-weight: 600; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Buttons ------------------------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: var(--mc-radius-sm);
  --bs-btn-font-weight: 550;
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-padding-y: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.btn:focus-visible { box-shadow: var(--mc-focus-ring); }
.btn-sm { --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.65rem; --bs-btn-font-size: 0.8125rem; }

.btn-primary {
  --bs-btn-bg: var(--mc-brand);
  --bs-btn-border-color: var(--mc-brand);
  --bs-btn-color: var(--mc-brand-on);
  --bs-btn-hover-bg: var(--mc-brand-hover);
  --bs-btn-hover-border-color: var(--mc-brand-hover);
  --bs-btn-hover-color: var(--mc-brand-on);
  --bs-btn-active-bg: var(--mc-brand-active);
  --bs-btn-active-border-color: var(--mc-brand-active);
  --bs-btn-active-color: var(--mc-brand-on);
  --bs-btn-disabled-bg: var(--mc-brand);
  --bs-btn-disabled-border-color: var(--mc-brand);
  --bs-btn-focus-shadow-rgb: var(--mc-brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--mc-brand);
  --bs-btn-border-color: var(--mc-brand);
  --bs-btn-hover-bg: var(--mc-brand);
  --bs-btn-hover-border-color: var(--mc-brand);
  --bs-btn-hover-color: var(--mc-brand-on);
  --bs-btn-active-bg: var(--mc-brand-hover);
  --bs-btn-active-border-color: var(--mc-brand-hover);
  --bs-btn-active-color: var(--mc-brand-on);
}
.btn-secondary,
.btn-light {
  --bs-btn-bg: var(--mc-surface);
  --bs-btn-border-color: var(--mc-border-strong);
  --bs-btn-color: var(--mc-ink-2);
  --bs-btn-hover-bg: var(--mc-surface-2);
  --bs-btn-hover-border-color: var(--mc-border-strong);
  --bs-btn-hover-color: var(--mc-ink);
  --bs-btn-active-bg: var(--mc-surface-2);
  --bs-btn-active-border-color: var(--mc-border-strong);
  --bs-btn-active-color: var(--mc-ink);
  box-shadow: var(--mc-shadow-sm);
}
.btn-danger {
  --bs-btn-bg: var(--mc-danger);
  --bs-btn-border-color: var(--mc-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--mc-danger) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--mc-danger) 88%, black);
}
[data-bs-theme='dark'] .btn-danger { --bs-btn-color: #1a0606; --bs-btn-hover-color: #1a0606; }
.btn-outline-danger { --bs-btn-color: var(--mc-danger); --bs-btn-border-color: var(--mc-danger); --bs-btn-hover-bg: var(--mc-danger); --bs-btn-hover-border-color: var(--mc-danger); }
.btn-info { --bs-btn-bg: var(--mc-info); --bs-btn-border-color: var(--mc-info); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.btn-success { --bs-btn-bg: var(--mc-success); --bs-btn-border-color: var(--mc-success); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
[data-bs-theme='dark'] .btn-success { --bs-btn-color: #04200f; --bs-btn-hover-color: #04200f; }

/* ---- Cards, tables ------------------------------------------------------------------------- */

.card {
  --bs-card-bg: var(--mc-surface);
  --bs-card-border-color: var(--mc-border);
  --bs-card-border-radius: var(--mc-radius);
  --bs-card-inner-border-radius: calc(var(--mc-radius) - 1px);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--mc-shadow-sm);
}
.card-header { font-weight: 600; }

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--mc-border);
  --bs-table-hover-bg: var(--mc-surface-2);
  --bs-table-striped-bg: var(--mc-surface-2);
  vertical-align: middle;
}
.table > thead > tr > th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mc-muted);
  background: var(--mc-surface-2);
  border-bottom-width: 1px;
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: 0.75rem 1rem; }
.table-bordered { border-color: var(--mc-border); }
.table-responsive { border-radius: var(--mc-radius); }

/* A table that sits directly in the page becomes a card, so legacy pages get the new look unchanged */
main .table-responsive > .table,
main > .table {
  background: var(--mc-surface);
}
main > .table,
main .table-responsive {
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  overflow: hidden;
  box-shadow: var(--mc-shadow-sm);
}
main > .table { border-collapse: separate; border-spacing: 0; }

/* ---- Forms --------------------------------------------------------------------------------- */

.form-control,
.form-select {
  --bs-body-bg: var(--mc-surface);
  background-color: var(--mc-surface);
  border-color: var(--mc-border-strong);
  border-radius: var(--mc-radius-sm);
  padding: 0.5rem 0.75rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mc-brand);
  box-shadow: var(--mc-focus-ring);
  background-color: var(--mc-surface);
}
.form-label { font-weight: 550; font-size: 0.875rem; margin-bottom: 0.35rem; }
.form-text { color: var(--mc-muted); }
.form-check-input:checked {
  background-color: var(--mc-brand);
  border-color: var(--mc-brand);
}
.form-check-input:focus { border-color: var(--mc-brand); box-shadow: var(--mc-focus-ring); }
label.required::before { content: '*'; color: var(--mc-danger); margin-right: 0.2rem; }

.sticky-form-btn-container {
  position: sticky;
  z-index: 10;
  bottom: 0;
  padding: var(--mc-space-3) 0;
}
.sticky-form-btn-container > div {
  background: color-mix(in srgb, var(--mc-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: var(--mc-space-3);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
}

/* ---- Nav, pagination, dropdowns, alerts, badges -------------------------------------------- */

.pagination {
  --bs-pagination-color: var(--mc-ink-2);
  --bs-pagination-bg: var(--mc-surface);
  --bs-pagination-border-color: var(--mc-border);
  --bs-pagination-hover-bg: var(--mc-surface-2);
  --bs-pagination-hover-color: var(--mc-ink);
  --bs-pagination-hover-border-color: var(--mc-border-strong);
  --bs-pagination-active-bg: var(--mc-brand);
  --bs-pagination-active-border-color: var(--mc-brand);
  --bs-pagination-active-color: var(--mc-brand-on);
  --bs-pagination-focus-box-shadow: var(--mc-focus-ring);
  --bs-pagination-border-radius: var(--mc-radius-sm);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--mc-brand); --bs-nav-pills-link-active-color: var(--mc-brand-on); }
.nav-tabs { --bs-nav-tabs-link-active-border-color: var(--mc-border) var(--mc-border) var(--mc-surface); }

.dropdown-menu {
  --bs-dropdown-bg: var(--mc-surface);
  --bs-dropdown-border-color: var(--mc-border);
  --bs-dropdown-border-radius: var(--mc-radius);
  --bs-dropdown-link-active-bg: var(--mc-brand);
  --bs-dropdown-link-hover-bg: var(--mc-surface-2);
  --bs-dropdown-padding-y: 0.4rem;
  box-shadow: var(--mc-shadow-lg);
}
.dropdown-item { border-radius: var(--mc-radius-sm); margin: 0 0.35rem; width: auto; display: flex; align-items: center; gap: 0.5rem; }

.alert { border-radius: var(--mc-radius); border-width: 1px; }
.alert-info { --bs-alert-bg: var(--mc-info-soft); --bs-alert-color: var(--mc-info); --bs-alert-border-color: transparent; }
.alert-success { --bs-alert-bg: var(--mc-success-soft); --bs-alert-color: var(--mc-success); --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-bg: var(--mc-warning-soft); --bs-alert-color: var(--mc-warning); --bs-alert-border-color: transparent; }
.alert-danger { --bs-alert-bg: var(--mc-danger-soft); --bs-alert-color: var(--mc-danger); --bs-alert-border-color: transparent; }

.badge { font-weight: 550; letter-spacing: 0.01em; border-radius: 999px; padding: 0.35em 0.7em; }
.badge.text-bg-primary { background-color: var(--mc-brand-soft) !important; color: var(--mc-brand) !important; }
.badge.text-bg-success { background-color: var(--mc-success-soft) !important; color: var(--mc-success) !important; }
.badge.text-bg-warning { background-color: var(--mc-warning-soft) !important; color: var(--mc-warning) !important; }
.badge.text-bg-danger { background-color: var(--mc-danger-soft) !important; color: var(--mc-danger) !important; }
.badge.text-bg-info { background-color: var(--mc-info-soft) !important; color: var(--mc-info) !important; }
.badge.text-bg-secondary,
.badge.text-bg-light { background-color: var(--mc-surface-2) !important; color: var(--mc-ink-2) !important; }

.modal-content { border-radius: var(--mc-radius-lg); border-color: var(--mc-border); background: var(--mc-surface); }
.toast { border-radius: var(--mc-radius); border: 1px solid var(--mc-border); box-shadow: var(--mc-shadow-lg); background: var(--mc-surface); }

hr { border-color: var(--mc-border); opacity: 1; }
::selection { background: rgba(var(--mc-brand-rgb), 0.25); }

/* Inline code (keys, identifiers) in the palette instead of Bootstrap's pink */
code {
  --bs-code-color: var(--mc-ink-2);
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  background: var(--mc-surface-2);
  font-size: 0.85em;
}