/*
 * Base: Bootstrap pointed at the tokens, type, links, focus, scrollbars and the Bootstrap
 * components the app uses (buttons, cards, tables, forms, alerts, badges, lists, pagination).
 * Bootstrap's own dark mode (data-bs-theme) is not used: its variables read the tokens, so
 * both themes follow from tokens.css.
 */
:root {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: var(--lh-md);
  --bs-font-monospace: var(--font-mono);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 28, 114, 147;
  --bs-border-color: var(--color-border);
  --bs-border-color-translucent: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-md);
  --bs-secondary-color: var(--color-text-muted);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-heading-color: var(--color-text);
  --bs-emphasis-color: var(--color-text);
  --bs-tertiary-bg: var(--color-surface-alt);
  --bs-secondary-bg: var(--color-surface-alt);
  --bs-tertiary-color: var(--color-text-muted);
  --bs-code-color: var(--color-text-muted);
  --bs-highlight-bg: var(--color-warning-soft);
  --bs-highlight-color: var(--color-text);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-xs);
  --bs-box-shadow-lg: var(--shadow-lg);
  --bs-nav-link-color: var(--color-text-muted);
  --bs-nav-link-hover-color: var(--color-text);
  --bs-nav-tabs-link-active-color: var(--color-text);
  --bs-nav-tabs-link-active-bg: var(--color-surface);
  --bs-nav-tabs-link-active-border-color: var(--color-border) var(--color-border) var(--color-surface);
  --bs-nav-tabs-link-hover-border-color: var(--color-border);
  --bs-body-color-rgb: 26, 32, 40;
}
:root[data-theme="dark"] { --bs-body-color-rgb: 236, 236, 238; }

/* ---- Document --------------------------------------------------------------------------- */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--lh-md);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background: var(--color-bg);
}
::selection { background: var(--color-primary-soft); color: var(--color-text); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}
h1, .h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
h2, .h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
h3, .h3 { font-size: var(--text-xl); line-height: var(--lh-xl); }
h4, .h4 { font-size: var(--text-lg); line-height: var(--lh-lg); }
h5, .h5 { font-size: 1rem; line-height: var(--lh-md); }
h6, .h6 { font-size: var(--text-sm); line-height: var(--lh-sm); }
p { margin-bottom: var(--space-3); }
small, .small { font-size: var(--text-sm); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; opacity: 1; }
strong, b { font-weight: var(--weight-semibold); }

a { color: var(--color-primary); text-decoration: none; transition: color var(--dur-xs) var(--ease-out); }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

code, kbd, pre, samp { font-family: var(--font-mono); }
code {
  font-size: .92em;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  word-break: break-word;
}
kbd {
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  box-shadow: none;
}
mark, .mark { background: var(--color-warning-soft); color: var(--color-text); padding: 0 2px; border-radius: 2px; }

/* ---- Focus ------------------------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: none; }

.skip-link {
  position: fixed; left: var(--space-4); top: -60px; z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary); color: var(--color-on-accent);
  border-radius: var(--radius-sm); font-weight: var(--weight-medium);
  transition: top var(--dur-sm) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); color: var(--color-on-accent); text-decoration: none; }

/* ---- Scrollbars: thin, visible on hover ------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*:hover::-webkit-scrollbar-thumb { background: var(--color-border-strong); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); background-clip: content-box; }

/* ---- Text and background utilities that Bootstrap colours itself ------------------------ */
.text-muted, .text-secondary, .text-body-secondary { color: var(--color-text-muted) !important; }
.text-subtle { color: var(--color-text-subtle) !important; }
.text-body, .text-body-emphasis { color: var(--color-text) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success-ink) !important; }
.text-warning, .text-warning-emphasis { color: var(--color-warning-ink) !important; }
.text-danger { color: var(--color-danger-ink) !important; }
.text-info { color: var(--color-info-ink) !important; }
.bg-light, .bg-body-tertiary, .bg-body-secondary, .text-bg-light { background-color: var(--color-surface-alt) !important; color: var(--color-text) !important; }
.bg-body { background-color: var(--color-bg) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--color-border) !important; }
.mono { font-family: var(--font-mono); }
.fw-medium { font-weight: var(--weight-medium) !important; }
.fw-semibold { font-weight: var(--weight-semibold) !important; }
.text-xs { font-size: var(--text-xs) !important; line-height: var(--lh-xs); }
.text-sm { font-size: var(--text-sm) !important; line-height: var(--lh-sm); }
.nowrap { white-space: nowrap; }

