/* ==========================================================================
   VAI Platform — design system
   Bootstrap 5 only. No shadows, no gradients, no transforms on hover,
   no sticky save-bars. Emphasis on contrast, hierarchy, and visible
   key checkpoints.
   ========================================================================== */

:root {
  --vai-border-strong: #cfd4da;
  --vai-border-soft: #e5e8eb;
  --vai-surface-raised: #ffffff;
  --vai-surface-sunken: #f6f7f9;
  --vai-surface-accent: #eff5ff;
  --vai-text-strong: #1a1d21;
  --vai-text-muted: #6b7177;
  --vai-accent: var(--bs-primary);
  --vai-accent-strong: #0a58ca;
  --vai-success: #15803d;
  --vai-warning: #b45309;
  --vai-danger: #b91c1c;
  --vai-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --vai-radius: .5rem;
  --vai-radius-sm: .3125rem;
  --vai-row-h: 2.25rem;
}

/* --- Global base -------------------------------------------------------- */
html, body { background-color: var(--vai-surface-sunken); }
body {
  padding-top: 56px;
  color: var(--vai-text-strong);
  font-size: .9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; }
a:not(.nav-link):not(.dropdown-item):not(.btn):not(.breadcrumb-item a):hover { text-decoration: underline; }

h1, .h1 { font-size: 1.625rem; font-weight: 600; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
h3, .h3 { font-size: 1.1875rem; font-weight: 600; }
h4, .h4 { font-size: 1.0625rem; font-weight: 600; }
h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--vai-text-muted); }

code, kbd, samp, pre, .font-monospace { font-family: var(--vai-mono); }
.text-muted { color: var(--vai-text-muted) !important; }

hr { border-color: var(--vai-border-soft); opacity: 1; }

/* --- Top navbar --------------------------------------------------------- */
.navbar.fixed-top { border-bottom: 1px solid var(--vai-border-strong); }
.navbar-dark.bg-dark { background-color: #111418 !important; }
.navbar .navbar-brand { font-size: .9375rem; letter-spacing: -.01em; }
.navbar .navbar-text { font-size: .8125rem; }
.navbar .nav-link { color: rgba(255,255,255,.85); }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff; }
.navbar .dropdown-menu { border-color: var(--vai-border-strong); border-radius: var(--vai-radius); padding: .375rem 0; }
.navbar .dropdown-item { font-size: .875rem; padding: .4375rem 1rem; }

/* --- Sidebar ----------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  background-color: var(--vai-surface-raised);
  border-right: 1px solid var(--vai-border-strong);
  padding-bottom: 1rem;
}
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--vai-text-strong);
  font-size: .875rem;
  font-weight: 500;
  padding: .4375rem .75rem;
  margin: 0 .5rem;
  border-radius: var(--vai-radius-sm);
  border-left: 2px solid transparent;
}
.sidebar .nav-link i { font-size: 1rem; color: var(--vai-text-muted); width: 1.125rem; text-align: center; }
.sidebar .nav-link:hover { background-color: var(--vai-surface-sunken); color: var(--vai-accent-strong); }
.sidebar .nav-link:hover i { color: var(--vai-accent-strong); }
.sidebar .nav-link.active {
  color: var(--vai-accent-strong);
  background-color: var(--vai-surface-accent);
  border-left-color: var(--vai-accent);
  font-weight: 600;
  border-radius: 0 var(--vai-radius-sm) var(--vai-radius-sm) 0;
  margin-left: 0;
  padding-left: calc(.75rem + .5rem - 2px);
}
.sidebar .nav-link.active i { color: var(--vai-accent-strong); }
.sidebar .nav-link.disabled { color: var(--vai-text-muted); opacity: .55; pointer-events: none; }
.sidebar-heading {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vai-text-muted);
  padding: 1rem 1.25rem .375rem;
  margin: 0;
}
.sidebar > ul.nav.flex-column:first-of-type { margin-top: .5rem; }
.sidebar .nav-status {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 600;
  padding: .0625rem .375rem;
  border-radius: .75rem;
  background: var(--vai-surface-sunken);
  color: var(--vai-text-muted);
}

/* --- Main content area -------------------------------------------------- */
main {
  background-color: var(--vai-surface-sunken);
  min-height: calc(100vh - 56px);
}

/* Page header pattern */
.page-header {
  padding: 1rem 0 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--vai-border-soft);
}
.page-header .page-title { margin: 0; }
.page-header .page-subtitle { margin: .25rem 0 0; color: var(--vai-text-muted); font-size: .875rem; }
.page-header .page-actions .btn { font-size: .8125rem; padding: .375rem .75rem; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--vai-surface-raised);
  border: 1px solid var(--vai-border-strong);
  border-radius: var(--vai-radius);
  box-shadow: none;
}
.card + .card { margin-top: 1rem; }
.card-header {
  background: var(--vai-surface-raised);
  border-bottom: 1px solid var(--vai-border-soft);
  padding: .75rem 1rem;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin: 0; }
