/* ve-bootstrap.css: maps Bootstrap 5.1 onto the achromatic ve-* tokens.
   Visual only. Loaded after bootstrap + ve-tokens/ve-components. */

:root {
  --bs-body-bg: var(--ve-bg);
  --bs-body-color: var(--ve-ink);
  --bs-body-font-family: var(--ve-sans);
  --bs-font-sans-serif: var(--ve-sans);
  --bs-font-monospace: var(--ve-mono);
  --bs-primary: var(--ve-primary);
  --bs-secondary: var(--ve-muted);
  --bs-success: var(--ve-ok);
  --bs-info: var(--ve-muted);
  --bs-warning: var(--ve-warn);
  --bs-danger: var(--ve-err);
  --bs-light: var(--ve-surface-2);
  --bs-dark: var(--ve-ink);
  --bs-gray: var(--ve-muted);
  --bs-border-color: var(--ve-line);
}

body {
  background: var(--ve-bg);
  color: var(--ve-ink);
  font-family: var(--ve-sans);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-weight: 600; letter-spacing: -0.02em; }
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; letter-spacing: -0.01em; }
b, strong, .fw-bold, .fw-bolder, .fw-semibold { font-weight: 500 !important; }
hr { border-color: var(--ve-line); opacity: 1; }

a { color: var(--ve-ink); text-underline-offset: 3px; }
a:hover { color: var(--ve-ink); }
.link-primary, .link-secondary, .link-info, .link-success { color: var(--ve-ink) !important; }

/* Buttons */
.btn {
  height: auto;
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  border-radius: var(--ve-r);
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: none !important;
  background-image: none !important;
  text-transform: none;
}
.btn-sm { min-height: 32px; padding: 0.25rem 0.7rem; font-size: 0.8125rem; }
.btn-lg { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.95rem; }
.btn:focus, .btn:focus-visible { outline: 2px solid var(--ve-focus); outline-offset: 2px; }

.btn-primary, .btn-dark,
.btn-primary:disabled, .btn-primary.disabled {
  background: var(--ve-primary);
  border: 1px solid var(--ve-primary);
  color: var(--ve-primary-ink);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  background: var(--ve-primary-2);
  border-color: var(--ve-primary-2);
  color: var(--ve-primary-ink);
}

.btn-secondary, .btn-light, .btn-success, .btn-info, .btn-warning,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark,
.btn-outline-success, .btn-outline-info, .btn-outline-warning {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  color: var(--ve-ink);
}
.btn-secondary:hover, .btn-light:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover,
.btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover,
.btn-secondary:active, .btn-light:active, .btn-success:active, .btn-info:active, .btn-warning:active,
.btn-outline-primary:active, .btn-outline-secondary:active, .btn-outline-success:active,
.btn-outline-primary.active, .btn-outline-secondary.active, .btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary {
  background: var(--ve-surface-2);
  border-color: var(--ve-line-strong);
  color: var(--ve-ink);
}

.btn-danger { background: var(--ve-err); border: 1px solid var(--ve-err); color: #fff; }
.btn-danger:hover, .btn-danger:active { background: var(--ve-err); border-color: var(--ve-err); color: #fff; opacity: .9; }
.btn-outline-danger { background: var(--ve-surface); border: 1px solid var(--ve-line); color: var(--ve-err); }
.btn-outline-danger:hover, .btn-outline-danger:active { background: var(--ve-err-bg); border-color: var(--ve-err); color: var(--ve-err); }

.btn-link { color: var(--ve-ink); text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { color: var(--ve-muted); }
.btn-close:focus { box-shadow: none; outline: 2px solid var(--ve-focus); }

/* Cards */
.card {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-r);
  box-shadow: none !important;
  color: var(--ve-ink);
}
.card-header, .card-footer {
  background: var(--ve-surface) !important;
  border-color: var(--ve-line);
  color: var(--ve-ink) !important;
  font-weight: 500;
}
.card-header:first-child { border-radius: var(--ve-r) var(--ve-r) 0 0; }
.list-group-item { background: var(--ve-surface); border-color: var(--ve-line); color: var(--ve-ink); }
.list-group-item.active { background: var(--ve-surface-2); border-color: var(--ve-line); color: var(--ve-ink); }
.list-group-item-action:hover { background: var(--ve-surface-2); }

/* Forms */
.form-control, .form-select {
  background-color: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-r);
  color: var(--ve-ink);
  min-height: 36px;
  font-size: 0.875rem;
  box-shadow: none;
}
.form-control::placeholder { color: var(--ve-muted); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ve-line-strong);
  box-shadow: 0 0 0 2px var(--ve-focus);
  outline: none;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--ve-surface-2); }
.form-label, .col-form-label { font-weight: 500; font-size: 0.875rem; color: var(--ve-ink); }
.form-text { color: var(--ve-muted); }
.form-check-input { border-color: var(--ve-line-strong); background-color: var(--ve-surface); }
.form-check-input:checked { background-color: var(--ve-primary); border-color: var(--ve-primary); }
.input-group-text { background: var(--ve-surface-2); border-color: var(--ve-line); color: var(--ve-muted); border-radius: var(--ve-r); }

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--ve-surface-2);
  --bs-table-striped-color: var(--ve-ink);
  --bs-table-hover-bg: var(--ve-surface-2);
  --bs-table-hover-color: var(--ve-ink);
  --bs-table-active-bg: var(--ve-surface-2);
  color: var(--ve-ink);
  border-color: var(--ve-line);
}
.table > :not(caption) > * > * { border-bottom-color: var(--ve-line); }
.table > :not(:first-child) { border-top: 1px solid var(--ve-line); }
.table thead th, .table > thead > tr > th {
  color: var(--ve-muted);
  font-weight: 500;
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
}
.table-dark, .table-light, .table-primary, .table-secondary, .table-info, .table-success, .table-warning {
  --bs-table-bg: var(--ve-surface-2);
  --bs-table-striped-bg: var(--ve-surface-2);
  color: var(--ve-ink);
  border-color: var(--ve-line);
}
.table-danger { --bs-table-bg: var(--ve-err-bg); color: var(--ve-ink); }