/* ---- Buttons ---------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: var(--weight-medium);
  --bs-btn-line-height: var(--lh-md);
  --bs-btn-padding-x: 14px;
  --bs-btn-padding-y: 7px;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-focus-box-shadow: 0 0 0 3px var(--color-primary-soft);
  --bs-btn-disabled-opacity: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color var(--dur-xs) var(--ease-out), background-color var(--dur-xs) var(--ease-out),
    border-color var(--dur-xs) var(--ease-out), box-shadow var(--dur-xs) var(--ease-out), filter var(--dur-xs) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.btn .bi { font-size: 1.05em; line-height: 1; }
.btn-sm {
  white-space: nowrap;
  --bs-btn-font-size: var(--text-sm);
  --bs-btn-line-height: var(--lh-sm);
  --bs-btn-padding-x: 10px;
  --bs-btn-padding-y: 5px;
  --bs-btn-border-radius: var(--radius-sm);
}
.btn-lg { --bs-btn-font-size: var(--text-lg); --bs-btn-padding-x: 20px; --bs-btn-padding-y: 10px; --bs-btn-border-radius: var(--radius-md); }
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  --bs-btn-disabled-bg: var(--color-surface-alt);
  --bs-btn-disabled-border-color: var(--color-border);
  --bs-btn-disabled-color: var(--color-text-muted);
  cursor: not-allowed; pointer-events: auto;
}

.btn-primary {
  --bs-btn-color: var(--color-on-accent); --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-accent); --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-color: var(--color-on-accent); --bs-btn-active-bg: var(--color-primary-hover); --bs-btn-active-border-color: var(--color-primary-hover);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-accent); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-on-accent); --bs-btn-active-bg: var(--color-primary-hover); --bs-btn-active-border-color: var(--color-primary-hover);
}
.btn-outline-secondary {
  --bs-btn-color: var(--color-text); --bs-btn-bg: var(--color-surface); --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-surface-alt); --bs-btn-hover-border-color: var(--color-border-strong);
  --bs-btn-active-color: var(--color-text); --bs-btn-active-bg: var(--color-border); --bs-btn-active-border-color: var(--color-border-strong);
}
.btn-secondary {
  --bs-btn-color: var(--color-text); --bs-btn-bg: var(--color-surface-alt); --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-border); --bs-btn-hover-border-color: var(--color-border-strong);
  --bs-btn-active-color: var(--color-text); --bs-btn-active-bg: var(--color-border); --bs-btn-active-border-color: var(--color-border-strong);
}
.btn-success, .btn-danger, .btn-warning, .btn-info {
  --bs-btn-color: var(--color-on-accent); --bs-btn-hover-color: var(--color-on-accent); --bs-btn-active-color: var(--color-on-accent);
}
.btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-border-color: var(--color-success); --bs-btn-active-bg: var(--color-success); --bs-btn-active-border-color: var(--color-success); }
.btn-danger  { --bs-btn-bg: var(--color-danger);  --bs-btn-border-color: var(--color-danger);  --bs-btn-hover-bg: var(--color-danger);  --bs-btn-hover-border-color: var(--color-danger);  --bs-btn-active-bg: var(--color-danger);  --bs-btn-active-border-color: var(--color-danger); }
.btn-warning { --bs-btn-color: #1A2028; --bs-btn-hover-color: #1A2028; --bs-btn-active-color: #1A2028; --bs-btn-bg: var(--color-warning); --bs-btn-border-color: var(--color-warning); --bs-btn-hover-bg: var(--color-warning); --bs-btn-hover-border-color: var(--color-warning); --bs-btn-active-bg: var(--color-warning); --bs-btn-active-border-color: var(--color-warning); }
.btn-info    { --bs-btn-bg: var(--color-info);    --bs-btn-border-color: var(--color-info);    --bs-btn-hover-bg: var(--color-info);    --bs-btn-hover-border-color: var(--color-info);    --bs-btn-active-bg: var(--color-info);    --bs-btn-active-border-color: var(--color-info); }
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover { filter: brightness(.93); }
.btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info {
  --bs-btn-bg: transparent; --bs-btn-hover-color: var(--color-on-accent); --bs-btn-active-color: var(--color-on-accent);
}
.btn-outline-success { --bs-btn-color: var(--color-success-ink); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-border-color: var(--color-success); --bs-btn-active-bg: var(--color-success); --bs-btn-active-border-color: var(--color-success); }
.btn-outline-danger  { --bs-btn-color: var(--color-danger-ink);  --bs-btn-border-color: var(--color-danger);  --bs-btn-hover-bg: var(--color-danger);  --bs-btn-hover-border-color: var(--color-danger);  --bs-btn-active-bg: var(--color-danger);  --bs-btn-active-border-color: var(--color-danger); }
.btn-outline-warning { --bs-btn-color: var(--color-warning-ink); --bs-btn-border-color: var(--color-warning); --bs-btn-hover-bg: var(--color-warning); --bs-btn-hover-border-color: var(--color-warning); --bs-btn-active-bg: var(--color-warning); --bs-btn-active-border-color: var(--color-warning); --bs-btn-hover-color: #1A2028; --bs-btn-active-color: #1A2028; }
.btn-outline-info    { --bs-btn-color: var(--color-info-ink);    --bs-btn-border-color: var(--color-info);    --bs-btn-hover-bg: var(--color-info);    --bs-btn-hover-border-color: var(--color-info);    --bs-btn-active-bg: var(--color-info);    --bs-btn-active-border-color: var(--color-info); }
.btn-link, .btn-link-plain {
  --bs-btn-color: var(--color-text-muted); --bs-btn-hover-color: var(--color-primary); --bs-btn-active-color: var(--color-primary);
  --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent;
  text-decoration: none; font-size: var(--text-sm);
}
.btn-link-danger { --bs-btn-color: var(--color-danger-ink); --bs-btn-hover-color: var(--color-danger-ink); }
.btn-link-danger:hover { background: var(--color-danger-soft); }
.btn-group > .btn { gap: 6px; }

/* ---- Cards ------------------------------------------------------------------------------ */
.card {
  --bs-card-bg: var(--color-surface);
  --bs-card-color: var(--color-text);
  --bs-card-border-color: var(--color-border);
  --bs-card-border-radius: var(--radius-md);
  --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: var(--space-4);
  --bs-card-cap-padding-x: var(--space-5);
  --bs-card-spacer-y: var(--space-5);
  --bs-card-spacer-x: var(--space-5);
  box-shadow: var(--shadow-xs);
}
.card .card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  background: transparent; border-bottom: 1px solid var(--color-border); font-weight: var(--weight-semibold);
}
.card .card-footer { background: transparent; border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-5); }
.card-title { font-size: 1rem; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.card-header .card-title { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.card-header .card-title .bi { color: var(--color-text-subtle); }
.card-header-actions { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-regular); }
.shadow-sm { box-shadow: var(--shadow-xs) !important; }

/* A table that runs edge to edge in a card lines its first and last columns up with the header. */
.card > .table, .card > .table-responsive > .table, .card-body.p-0 > .table, .card-body.p-0 > .table-responsive > .table { margin-bottom: 0; }
.card > .table > :not(caption) > * > :first-child,
.card > .table-responsive > .table > :not(caption) > * > :first-child,
.card-body.p-0 .table > :not(caption) > * > :first-child { padding-left: var(--space-5); }
.card > .table > :not(caption) > * > :last-child,
.card > .table-responsive > .table > :not(caption) > * > :last-child,
.card-body.p-0 .table > :not(caption) > * > :last-child { padding-right: var(--space-5); }
.card > .table-responsive:last-child > .table > tbody > tr:last-child > *,
.card > .table:last-child > tbody > tr:last-child > * { border-bottom: 0; }

/* ---- Tables ----------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: var(--color-surface-alt);
  --bs-table-striped-color: var(--color-text);
  --bs-table-hover-bg: var(--color-surface-alt);
  --bs-table-hover-color: var(--color-text);
  --bs-table-active-bg: var(--color-primary-soft);
  --bs-table-active-color: var(--color-text);
  color: var(--color-text);
}
.table > :not(caption) > * > * { padding: 10px 12px; }
.table > thead > tr > th {
  font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: .02em; color: var(--color-text-muted);
  white-space: nowrap; border-bottom-color: var(--color-border);
}
.table-sm > :not(caption) > * > * { padding: 6px 8px; }
.table-hover > tbody > tr:focus-within > * { --bs-table-bg-state: var(--bs-table-hover-bg); }
.table > tbody > tr.is-selected > * { --bs-table-bg-state: var(--color-primary-soft); }
.table > tbody > tr.is-selected > :first-child { box-shadow: inset 2px 0 0 var(--color-primary), inset 0 0 0 9999px var(--color-primary-soft); }
/* Positioned, so absolutely positioned content (a visually hidden header label) is clipped by the
   scroll box instead of widening the page. */
.table-responsive { position: relative; }
.table td.text-end { white-space: nowrap; }
.table td.text-end form { display: inline-block; }
.table .chip, .table .badge, .table code { white-space: nowrap; }
.table-row-link { color: var(--color-text); font-weight: var(--weight-semibold); }
.table-row-link:hover { color: var(--color-primary); }
/* Values never wrap onto a second line: a wide table scrolls sideways inside its box, and long
   text is cut short with an ellipsis, its full value in the tooltip. */
.table > :not(caption) > * > * { white-space: nowrap; }
.table .truncate {
  display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
.table .truncate.is-narrow { max-width: 14rem; }
.table .cell-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-left: var(--space-2); }

/* ---- Forms ------------------------------------------------------------------------------ */
.form-control, .form-select {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: var(--lh-md);
  padding: 7px 12px;
  transition: border-color var(--dur-xs) var(--ease-out), box-shadow var(--dur-xs) var(--ease-out);
}
.form-select { padding-right: 36px; }
.form-control:focus, .form-select:focus {
  background-color: var(--color-surface); color: var(--color-text);
  border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.form-control::placeholder { color: var(--color-text-subtle); opacity: 1; }
.form-control:disabled, .form-select:disabled { background-color: var(--color-surface-alt); color: var(--color-text-muted); }
.form-control-sm, .form-select-sm { font-size: var(--text-sm); line-height: var(--lh-sm); padding-top: 5px; padding-bottom: 5px; }
.form-select-sm { padding-left: 10px; }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235C6B75' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A0A0A8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-label { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-1); }
.form-text { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.form-check-input { background-color: var(--color-surface); border-color: var(--color-border-strong); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
[data-theme="dark"] .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B1220'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2368737F'/%3e%3c/svg%3e"); }
.form-check-label { color: var(--color-text); }
.form-range::-webkit-slider-thumb { background: var(--color-primary); }
.form-range::-moz-range-thumb { background: var(--color-primary); }
.input-group-text { background: var(--color-surface-alt); border-color: var(--color-border-strong); color: var(--color-text-muted); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }
.form-actions.start { justify-content: flex-start; }
fieldset legend { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* ---- Alerts ----------------------------------------------------------------------------- */
.alert {
  --bs-alert-padding-x: var(--space-4);
  --bs-alert-padding-y: var(--space-3);
  --bs-alert-margin-bottom: var(--space-4);
  --bs-alert-border-radius: var(--radius-md);
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.alert > .bi:first-child { font-size: 1.15em; line-height: var(--lh-md); flex-shrink: 0; }
.alert-body { flex: 1 1 auto; min-width: 0; }
.alert-success { --bs-alert-bg: var(--color-success-soft); --bs-alert-color: var(--color-success-ink); --bs-alert-border-color: var(--color-success); }
.alert-warning { --bs-alert-bg: var(--color-warning-soft); --bs-alert-color: var(--color-warning-ink); --bs-alert-border-color: var(--color-warning); }
.alert-danger  { --bs-alert-bg: var(--color-danger-soft);  --bs-alert-color: var(--color-danger-ink);  --bs-alert-border-color: var(--color-danger); }
.alert-info    { --bs-alert-bg: var(--color-info-soft);    --bs-alert-color: var(--color-info-ink);    --bs-alert-border-color: var(--color-info); }
.alert-primary { --bs-alert-bg: var(--color-primary-soft); --bs-alert-color: var(--color-text);        --bs-alert-border-color: var(--color-primary); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-bg: var(--color-surface-alt); --bs-alert-color: var(--color-text); --bs-alert-border-color: var(--color-border); }
.alert a:not(.btn), .alert .alert-link { color: inherit; text-decoration: underline; font-weight: var(--weight-medium); }
.alert code { background: transparent; color: inherit; padding: 0; }
.alert-close {
  margin-left: auto; flex-shrink: 0; border: 0; background: transparent; color: inherit; opacity: .7;
  width: 24px; height: 24px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center;
}
.alert-close:hover { opacity: 1; background: rgba(127, 127, 127, .15); }

/* ---- Badges ----------------------------------------------------------------------------- */
.badge { --bs-badge-font-weight: var(--weight-medium); --bs-badge-border-radius: 999px; --bs-badge-padding-x: 8px; --bs-badge-padding-y: 3px; --bs-badge-font-size: var(--text-xs); }
.badge.bg-primary, .text-bg-primary { background-color: var(--color-primary) !important; color: var(--color-on-accent) !important; }
.badge.bg-success, .text-bg-success { background-color: var(--color-success) !important; color: var(--color-on-accent) !important; }
.badge.bg-danger, .text-bg-danger   { background-color: var(--color-danger) !important;  color: var(--color-on-accent) !important; }
.badge.bg-info, .text-bg-info       { background-color: var(--color-info) !important;    color: var(--color-on-accent) !important; }
.badge.bg-warning, .text-bg-warning { background-color: var(--color-warning) !important; color: #1A2028 !important; }
.badge.bg-secondary, .text-bg-secondary, .text-bg-dark { background-color: var(--color-surface-alt) !important; color: var(--color-text-muted) !important; }

/* ---- Lists, breadcrumbs, pagination, progress ------------------------------------------ */
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--color-text);
  --bs-list-group-border-color: var(--color-border);
  --bs-list-group-item-padding-x: var(--space-5);
  --bs-list-group-item-padding-y: var(--space-3);
  --bs-list-group-action-hover-bg: var(--color-surface-alt);
  --bs-list-group-action-hover-color: var(--color-text);
  --bs-list-group-active-bg: var(--color-primary-soft);
  --bs-list-group-active-color: var(--color-primary);
  --bs-list-group-active-border-color: var(--color-border);
}
.list-group-item.is-current { background: var(--color-primary-soft); box-shadow: inset 2px 0 0 var(--color-primary); }

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--color-border-strong);
  --bs-breadcrumb-item-active-color: var(--color-text);
  --bs-breadcrumb-item-padding-x: var(--space-1);
  --bs-breadcrumb-margin-bottom: var(--space-2);
  --bs-breadcrumb-font-size: var(--text-sm);
  color: var(--color-text-muted);
  align-items: center;
}
.breadcrumb-item a { color: var(--color-text-muted); padding: 2px 4px; border-radius: var(--radius-xs); }
.breadcrumb-item a:hover { color: var(--color-primary); background: var(--color-surface-alt); text-decoration: none; }
.breadcrumb-item.active { font-weight: var(--weight-medium); }
.breadcrumb-item + .breadcrumb-item::before { padding-right: var(--space-1); }

.pagination {
  --bs-pagination-color: var(--color-text);
  --bs-pagination-bg: var(--color-surface);
  --bs-pagination-border-color: var(--color-border-strong);
  --bs-pagination-border-radius: var(--radius-sm);
  --bs-pagination-hover-color: var(--color-text);
  --bs-pagination-hover-bg: var(--color-surface-alt);
  --bs-pagination-hover-border-color: var(--color-border-strong);
  --bs-pagination-focus-color: var(--color-text);
  --bs-pagination-focus-bg: var(--color-surface-alt);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--color-focus-ring);
  --bs-pagination-active-color: var(--color-on-accent);
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-disabled-color: var(--color-text-subtle);
  --bs-pagination-disabled-bg: var(--color-surface);
  --bs-pagination-disabled-border-color: var(--color-border);
  --bs-pagination-font-size: var(--text-sm);
  --bs-pagination-padding-x: 10px;
  --bs-pagination-padding-y: 5px;
  gap: 4px;
}
.pagination .page-link { min-width: 32px; text-align: center; border-radius: var(--radius-sm) !important; margin-left: 0 !important; }

.progress, .progress-stacked {
  --bs-progress-height: 8px;
  --bs-progress-bg: var(--color-surface-alt);
  --bs-progress-bar-bg: var(--color-primary);
  --bs-progress-bar-color: var(--color-on-accent);
  --bs-progress-border-radius: 999px;
  --bs-progress-bar-transition: width var(--dur-md) var(--ease-out);
}

/* Stacked on a phone: each row becomes a small card, each cell shows its column name. The
   !important flags beat the edge-to-edge card padding and Bootstrap's cell rules, which are more
   specific selectors than these. */
@media (max-width: 640px) {
  .table.table-stack > thead { display: none; }
  .table.table-stack, .table.table-stack > tbody, .table.table-stack > tbody > tr { display: block; width: 100%; }
  .table.table-stack > tbody { padding: var(--space-2); }
  .table.table-stack > tbody > tr {
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--color-surface);
  }
  .table.table-stack > tbody > tr:last-child { margin-bottom: 0; }
  .table.table-stack > tbody > tr > td {
    display: flex !important; justify-content: space-between; align-items: baseline; gap: var(--space-3);
    width: 100%; min-width: 0; padding: 4px 0 !important; border: 0 !important;
    white-space: normal !important; text-align: right !important; box-shadow: none !important;
  }
  .table.table-stack > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex-shrink: 0; text-align: left; font-family: var(--font-sans);
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted);
  }
  .table.table-stack > tbody > tr > td.stack-title { display: block !important; text-align: left !important; padding-bottom: var(--space-2) !important; }
  .table.table-stack > tbody > tr > td.stack-actions { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2) !important; }
  .table.table-stack .stack-hide { display: none !important; }
  .table.table-stack .truncate { max-width: 100%; white-space: normal; }
}