.card-header h5, .card-header h6 { font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--vai-text-strong); font-size: .9375rem; }
.card-header .card-subtitle { font-size: .8125rem; color: var(--vai-text-muted); margin-top: .1875rem; }
.card-body { padding: 1rem; }
.card-footer { background: var(--vai-surface-raised); border-top: 1px solid var(--vai-border-soft); padding: .75rem 1rem; }

/* Variants for key-checkpoint highlighting */
.card.card-checkpoint {
  border-left: 3px solid var(--vai-accent);
}
.card.card-checkpoint .card-header { background: var(--vai-surface-accent); }
.card.card-emphasis { border-color: var(--vai-text-strong); }
.card.card-warning { border-left: 3px solid var(--vai-warning); }
.card.card-danger { border-left: 3px solid var(--vai-danger); }

/* --- Section labels (key checkpoint legend) ----------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--vai-text-muted);
}
.section-label .section-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .375rem;
  border-radius: .25rem;
  background: var(--vai-text-strong);
  color: #fff;
  font-size: .6875rem;
}
.section-label.section-label-accent { color: var(--vai-accent-strong); }
.section-label.section-label-accent .section-step { background: var(--vai-accent); }
.section-label.section-label-success .section-step { background: var(--vai-success); }
.section-label.section-label-warning .section-step { background: var(--vai-warning); }

/* --- Status pills / dots ----------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .125rem .5rem;
  border-radius: .75rem;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--vai-border-strong);
  background: var(--vai-surface-raised);
  color: var(--vai-text-strong);
}
.status-pill .status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--vai-text-muted); display: inline-block; }
.status-pill.is-active { color: var(--vai-success); border-color: rgba(21,128,61,.3); background: rgba(21,128,61,.06); }
.status-pill.is-active .status-dot { background: var(--vai-success); }
.status-pill.is-pending { color: var(--vai-warning); border-color: rgba(180,83,9,.3); background: rgba(180,83,9,.06); }
.status-pill.is-pending .status-dot { background: var(--vai-warning); }
.status-pill.is-inactive { color: var(--vai-text-muted); }
.status-pill.is-danger { color: var(--vai-danger); border-color: rgba(185,28,28,.3); background: rgba(185,28,28,.06); }
.status-pill.is-danger .status-dot { background: var(--vai-danger); }

/* --- Buttons ------------------------------------------------------------ */
.btn { border-radius: var(--vai-radius-sm); font-weight: 500; font-size: .875rem; }
.btn-sm { font-size: .8125rem; padding: .3125rem .625rem; }
.btn-lg { font-size: .9375rem; padding: .625rem 1.25rem; }
.btn:focus-visible { outline: 2px solid var(--vai-accent); outline-offset: 2px; box-shadow: none; }
.btn-primary { background-color: var(--vai-accent); border-color: var(--vai-accent); }
.btn-primary:hover { background-color: var(--vai-accent-strong); border-color: var(--vai-accent-strong); }
.btn-outline-secondary { border-color: var(--vai-border-strong); color: var(--vai-text-strong); }
.btn-outline-secondary:hover { background: var(--vai-surface-sunken); border-color: var(--vai-border-strong); color: var(--vai-text-strong); }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--vai-radius-sm); border-bottom-left-radius: var(--vai-radius-sm); }
.btn-group .btn:last-child { border-top-right-radius: var(--vai-radius-sm); border-bottom-right-radius: var(--vai-radius-sm); }

/* Icon-only button helper */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }

/* --- Forms -------------------------------------------------------------- */
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .375rem;
  color: var(--vai-text-strong);
}
.form-label .text-danger { font-weight: 400; }
.form-label .help-tip {
  display: inline-flex;
  margin-left: .25rem;
  color: var(--vai-text-muted);
  cursor: help;
}
.form-label .help-tip:hover { color: var(--vai-accent-strong); }
.form-text { font-size: .8125rem; color: var(--vai-text-muted); margin-top: .25rem; }

.form-control, .form-select {
  font-size: .875rem;
  border-color: var(--vai-border-strong);
  border-radius: var(--vai-radius-sm);
  background-color: var(--vai-surface-raised);
}
.form-control:focus, .form-select:focus {
  border-color: var(--vai-accent);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.15);
}
.form-control::placeholder { color: #9aa0a6; }
.form-control[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--vai-surface-sunken); }
textarea.form-control { line-height: 1.45; }
textarea.form-control.font-monospace { line-height: 1.5; }