/* Badges */
.badge {
  font-weight: 500;
  border-radius: 999px;
  padding: 0.25em 0.6em;
  border: 1px solid var(--ve-line);
  background: var(--ve-surface) !important;
  color: var(--ve-ink) !important;
}
.badge.bg-success { background: var(--ve-ok-bg) !important; color: var(--ve-ok) !important; border-color: transparent; }
.badge.bg-warning { background: var(--ve-warn-bg) !important; color: var(--ve-warn) !important; border-color: transparent; }
.badge.bg-danger { background: var(--ve-err) !important; color: #fff !important; border-color: transparent; }
.badge.bg-primary, .badge.bg-dark { background: var(--ve-primary) !important; color: var(--ve-primary-ink) !important; border-color: transparent; }

/* Alerts */
.alert { border-radius: var(--ve-r); border: 1px solid var(--ve-line); background: var(--ve-surface); color: var(--ve-ink); box-shadow: none; }
.alert-success { background: var(--ve-ok-bg); border-color: var(--ve-line); color: var(--ve-ink); }
.alert-warning { background: var(--ve-warn-bg); border-color: var(--ve-line); color: var(--ve-ink); }
.alert-danger { background: var(--ve-err-bg); border-color: var(--ve-line); color: var(--ve-ink); }
.alert-primary, .alert-secondary, .alert-info, .alert-light, .alert-dark { background: var(--ve-surface-2); border-color: var(--ve-line); color: var(--ve-ink); }
.alert .alert-link { color: var(--ve-ink); }

/* Colour utilities -> neutral (status keeps a muted hue) */
.text-primary, .text-info, .text-dark { color: var(--ve-ink) !important; }
.text-secondary, .text-muted { color: var(--ve-muted) !important; }
.text-success { color: var(--ve-ok) !important; }
.text-warning { color: var(--ve-warn) !important; }
.text-danger { color: var(--ve-err) !important; }
.bg-primary, .bg-dark { background-color: var(--ve-primary) !important; color: var(--ve-primary-ink); }
.bg-secondary, .bg-info, .bg-light { background-color: var(--ve-surface-2) !important; }
.bg-white, .bg-body { background-color: var(--ve-surface) !important; }
.bg-success { background-color: var(--ve-ok-bg) !important; }
.bg-warning { background-color: var(--ve-warn-bg) !important; }
.bg-danger { background-color: var(--ve-err-bg) !important; }
.bg-gradient { background-image: none !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ve-line) !important; }
.border-primary, .border-info, .border-secondary { border-color: var(--ve-line-strong) !important; }
.border-success { border-color: var(--ve-ok) !important; }
.border-warning { border-color: var(--ve-warn) !important; }
.border-danger { border-color: var(--ve-err) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.text-uppercase { text-transform: none !important; }

/* Coloured FontAwesome icons -> muted */
i.fas.text-primary, i.fa.text-primary, i.fas.text-info, i.far.text-primary, i.far.text-info,
i.fas.text-secondary, i.fas.text-dark { color: var(--ve-muted) !important; }

/* Navbar / nav */
.navbar { background: var(--ve-surface) !important; border-bottom: 1px solid var(--ve-line); box-shadow: none !important; }
.navbar-dark .navbar-brand, .navbar-light .navbar-brand, .navbar-brand { color: var(--ve-ink) !important; font-weight: 600; }
.navbar .nav-link, .navbar-dark .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link { color: var(--ve-muted) !important; font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--ve-ink) !important; }
.navbar-dark .navbar-toggler { border-color: var(--ve-line); }
.nav-link { color: var(--ve-muted); }
.nav-link:hover, .nav-link:focus { color: var(--ve-ink); }
.nav-tabs { border-bottom-color: var(--ve-line); }
.nav-tabs .nav-link { border-radius: var(--ve-r) var(--ve-r) 0 0; }
.nav-tabs .nav-link:hover { border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--ve-ink); background: var(--ve-surface); border-color: var(--ve-line) var(--ve-line) var(--ve-surface);
  font-weight: 500;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ve-surface-2); color: var(--ve-ink); }

/* Overlays */
.modal-content {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-r);
  box-shadow: var(--ve-shadow-2);
  color: var(--ve-ink);
}
.modal-header, .modal-footer { border-color: var(--ve-line); background: var(--ve-surface) !important; color: var(--ve-ink) !important; }
.modal-title { font-weight: 500; }
.dropdown-menu {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-r);
  box-shadow: var(--ve-shadow-2);
  padding: 4px;
}
.dropdown-item { border-radius: calc(var(--ve-r) - 2px); color: var(--ve-ink); font-size: 0.875rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ve-surface-2); color: var(--ve-ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--ve-surface-2); color: var(--ve-ink); }
.dropdown-divider { border-color: var(--ve-line); }
.popover, .toast { border-color: var(--ve-line); border-radius: var(--ve-r); box-shadow: var(--ve-shadow-2); }

/* Progress */
.progress { background: var(--ve-surface-2); border-radius: 999px; }
.progress-bar { background-color: var(--ve-primary) !important; background-image: none !important; }
.progress-bar.bg-danger { background-color: var(--ve-err) !important; }

/* Code */
code { color: var(--ve-ink); font-family: var(--ve-mono); }
pre, .pre { font-family: var(--ve-mono); }