/* Input groups */
.input-group-text {
  background-color: var(--vai-surface-sunken);
  border-color: var(--vai-border-strong);
  font-size: .875rem;
  color: var(--vai-text-muted);
}

/* Field group: label + control + helper, consistent spacing */
.field-group { margin-bottom: 1rem; }
.field-group:last-child { margin-bottom: 0; }
.field-group .form-text { margin-top: .375rem; }

/* Inline field group (compact two-column form rows) */
.form-grid { display: grid; gap: 1rem; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Checkbox/radio */
.form-check-input:focus { box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); }
.form-check-input:checked { background-color: var(--vai-accent); border-color: var(--vai-accent); }

/* --- Tabs (Bootstrap nav-tabs polish) ----------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--vai-border-strong);
  margin-bottom: 1.25rem;
  gap: .125rem;
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--vai-text-muted);
  font-size: .875rem;
  font-weight: 500;
  padding: .625rem .875rem;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.nav-tabs .nav-link:hover { color: var(--vai-text-strong); border-bottom-color: var(--vai-border-strong); background: transparent; }
.nav-tabs .nav-link.active {
  color: var(--vai-accent-strong);
  border-bottom-color: var(--vai-accent);
  background: transparent;
  font-weight: 600;
}
.nav-tabs .nav-link .count {
  font-size: .6875rem;
  font-weight: 600;
  background: var(--vai-surface-sunken);
  color: var(--vai-text-muted);
  padding: .0625rem .375rem;
  border-radius: .625rem;
  border: 1px solid var(--vai-border-soft);
}

/* Vertical / pill sidebar tabs */
.nav-pills.nav-side {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  border-right: 1px solid var(--vai-border-soft);
  padding-right: 1rem;
}
.nav-pills.nav-side .nav-link {
  color: var(--vai-text-strong);
  background: transparent;
  border-radius: var(--vai-radius-sm);
  text-align: left;
  font-size: .875rem;
  padding: .4375rem .625rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.nav-pills.nav-side .nav-link:hover { background: var(--vai-surface-sunken); }
.nav-pills.nav-side .nav-link.active {
  background: var(--vai-surface-accent);
  color: var(--vai-accent-strong);
  font-weight: 600;
}

/* --- Chrome-style tabs --------------------------------------------------
   Pattern used for top-level section navigation within a page. The tab bar
   sits on a sunken surface and the active tab "punches through" into the
   content card below for a real browser-tab feel. Pure Bootstrap markup
   (ul.nav .nav-link .tab-content .tab-pane) — only the look is different.
   ------------------------------------------------------------------------ */
.nav-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  padding: .5rem .5rem 0;
  background: var(--vai-surface-sunken);
  border: 1px solid var(--vai-border-strong);
  border-bottom: 1px solid var(--vai-border-strong);
  border-radius: var(--vai-radius) var(--vai-radius) 0 0;
  margin: 0;
  list-style: none;
}
.nav-chrome .nav-item { margin: 0; }
.nav-chrome .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: transparent;
  color: var(--vai-text-muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--vai-radius-sm) var(--vai-radius-sm) 0 0;
  padding: .4375rem .8125rem;
  margin-bottom: -1px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}
.nav-chrome .nav-link:not(.active) + .nav-link:not(.active)::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 25%;
  bottom: 25%;
  border-left: 1px solid var(--vai-border-soft);
}
.nav-chrome .nav-link:hover {
  background: var(--vai-surface-raised);
  color: var(--vai-text-strong);
  border-color: var(--vai-border-soft);
  border-bottom-color: transparent;
}
.nav-chrome .nav-link.active {
  background: var(--vai-surface-raised);
  color: var(--vai-accent-strong);
  border-color: var(--vai-border-strong);
  border-bottom: 1px solid var(--vai-surface-raised);
  font-weight: 600;
  z-index: 2;
}
.nav-chrome .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--vai-accent);
  border-radius: var(--vai-radius-sm) var(--vai-radius-sm) 0 0;
}
.nav-chrome .nav-link i { color: var(--vai-text-muted); }
.nav-chrome .nav-link.active i { color: var(--vai-accent-strong); }
.nav-chrome .nav-link .badge { font-size: .625rem; padding: .125rem .375rem; }
.nav-chrome .nav-link.is-checkpoint::before {
  content: "★";
  color: var(--vai-accent);
  margin-right: .25rem;
  font-size: .75rem;
  line-height: 1;
}
.nav-chrome .nav-chrome-spacer { flex: 1; }
.nav-chrome .nav-link.nav-link-utility {
  margin-left: auto;
  background: var(--vai-surface-raised);
  border-color: var(--vai-border-soft);
}
.nav-chrome .nav-link.nav-link-utility:hover { background: var(--vai-surface-accent); }

.chrome-content {
  background: var(--vai-surface-raised);
  border: 1px solid var(--vai-border-strong);
  border-top: none;
  border-radius: 0 0 var(--vai-radius) var(--vai-radius);
  padding: 1.25rem;
}
.chrome-content > .tab-pane > .card:first-child { margin-top: 0; }
.chrome-content > .tab-pane > .card:last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
  .nav-chrome { padding: .375rem .375rem 0; }
  .nav-chrome .nav-link { padding: .375rem .625rem; font-size: .75rem; }
  .chrome-content { padding: 1rem; }
}

/* --- Accordion (Bootstrap polish) --------------------------------------- */
.accordion-item { border-color: var(--vai-border-strong); }
.accordion-button {
  background-color: var(--vai-surface-raised);
  font-weight: 600;
  font-size: .9375rem;
  padding: .75rem 1rem;
  color: var(--vai-text-strong);
}
.accordion-button:not(.collapsed) {
  background-color: var(--vai-surface-accent);
  color: var(--vai-accent-strong);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); border-color: var(--vai-accent); }
.accordion-body { padding: 1rem; }

/* --- Tables ------------------------------------------------------------- */
.table {
  --bs-table-bg: var(--vai-surface-raised);
  font-size: .875rem;
  margin-bottom: 0;
  color: var(--vai-text-strong);
}
.table thead th {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vai-text-muted);
  background: var(--vai-surface-sunken);
  border-bottom: 1px solid var(--vai-border-strong);
  padding: .625rem .75rem;
  white-space: nowrap;
}
.table tbody td { padding: .625rem .75rem; vertical-align: middle; border-color: var(--vai-border-soft); }
.table-hover > tbody > tr:hover > * { background-color: var(--vai-surface-sunken); }
.table-actions .btn { padding: .125rem .375rem; font-size: .75rem; line-height: 1.2; }
.sort-header { color: inherit; white-space: nowrap; }
.sort-header:hover { color: var(--vai-accent-strong); text-decoration: none; }

.card > .table-responsive { border-radius: var(--vai-radius); }
.card > .table-responsive .table { margin-bottom: 0; }

/* --- Badges ------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .25rem .5rem; border-radius: .375rem; }
.badge.text-bg-light { background-color: var(--vai-surface-sunken) !important; color: var(--vai-text-strong) !important; border: 1px solid var(--vai-border-soft); }

/* --- Breadcrumbs ------------------------------------------------------- */
.breadcrumb {
  margin-bottom: .5rem;
  font-size: .8125rem;
  --bs-breadcrumb-divider-color: var(--vai-text-muted);
  --bs-breadcrumb-item-active-color: var(--vai-text-strong);
}
.breadcrumb-item a { color: var(--vai-text-muted); }
.breadcrumb-item.active { font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; padding: 0 .375rem; }

/* --- Dropdowns --------------------------------------------------------- */
.dropdown-menu {
  border-color: var(--vai-border-strong);
  border-radius: var(--vai-radius);
  padding: .375rem 0;
  font-size: .875rem;
}
.dropdown-item { padding: .4375rem 1rem; }
.dropdown-item:active, .dropdown-item.active { background-color: var(--vai-surface-accent); color: var(--vai-accent-strong); }
.dropdown-header { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vai-text-muted); padding: .5rem 1rem .25rem; }
.dropdown-divider { border-color: var(--vai-border-soft); }

/* --- Modals ------------------------------------------------------------ */
.modal-content { border: 1px solid var(--vai-border-strong); border-radius: var(--vai-radius); }
.modal-header { border-bottom-color: var(--vai-border-soft); padding: 1rem 1.25rem; }
.modal-footer { border-top-color: var(--vai-border-soft); padding: .75rem 1.25rem; }
.modal-title { font-size: 1rem; font-weight: 600; }

/* --- Toasts ------------------------------------------------------------ */
.toast-container { z-index: 1090; }
.toast { border: 1px solid var(--vai-border-strong); border-radius: var(--vai-radius); }

/* --- Alerts (use subtle backgrounds) ----------------------------------- */
.alert { border-radius: var(--vai-radius); padding: .75rem 1rem; font-size: .875rem; border-width: 1px; }
.alert-info { background-color: rgba(13,110,253,.06); border-color: rgba(13,110,253,.25); color: var(--vai-accent-strong); }
.alert-success { background-color: rgba(21,128,61,.06); border-color: rgba(21,128,61,.25); color: var(--vai-success); }
.alert-warning { background-color: rgba(180,83,9,.06); border-color: rgba(180,83,9,.25); color: var(--vai-warning); }
.alert-danger { background-color: rgba(185,28,28,.06); border-color: rgba(185,28,28,.25); color: var(--vai-danger); }
.alert .alert-link { color: inherit; text-decoration: underline; }

/* --- Tooltips & popovers ----------------------------------------------- */
.tooltip-inner {
  background-color: var(--vai-text-strong);
  color: #fff;
  font-size: .75rem;
  padding: .375rem .5rem;
  border-radius: var(--vai-radius-sm);
  max-width: 260px;
}
.tooltip .tooltip-arrow::before { border-top-color: var(--vai-text-strong); border-bottom-color: var(--vai-text-strong); }

/* --- KB Quick keys / kbd ---------------------------------------------- */
kbd {
  font-family: var(--vai-mono);
  font-size: .75rem;
  padding: .125rem .375rem;
  background: var(--vai-surface-raised);
  border: 1px solid var(--vai-border-strong);
  color: var(--vai-text-strong);
  border-radius: .25rem;
  box-shadow: none;
}

/* --- HTMX --------------------------------------------------------------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* --- Empty states ------------------------------------------------------- */
.empty-state {
  background: var(--vai-surface-raised);
  border: 1px dashed var(--vai-border-strong);
  border-radius: var(--vai-radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--vai-text-muted);
}
.empty-state .empty-state-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--vai-surface-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  margin-bottom: .875rem;
  color: var(--vai-text-muted);
}
.empty-state .empty-state-title { font-size: 1rem; font-weight: 600; color: var(--vai-text-strong); margin: 0 0 .25rem; }
.empty-state .empty-state-desc { font-size: .875rem; max-width: 32rem; margin: 0 auto 1rem; }

/* --- Utilities --------------------------------------------------------- */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hairline-top { border-top: 1px solid var(--vai-border-soft); }
.hairline-bottom { border-bottom: 1px solid var(--vai-border-soft); }
.bg-surface-sunken { background-color: var(--vai-surface-sunken) !important; }
.bg-surface-accent { background-color: var(--vai-surface-accent) !important; }
.text-accent { color: var(--vai-accent-strong) !important; }
.text-strong { color: var(--vai-text-strong) !important; }

/* Key value pair (data display) */
.kv {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  column-gap: 1.5rem;
  row-gap: .5rem;
  font-size: .875rem;
}
.kv dt {
  font-weight: 500;
  color: var(--vai-text-muted);
  text-transform: uppercase;
  font-size: .6875rem;
  letter-spacing: .04em;
  padding-top: .125rem;
}
.kv dd { margin: 0; color: var(--vai-text-strong); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 767.98px) {
  main { padding-left: 1rem !important; padding-right: 1rem !important; }
  .card-body { padding: .875rem; }
  .table th { font-size: .75rem; }
  .table-actions { display: flex; flex-direction: column; gap: .25rem; }
  .table-actions .btn { width: 100%; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar { width: 200px; }
  main { margin-left: 200px; }
}

@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.375rem; }
  h2, .h2 { font-size: 1.1875rem; }
  .d-sm-none-mobile { display: none !important; }
}

/* Mobile offcanvas mirror of sidebar */
.offcanvas.offcanvas-start { width: 280px; max-width: 85vw; border-right: 1px solid var(--vai-border-strong); }
.offcanvas-body .nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--vai-text-strong);
  font-size: .875rem;
  padding: .4375rem .75rem;
  margin: 0 .5rem;
  border-radius: var(--vai-radius-sm);
  border-left: 2px solid transparent;
}
.offcanvas-body .nav-link i { color: var(--vai-text-muted); width: 1.125rem; text-align: center; }
.offcanvas-body .nav-link:hover { background-color: var(--vai-surface-sunken); color: var(--vai-accent-strong); }
.offcanvas-body .nav-link.active {
  color: var(--vai-accent-strong);
  background-color: var(--vai-surface-accent);
  border-left-color: var(--vai-accent);
  font-weight: 600;
}
.offcanvas-body .sidebar-heading {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vai-text-muted);
  padding: 1rem 1.25rem .375rem;
  margin: 0;
}

/* Search dropdown */
#search-results-dropdown .card { max-height: 80vh; overflow-y: auto; }

/* Print */
@media print {
  .sidebar, .navbar, .page-actions, .btn { display: none !important; }
  body { padding-top: 0; background: #fff; }
  .card { border-color: #999; }
}