@font-face {
  font-family: "ABCDiatype";
  src: url("../fonts/ABCDiatype-Regular.cd58890ec058.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABCDiatype";
  src: url("../fonts/ABCDiatype-Medium.3d5390033f70.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABCDiatype";
  src: url("../fonts/ABCDiatype-Bold.ecb031a4e17a.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("../fonts/tiempos-headline-medium.29c8585b2821.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("../fonts/tiempos-fine-medium.6642fb3b4e25.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bs-font-sans-serif: "ABCDiatype", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-heading-font-family: "Tiempos Headline", georgia, serif;
  --bs-font-monospace: "ABCDiatype", "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
  --bs-secondary: #6a6b6b;
  --bs-secondary-rgb: 164, 166, 167;
  --bs-primary: #4B0050;
  --bs-primary-rgb: 75, 0, 80;
  --bs-info: #DC199B;
  --bs-info-rgb: 220, 25, 155;
  --beazley-dark-blue: #1b2052;
  --beazley-dark-blue-rgb: 27, 32, 82;
  --bs-body-color: var(--beazley-dark-blue);
  --bs-body-color-rgb: var(--beazley-dark-blue-rgb);
  --bs-emphasis-color: #1b2052;
  --bs-emphasis-color-rgb: 27, 32, 82;
}

html,
body,
button,
input,
optgroup,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-item,
.nav,
.navbar,
.pagination,
.badge,
.alert,
.list-group,
.table {
  font-family: var(--bs-body-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.navbar-brand,
.card-title,
.modal-title,
blockquote,
.blockquote {
  font-family: var(--bs-heading-font-family);
}

.lead,
.blockquote-footer,
figcaption,
.figure-caption {
  font-family: "Tiempos Fine", georgia, serif;
}


/* These styles are generated from project.scss. */

.sidebar-brand {
  padding: 1.75rem .5rem !important;
}

.sidebar-brand .brand-text {
  font-family: "Tiempos Headline", georgia, serif;
  font-weight: 500;
  font-size: 1rem;
  color: #dc199b;
}

/* Hide brand text completely when sidebar is collapsed */
.sidebar-mini.sidebar-collapse .brand-text {
  display: none !important;
}

/* Show brand text when hovering over collapsed sidebar */
.sidebar-mini.sidebar-collapse .app-sidebar:hover .brand-text {
  display: inline !important;
}

.breadcrumb {
  font-size: 0.8rem;
}

.text-dark {
  color: #1b2052 !important;
}


.timeline>div>.bi,
.timeline>div>.fab,
.timeline>div>.fad,
.timeline>div>.fal,
.timeline>div>.far,
.timeline>div>.fas,
.timeline>div>.ion,
.timeline>div>.svg-inline--fa {
  border-radius: 50%;
  font-size: 16px;
  height: 30px;
  left: 18px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 30px;
}

.badge {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.modal-backdrop {
  --bs-backdrop-opacity: 0.2 !important;
  background-color: #000 !important;
  opacity: 0.2 !important;
}


/* ==========================================================================
   BRAND COLOUR OVERRIDES
   ==========================================================================
   AdminLTE compiles Bootstrap via Sass, so :root variable changes alone do
   NOT propagate to compiled utility classes.  Every class that references a
   theme colour must be overridden explicitly.

   Brand palette
   ─────────────
   Primary   #4B0050  (dark purple)      — white text
   Info      #DC199B  (magenta / pink)   — white text
   Secondary #a4a6a7  (cool grey)        — dark text
   ========================================================================== */


/* ---------- INFO (#DC199B) ------------------------------------------------ */

/* background utilities */
.bg-info,
.bg-info.bg-gradient {
  background-color: #DC199B !important;
}

.text-bg-info {
  background-color: #DC199B !important;
  color: #fff !important;
}

.text-info {
  color: #DC199B !important;
}

.border-info {
  border-color: #DC199B !important;
}

.link-info {
  color: #DC199B !important;
}

.link-info:hover,
.link-info:focus {
  color: #b8147f !important;
}

/* buttons */
.btn-info {
  --bs-btn-bg: #DC199B;
  --bs-btn-border-color: #DC199B;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b8147f;
  --bs-btn-hover-border-color: #a61273;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #a61273;
  --bs-btn-active-border-color: #940f66;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #DC199B;
  --bs-btn-disabled-border-color: #DC199B;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 220, 25, 155;
}

.btn-outline-info {
  --bs-btn-color: #DC199B;
  --bs-btn-border-color: #DC199B;
  --bs-btn-hover-bg: #DC199B;
  --bs-btn-hover-border-color: #DC199B;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #DC199B;
  --bs-btn-active-border-color: #DC199B;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #DC199B;
  --bs-btn-disabled-border-color: #DC199B;
  --bs-btn-focus-shadow-rgb: 220, 25, 155;
}

/* alert */
.alert-info {
  --bs-alert-bg: #fce4f3;
  --bs-alert-border-color: #f5b3dc;
  --bs-alert-color: #83105d;
  --bs-alert-link-color: #6c0d4d;
}

/* list-group */
.list-group-item-info {
  --bs-list-group-color: #83105d;
  --bs-list-group-bg: #fce4f3;
  --bs-list-group-border-color: #f5b3dc;
  --bs-list-group-action-hover-color: #83105d;
  --bs-list-group-action-hover-bg: #f5d4ea;
  --bs-list-group-action-active-color: #83105d;
  --bs-list-group-action-active-bg: #f0c4e1;
}

/* table */
.table-info {
  --bs-table-bg: #fce4f3;
  --bs-table-border-color: #e4cede;
  --bs-table-color: #1b2052;
  --bs-table-striped-bg: #f0d9e8;
  --bs-table-striped-color: #1b2052;
  --bs-table-active-bg: #e4cede;
  --bs-table-active-color: #1b2052;
  --bs-table-hover-bg: #ead4e3;
  --bs-table-hover-color: #1b2052;
}

/* info-box icon (AdminLTE stat cards) */
.info-box-icon.text-bg-info {
  background-color: #DC199B !important;
  color: #fff !important;
}

/* callout */
.callout.callout-info,
.callout-info {
  --lte-callout-color: #83105d;
  --lte-callout-bg: #fce4f3;
  --lte-callout-border: #f5b3dc;
  --bs-callout-link-color: #6c0d4d;
  border-left-color: #DC199B;
}


/* ---------- PRIMARY (#4B0050) --------------------------------------------- */

/* background utilities */
.bg-primary,
.bg-primary.bg-gradient {
  background-color: #4B0050 !important;
}

.text-bg-primary {
  background-color: #4B0050 !important;
  color: #fff !important;
}

.text-primary {
  color: #4B0050 !important;
}

.border-primary {
  border-color: #4B0050 !important;
}

.link-primary {
  color: #4B0050 !important;
}

.link-primary:hover,
.link-primary:focus {
  color: #380040 !important;
}

/* buttons */
.btn-primary {
  --bs-btn-bg: #4B0050;
  --bs-btn-border-color: #4B0050;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #380040;
  --bs-btn-hover-border-color: #2e0035;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #2e0035;
  --bs-btn-active-border-color: #24002a;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #4B0050;
  --bs-btn-disabled-border-color: #4B0050;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 75, 0, 80;
}

.btn-outline-primary {
  --bs-btn-color: #4B0050;
  --bs-btn-border-color: #4B0050;
  --bs-btn-hover-bg: #4B0050;
  --bs-btn-hover-border-color: #4B0050;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #4B0050;
  --bs-btn-active-border-color: #4B0050;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #4B0050;
  --bs-btn-disabled-border-color: #4B0050;
  --bs-btn-focus-shadow-rgb: 75, 0, 80;
}

/* alert */
.alert-primary {
  --bs-alert-bg: #e8d5e9;
  --bs-alert-border-color: #c9a3cb;
  --bs-alert-color: #2d0030;
  --bs-alert-link-color: #1e0020;
}

/* list-group */
.list-group-item-primary {
  --bs-list-group-color: #2d0030;
  --bs-list-group-bg: #e8d5e9;
  --bs-list-group-border-color: #c9a3cb;
  --bs-list-group-action-hover-color: #2d0030;
  --bs-list-group-action-hover-bg: #dcc6dd;
  --bs-list-group-action-active-color: #2d0030;
  --bs-list-group-action-active-bg: #d0b7d2;
}

/* table */
.table-primary {
  --bs-table-bg: #e8d5e9;
  --bs-table-border-color: #d4c3d5;
  --bs-table-color: #1b2052;
  --bs-table-striped-bg: #ddcade;
  --bs-table-striped-color: #1b2052;
  --bs-table-active-bg: #d4c3d5;
  --bs-table-active-color: #1b2052;
  --bs-table-hover-bg: #d9c7d9;
  --bs-table-hover-color: #1b2052;
}

/* pagination active */
.page-item.active>.page-link,
.page-item.active>.page-link:hover,
.page-item.active>.page-link:focus {
  background-color: #4B0050;
  border-color: #4B0050;
  color: #fff;
}

/* info-box icon (AdminLTE stat cards) */
.info-box-icon.text-bg-primary {
  background-color: #4B0050 !important;
  color: #fff !important;
}

/* callout */
.callout.callout-primary,
.callout-primary {
  --lte-callout-color: #2d0030;
  --lte-callout-bg: #e8d5e9;
  --lte-callout-border: #c9a3cb;
  --bs-callout-link-color: #1e0020;
  border-left-color: #4B0050;
}


/* ---------- SECONDARY (#a4a6a7) ------------------------------------------- */

/* background utilities */
.bg-secondary,
.bg-secondary.bg-gradient {
  background-color: #a4a6a7 !important;
}

.text-bg-secondary {
  background-color: #a4a6a7 !important;
  color: #1b2052 !important;
}

.text-secondary {
  color: #a4a6a7 !important;
}

.border-secondary {
  border-color: #a4a6a7 !important;
}

.link-secondary {
  color: #a4a6a7 !important;
}

.link-secondary:hover,
.link-secondary:focus {
  color: #838586 !important;
}

/* buttons */
.btn-secondary {
  --bs-btn-bg: #6a6b6b;
  --bs-btn-border-color: #6a6b6b;
  --bs-btn-color: #1b2052;
  --bs-btn-hover-bg: #8b8d8e;
  --bs-btn-hover-border-color: #838586;
  --bs-btn-hover-color: #1b2052;
  --bs-btn-active-bg: #838586;
  --bs-btn-active-border-color: #7b7d7e;
  --bs-btn-active-color: #1b2052;
  --bs-btn-disabled-bg: #6a6b6b;
  --bs-btn-disabled-border-color: #6a6b6b;
  --bs-btn-disabled-color: #1b2052;
  --bs-btn-focus-shadow-rgb: 164, 166, 167;
}

.btn-outline-secondary {
  --bs-btn-color: #6a6b6b;
  --bs-btn-border-color: #6a6b6b;
  --bs-btn-hover-bg: #6a6b6b;
  --bs-btn-hover-border-color: #6a6b6b;
  --bs-btn-hover-color: #1b2052;
  --bs-btn-active-bg: #6a6b6b;
  --bs-btn-active-border-color: #6a6b6b;
  --bs-btn-active-color: #1b2052;
  --bs-btn-disabled-color: #6a6b6b;
  --bs-btn-disabled-border-color: #6a6b6b;
  --bs-btn-focus-shadow-rgb: 164, 166, 167;
}

/* alert */
.alert-secondary {
  --bs-alert-bg: #ededed;
  --bs-alert-border-color: #d5d6d6;
  --bs-alert-color: #626364;
  --bs-alert-link-color: #4e4f50;
}

/* list-group */
.list-group-item-secondary {
  --bs-list-group-color: #626364;
  --bs-list-group-bg: #ededed;
  --bs-list-group-border-color: #d5d6d6;
  --bs-list-group-action-hover-color: #626364;
  --bs-list-group-action-hover-bg: #e1e1e2;
  --bs-list-group-action-active-color: #626364;
  --bs-list-group-action-active-bg: #d5d5d6;
}

/* table */
.table-secondary {
  --bs-table-bg: #ededed;
  --bs-table-border-color: #d8d8d8;
  --bs-table-color: #1b2052;
  --bs-table-striped-bg: #e2e2e2;
  --bs-table-striped-color: #1b2052;
  --bs-table-active-bg: #d8d8d8;
  --bs-table-active-color: #1b2052;
  --bs-table-hover-bg: #dddddd;
  --bs-table-hover-color: #1b2052;
}

/* info-box icon (AdminLTE stat cards) */
.info-box-icon.text-bg-secondary {
  background-color: #a4a6a7 !important;
  color: #1b2052 !important;
}


/* ---------- FORM FOCUS & INTERACTIVE STATES ------------------------------- */

/* form focus ring uses primary */
.form-control:focus,
.form-select:focus {
  border-color: #9b6e9e;
  box-shadow: 0 0 0 0.25rem rgba(75, 0, 80, 0.25);
}

.form-check-input:focus {
  border-color: #9b6e9e;
  box-shadow: 0 0 0 0.25rem rgba(75, 0, 80, 0.25);
}

.form-check-input:checked {
  background-color: #4B0050;
  border-color: #4B0050;
}

.form-switch .form-check-input:checked {
  background-color: #4B0050;
  border-color: #4B0050;
}

/* nav / dropdown active */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: #4B0050;
  color: #fff;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #4B0050;
}

/* accordion active */
.accordion-button:not(.collapsed) {
  color: #4B0050;
  background-color: #f3e8f4;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(75, 0, 80, 0.25);
  border-color: #9b6e9e;
}

/* progress bar info */
.progress-bar.bg-info {
  background-color: #DC199B !important;
}

.progress-bar.bg-primary {
  background-color: #4B0050 !important;
}

/* spinner — explicit animation (bypass CSS-variable resolution issues) */
@keyframes spinner-border-spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border {
  animation: 0.75s linear infinite spinner-border-spin !important;
}

/* spinner colours */
.spinner-border.text-info,
.spinner-grow.text-info {
  color: #DC199B !important;
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: #4B0050 !important;
}


/* ---------- WORKFLOW STEPPER (custom) ------------------------------------- */

.workflow-stepper .nav-link {
  position: relative;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: #6c757d;
  background-color: #e9ecef;
}

.workflow-stepper .nav-link.done {
  background-color: #4B0050;
  color: #fff;
}

.workflow-stepper .nav-link.active {
  background-color: #DC199B;
  color: #fff;
}

.workflow-stepper .step-connector {
  width: 2rem;
  height: 2px;
  background-color: #dee2e6;
  align-self: center;
}

.workflow-stepper .nav-link.done+.step-connector {
  background-color: #4B0050;
}


/* ---------- RISK SCORE INDICATOR (custom) --------------------------------- */

.risk-score-card .risk-level {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.risk-score-card .risk-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-wrapper .sidebar-menu>.nav-item.menu-open>.nav-link {
  color: var(--lte-sidebar-hover-color);
  background-color: transparent;
}

/* ==========================================================================
   DJANGO-TABLES2 — CUSTOM TABLE STYLES
   ========================================================================== */

/* Sort icons in column headers */
.dt2-sort-link {
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
}

.dt2-sort-link:hover {
  color: var(--bs-primary);
}

.dt2-sort-icon {
  font-size: 0.7rem;
  opacity: 0.3;
  transition: opacity 0.15s ease;
}

.dt2-sort-icon.active {
  opacity: 0.85;
  color: var(--bs-primary);
}

.dt2-sort-link:hover .dt2-sort-icon {
  opacity: 0.7;
}

/* Table header cells */
.table thead.table-light th {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary);
  border-bottom-width: 2px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Table body rows */
.table>tbody>tr {
  transition: background-color 0.12s ease;
}

.table>tbody>tr>td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* Empty state */
.table td .bi-inbox {
  opacity: 0.25;
}

/* ─── Screening match results ─────────────────────────────────────── */

/* Compact progress bars used inline in tables */
.progress {
  border-radius: 3px;
}

/* Screening modal cards — consistent neutral headers */
#match-detail-modal .card {
  border-color: var(--bs-border-color);
}

#match-detail-modal .card-header {
  border-bottom-color: var(--bs-border-color);
}

/* ─── Screening grouped rows (expand/collapse) ───────────────────── */

.screening-parent-row.cursor-pointer {
  cursor: pointer;
}

.screening-parent-row.cursor-pointer:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.screening-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.screening-parent-row[aria-expanded="true"] .screening-toggle-icon {
  transform: rotate(90deg);
}

.screening-child-row>td {
  padding: 0 !important;
}

.screening-child-row .collapse,
.screening-child-row .collapsing {
  transition: height 0.25s ease;
}

/* ─── 3-level screening nesting backgrounds ──────────────────────── */

.screening-level-2-bg {
  background: var(--bs-gray-100);
  border-left: 3px solid var(--bs-gray-400);
}

.screening-level-3-bg {
  background: var(--bs-gray-200);
  border-left: 3px solid var(--bs-gray-500);
}

/* Scrollable match list container (Level 3) */
.screening-match-scroll {
  max-height: 500px;
  overflow-y: auto;
}

.navbar-badge {
  right: 9px;
  top: 3px;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 0.65rem;
  line-height: 1;
}

/* ==========================================================================
   KANBAN BOARD — Dashboard
   ========================================================================== */

.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

/* Small nudge to avoid content overlapping sticky header */
.fixed-header .app-main .app-content {
  padding-top: 0.75rem;
}

.kanban-column {
  flex: 1 1 0;
  min-width: 260px;
  display: flex;
  flex-direction: column;
}

.kanban-column .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.kanban-column .card-header {
  position: relative;
}

.kanban-column .card-body {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 720px;
  padding: 0.75rem;
}

/* coloured top-border accent per column */
.kanban-column--warning .card {
  border-top: 3px solid var(--bs-warning);
}

.kanban-column--info .card {
  border-top: 3px solid #DC199B;
}

.kanban-column--primary .card {
  border-top: 3px solid #4B0050;
}

.kanban-column--success .card {
  border-top: 3px solid var(--bs-success);
}

/* individual kanban card items */
.kanban-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.625rem;
  background: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.kanban-card:last-child {
  margin-bottom: 0;
}

.kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.kanban-card__ref {
  font-weight: 600;
  font-size: 0.875rem;
}

.kanban-card__meta {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.kanban-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

/* scrollbar styling for kanban columns */
.kanban-column .card-body::-webkit-scrollbar {
  width: 5px;
}

.kanban-column .card-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* Schema doc preview — make the vertical scrollbar always visible so
   users discover they can scroll the PDF pages. The container is
   ``overflow-y: scroll`` so the gutter is reserved even when contents
   fit; styling is forced via ``!important`` to win over any global
   scrollbar resets shipped by AdminLTE / OverlayScrollbars. */
.schema-doc-preview,
.schema-doc-preview * {
  scrollbar-width: auto !important;
  scrollbar-color: #6c757d #e9ecef !important;
}
.schema-doc-preview::-webkit-scrollbar,
.schema-doc-preview *::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  display: block !important;
  background: #e9ecef !important;
}
.schema-doc-preview::-webkit-scrollbar-track,
.schema-doc-preview *::-webkit-scrollbar-track {
  background: #e9ecef !important;
  border-radius: 8px;
}
.schema-doc-preview::-webkit-scrollbar-thumb,
.schema-doc-preview *::-webkit-scrollbar-thumb {
  background: #6c757d !important;
  border-radius: 8px;
  border: 3px solid #e9ecef !important;
  background-clip: padding-box !important;
  min-height: 40px;
}
.schema-doc-preview::-webkit-scrollbar-thumb:hover,
.schema-doc-preview *::-webkit-scrollbar-thumb:hover {
  background: #495057 !important;
  background-clip: padding-box !important;
}

/* Zoomed PDF pages are intentionally wider than the preview viewport. Keep
   the page stack at its content width so the preview owns the horizontal
   scrollbar instead of clipping the right side of the page. */
.schema-doc-preview {
  background: var(--bs-body-bg) !important;
  overflow-x: auto !important;
}

.schema-doc-preview [data-pdf-wrapper] {
  max-width: none !important;
  min-width: max-content;
}

.schema-preview-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.schema-preview-toolbar__start,
.schema-preview-toolbar__end {
  min-width: 0;
}

.schema-preview-toolbar__end {
  justify-content: flex-end;
}

.schema-preview-toolbar__center {
  justify-self: center;
}

@media (max-width: 767.98px) {
  .schema-preview-toolbar {
    grid-template-columns: 1fr;
  }

  .schema-preview-toolbar__center,
  .schema-preview-toolbar__end {
    justify-self: start;
  }
}

/* responsive: stack columns on smaller screens */
@media (max-width: 991.98px) {
  .kanban-board {
    flex-direction: column;
  }

  .kanban-column .card-body {
    max-height: 480px;
  }
}

.app-footer {
  min-height: auto;
  /* Stronger upward shadow to separate from content above. */
  box-shadow: 0 -10px 32px -6px rgba(15, 23, 42, 0.18),
              0 -2px 6px rgba(15, 23, 42, 0.12);
  border-top: 2px solid rgba(15, 23, 42, 0.12);
}

/* ── AI Citation Badges ──────────────────────────────────────────────── */
.citation-badge {
  vertical-align: baseline;
  text-decoration: none !important;
  line-height: 1;
}

.citation-badge .badge {
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.citation-badge:hover .badge {
  opacity: 0.8;
}

/* AI badge in table rows */
.ai-entity-badge,
.ai-asset-badge {
  font-size: 0.65rem;
}

/* PDF.js appends hidden measurement canvases to document.body. */
.hiddenCanvasElement {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 0;
  height: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* ── Citation Page Wrapper (canvas + text layer + highlights) ────────── */
.citation-page-wrapper {
  position: relative;
  display: none;
  /* toggled by JS */
}

.citation-page-wrapper canvas {
  display: block;
}

/* ── PDF.js Text Layer — transparent overlay for selection / copy ─────── */
.citation-page-wrapper .textLayer {
  position: absolute;
  text-align: initial;
  top: 0;
  left: 0;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.citation-page-wrapper .textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: crosshair;
  transform-origin: 0% 0%;
}

.schema-labelling-root[data-annotate="false"] .citation-page-wrapper .textLayer :is(span, br) {
  cursor: default;
}

.citation-page-wrapper .textLayer ::selection {
  background: rgba(0, 100, 200, 0.3);
}

.submission-step-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.submission-step-header__actions {
  row-gap: 0.75rem;
}

.submission-step-header__actions .wizard-step-actions {
  flex: 1 1 auto;
}

.submission-step-header__cta {
  flex: 0 0 auto;
}

.submission-step-header__title {
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.submission-step-header__title .h4 {
  line-height: 1.2;
}

@media (max-width: 767.98px) {

  .submission-step-header__actions .wizard-step-actions,
  .submission-step-header__cta {
    width: 100%;
  }

  .submission-step-header__actions {
    align-items: stretch !important;
  }
}

/* ── Review Modal Layout ───────────────────────────────────────────── */

.review-config-card,
.review-copy-card {
  border: 1px solid rgba(var(--bs-primary-rgb), 0.08);
  background:
    radial-gradient(circle at top right, rgba(var(--bs-info-rgb), 0.08), transparent 36%),
    linear-gradient(180deg, #fff 0%, #fcfafc 100%);
  box-shadow: 0 16px 36px rgba(27, 32, 82, 0.06);
}

.review-copy-card {
  background:
    radial-gradient(circle at top right, rgba(var(--bs-primary-rgb), 0.08), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f8f7fc 100%);
}

.review-config-icon {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #4B0050 0%, #7e2485 100%);
  box-shadow: 0 10px 20px rgba(75, 0, 80, 0.18);
}

.review-config-icon--secondary {
  background: linear-gradient(135deg, #DC199B 0%, #8a0f64 100%);
  box-shadow: 0 10px 20px rgba(220, 25, 155, 0.2);
}

.review-section-heading {
  letter-spacing: 0.08em;
}

.review-option-card {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.84);
}

.review-option-card--warning {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(var(--bs-primary-rgb), 0.03));
  border-color: rgba(255, 193, 7, 0.36);
}

.review-attestation-panel {
  border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  border-radius: 1.25rem;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.04), rgba(var(--bs-info-rgb), 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.review-attestation-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), 0.09);
  color: #4B0050;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-attestation-choice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  background: rgba(255, 255, 255, 0.9);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.review-attestation-choice.is-checked {
  border-color: rgba(var(--bs-info-rgb), 0.55);
  background: linear-gradient(135deg, rgba(var(--bs-info-rgb), 0.14), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 28px rgba(220, 25, 155, 0.08);
}

.review-attestation-input {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.review-attestation-input:checked {
  background-color: #DC199B;
  border-color: #DC199B;
}

.review-attestation-copy {
  min-width: 0;
  cursor: pointer;
}

.review-attestation-title {
  display: block;
  font-weight: 600;
  line-height: 1.55;
}

.review-attestation-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--bs-secondary);
  line-height: 1.5;
}

.review-attestation-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--bs-secondary);
}

.review-copy-card [data-attestation-target][disabled],
.modal-footer [data-attestation-target][disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (max-width: 991.98px) {

  .review-config-card .card-body,
  .review-copy-card .card-body,
  .review-attestation-panel {
    padding: 1.15rem !important;
  }
}

@media (max-width: 575.98px) {
  .review-attestation-choice {
    flex-direction: column;
  }

  .review-attestation-input {
    margin-top: 0;
  }
}

/* ── Wizard Document Drawer ──────────────────────────────────────────── */
/* Right-side drawer that replaces the modal-based document previewer.   */
/* Uses a flex layout with the main form content to push/resize when     */
/* the drawer opens.                                                     */

/*
 * AdminLTE layout-fixed sets .app-main { overflow: auto } which creates
 * an inner scroll container and breaks position:sticky on the drawer.
 * Override it back to visible for pages that use the wizard layout so
 * the drawer sticks relative to the viewport scroll.
 */
.app-main:has(.wizard-layout) {
  overflow: visible !important;
}

.wizard-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  position: relative;
}

.wizard-main-content {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-basis 0.3s ease;
}

.wizard-drawer {
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    width 0.3s ease,
    opacity 0.2s ease;
  position: sticky;
  top: calc(3.5rem + 1px + 0.5rem);
  height: calc(100vh - 3.5rem - 1px - 1rem);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  border-left: 1px solid transparent;
  background: #fff;
  z-index: 10;
  /* collapsed — takes no space */
}

.wizard-layout--drawer-open .wizard-drawer {
  flex: 0 0 50%;
  width: 50%;
  opacity: 1;
  overflow: visible;
  border-left-color: rgba(var(--bs-primary-rgb), 0.1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06);
}

.wizard-drawer__inner {
  position: static;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

/* ── Drawer Inner Layout ── */

.wizard-drawer__header {
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08);
  background: linear-gradient(180deg, #fcfafc 0%, #fff 100%);
}

.wizard-drawer__citation {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08);
  border-left: 3px solid var(--bs-info);
  background: rgba(var(--bs-primary-rgb), 0.02);
}

.wizard-drawer__citation details summary {
  list-style: none;
}

.wizard-drawer__citation details summary::before {
  content: "▸ ";
  font-size: 0.65rem;
  transition: transform 0.15s ease;
  display: inline-block;
}

.wizard-drawer__citation details[open] summary::before {
  content: "▾ ";
}

.wizard-drawer__toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #f8f9fa;
  min-height: 38px;
}

.wizard-drawer__body {
  flex: 1 1 0;
  overflow: auto;
  background: #f8f9fa;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.wizard-drawer__footer {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

/* Compact buttons inside drawer toolbar */
.btn-drawer-ctrl {
  padding: 0.15rem 0.35rem;
  font-size: 0.75rem;
  line-height: 1;
}

/* ── Drawer toggle button in action bar ── */
.btn-drawer-toggle {
  position: relative;
}

.btn-drawer-toggle .bi {
  transition: transform 0.2s ease;
}

.wizard-layout--drawer-open .btn-drawer-toggle .bi {
  transform: scaleX(-1);
}

/* ── Responsive Form Adjustments When Drawer Open ── */

.wizard-layout--drawer-open .wizard-main-content .card-body {
  padding: 1.25rem !important;
}

/* Ensure rows wrap when columns are forced wider */
.wizard-layout--drawer-open .wizard-main-content .row {
  flex-wrap: wrap !important;
}

/*
 * Stack all form columns to full-width when drawer is open.
 * Targets every Bootstrap col variant that crispy-forms / manual
 * templates may generate: col-md-4, col-md-6, col-md (auto),
 * col-md-auto (button), col-lg-3 (checkboxes).
 * col-md-12 and col-12 are already 100%.
 */
.wizard-layout--drawer-open .wizard-main-content .row>.col-md-4,
.wizard-layout--drawer-open .wizard-main-content .row>[class*="col-md-4"],
.wizard-layout--drawer-open .wizard-main-content .row>.col-md-6,
.wizard-layout--drawer-open .wizard-main-content .row>.col-md,
.wizard-layout--drawer-open .wizard-main-content .row>.col-md-auto {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Sanctioned territories checkboxes: keep multi-column grid */
.wizard-layout--drawer-open .wizard-main-content .row>.col-lg-3 {
  flex: 0 0 33.333% !important;
  width: 33.333% !important;
  max-width: 33.333% !important;
}

/* Reduce excess vertical spacing in crispy mb-3 wrappers */
.wizard-layout--drawer-open .wizard-main-content .mb-3 {
  margin-bottom: 0.5rem !important;
}

/* Entity / asset add-form: inline layout at full-width */
.wizard-layout--drawer-open .wizard-main-content .row>.col-md-auto .btn {
  width: auto;
}

/* ── Mobile / Tablet — Drawer overlays full-width ── */

@media (max-width: 991.98px) {
  .wizard-layout {
    flex-direction: column;
  }

  .wizard-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    z-index: 1050;
    border-left: none;
    transform: translateX(100%);
    transition:
      transform 0.3s ease,
      opacity 0.2s ease;
  }

  .wizard-drawer__inner {
    position: static;
    height: 100%;
  }

  .wizard-layout--drawer-open .wizard-drawer {
    flex: 0 0 100%;
    width: min(480px, 100vw);
    transform: translateX(0);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  }

  .wizard-layout--drawer-open .wizard-main-content .card-body {
    padding: 1rem !important;
  }

  .wizard-layout--drawer-open .wizard-main-content .row>.col-md-4,
  .wizard-layout--drawer-open .wizard-main-content .row>[class*="col-md-4"],
  .wizard-layout--drawer-open .wizard-main-content .row>.col-md,
  .wizard-layout--drawer-open .wizard-main-content .row>.col-md-auto,
  .wizard-layout--drawer-open .wizard-main-content .row>.col-md-6,
  .wizard-layout--drawer-open .wizard-main-content .row>.col-lg-3 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Drawer document selector ── */

#drawer-doc-select {
  font-size: 0.8rem;
}

/* ==========================================================================
   PROJECT CARDS (Product Designer Projects page & dashboard)
   ========================================================================== */

.project-card {
  border-radius: 0.75rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* Prevent any descendant overflow from blowing out the card / grid. */
  min-width: 0;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(27, 32, 82, 0.12) !important;
}

/*
 * Ensure the title block can shrink inside its flex row. Bootstrap's
 * `min-w-0` utility is not guaranteed to ship in every build, so we
 * pin it explicitly here. Without this, long unbreakable tokens in a
 * project name can push the card wider than its column and trigger
 * a horizontal scrollbar on narrow viewports.
 */
.project-card .min-w-0 {
  min-width: 0;
}

.project-card h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Title: single-line clamp with ellipsis at every breakpoint. Full name
 * remains available via the `title` tooltip on the <h3>.
 */
.project-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Description: responsive line-clamp matching the project grid
 * (row-cols-1 / sm-2 / lg-3 / xxl-4). Cards get narrower as columns
 * grow, so we tune the visible line count per breakpoint and let the
 * `title` tooltip surface the full text when clipped.
 */
.project-card-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 576px) {
  .project-card-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@media (min-width: 992px) {
  .project-card-description {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

@media (min-width: 1400px) {
  .project-card-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.project-card-stats {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 0.6rem;
}

.project-card-stats .col-4+.col-4 {
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

/* -- Avatar monogram (used by project cards & user avatars) -- */
.avatar-monogram {
  user-select: none;
  text-transform: uppercase;
}

/* -- Project wizard step indicator -- */
.wizard-steps {
  position: relative;
}

.wizard-steps .wizard-step-dot {
  position: relative;
  z-index: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* -- Project wizard scrollable panels (validation sets / runs) --
   Fix each list to a constant four-row height so the panels never grow or
   shrink with content. Fewer than four rows leaves reserved empty space;
   more than four scrolls internally. This keeps the page from ever growing a
   scrollbar and stops the layout jumping as rows are added or removed. */
.wizard-scroll-panel {
  height: 23rem;
  overflow-y: auto;
}

/* Fixed-height container for the overview accuracy chart. Keeps Chart.js
   (responsive + maintainAspectRatio:false) from shrinking on every re-render. */
.accuracy-chart-wrap {
  position: relative;
  height: 260px;
}

/* -- API keys table (releases / API tab) --
   Fix the keys list to a constant height (~4 rows) and scroll internally so
   adding keys never grows the card or stretches the paired Active deployment
   tile in the same equal-height row. The sticky header keeps column labels in
   view while scrolling. */
.api-keys-scroll {
  height: 15rem;
  overflow-y: auto;
}

.api-keys-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bs-card-bg, #fff);
}

/* -- Document-template configuration tables --
   Keep the long sections and mappings cards compact while preserving access
   to every row through an internal scrollbar. Five normal-height rows fit
   before scrolling starts; taller trigger descriptions may use the same
   bounded area without stretching the page. */
.template-config-scroll {
  max-height: 18rem;
  overflow-x: auto;
  overflow-y: auto;
}

.template-config-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bs-card-bg, #fff);
}

.template-config-scroll th:first-child,
.template-config-scroll td:first-child {
  padding-left: 0.75rem;
}

/* -- Fixed-height scrollable tables (runs, documents) --
   Constant-height scroll area so long tables scroll internally instead of
   growing the page. Sticky header keeps column labels visible while scrolling. */
.table-scroll {
  height: 34rem;
  overflow-y: auto;
}

.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bs-card-bg, #fff);
}

.project-runs-table {
  width: 100%;
  min-width: 58rem;
  table-layout: fixed;
}

.project-runs-table__run {
  width: 26%;
}

.project-runs-table__status,
.project-runs-table__mode,
.project-runs-table__documents {
  width: 10%;
}

.project-runs-table__triggered-by {
  width: 20%;
}

.project-runs-table__created {
  width: 16%;
}

.project-runs-table__action {
  width: 8%;
}

.project-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.project-settings-grid__row {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .project-settings-grid__row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .project-settings-grid__row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Clickable table rows (e.g. runs list). The whole row navigates via its
   data-href; show a pointer and a subtle hover to signal it. */
.runs-row {
  cursor: pointer;
}

.runs-row:hover {
  background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
}

/* -- Validation one-page layout (sets + runs) --
   Simple stacking container that spaces the sets card and the runs container.
   The compact per-panel caps above keep the whole page on one screen. */
.validation-onepage {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ==========================================================================
   IMAGE UPLOAD WIDGET (reusable across forms)
   ========================================================================== */

.image-upload {
  width: 100%;
}

.image-upload__zone {
  display: flex;
  width: 100%;
  min-height: 0;
  border: 2px dashed rgba(75, 0, 80, 0.25);
  border-radius: 0.5rem;
  background-color: rgba(75, 0, 80, 0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.image-upload__placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 0.75rem !important;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.image-upload__placeholder .bi {
  margin-bottom: 0.5rem !important;
  font-size: 1.5rem !important;
}

.image-upload__status {
  min-width: 0;
  flex-wrap: wrap;
}

.image-upload__status > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.image-upload--sm .image-upload__status {
  display: block !important;
}

.image-upload--sm .image-upload__status > span {
  display: block;
}

.image-upload__zone:hover,
.image-upload__zone:focus-within,
.image-upload__zone.is-dragover {
  border-color: var(--bs-primary);
  background-color: rgba(75, 0, 80, 0.06);
  outline: none;
}

.image-upload.has-image .image-upload__zone {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.08);
  background-color: #f8f9fa;
}

.image-upload__overlay {
  background-color: rgba(27, 32, 82, 0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.image-upload.has-image .image-upload__zone:hover .image-upload__overlay,
.image-upload.has-image .image-upload__zone:focus-within .image-upload__overlay {
  opacity: 1;
}

/* ==========================================================================
   PROJECT TABS (detail page)
   ========================================================================== */

.project-tabs .nav-link {
  color: var(--bs-body-color);
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.project-tabs .nav-link.disabled {
  color: var(--bs-body-tertiary-color);
  opacity: 0.7;
}

.project-tabs .nav-link.active {
  color: var(--bs-primary);
  border-bottom: 2px solid var(--bs-primary);
  background-color: transparent;
}

.project-tabs .nav-link .badge {
  font-size: 0.6rem;
  vertical-align: middle;
}

.project-detail-chrome {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.app-content > .container:has(.project-detail-chrome),
.app-content > .container-fluid:has(.project-detail-chrome) {
  width: 100%;
  max-width: none;
}

.project-tab-content:not(.project-tab-content--schema) {
  width: 100%;
  min-width: 0;
}

.project-tab-content--settings {
  max-width: 72rem;
}

.project-tab-content:not(.project-tab-content--schema) {
  --project-text-muted: #62666c;
  --project-border: #dce0e4;
  --project-radius: 0.5rem;
  --project-text-size: 0.875rem;
  --project-meta-size: 0.75rem;
  --bs-secondary-color: var(--project-text-muted);
  --bs-tertiary-color: var(--project-text-muted);
  line-height: 1.5;
}

.project-tab-content:not(.project-tab-content--schema) :is(h2, h3, h4, h5, h6, .card-title) {
  font-family: var(--bs-body-font-family);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}

.project-tab-content:not(.project-tab-content--schema) :is(h3, .card-title) {
  font-size: 1rem;
}

.project-tab-content:not(.project-tab-content--schema) :is(.small, small, .table, .btn-sm, .form-control-sm, .form-select-sm) {
  font-size: var(--project-text-size);
}

.project-tab-content:not(.project-tab-content--schema) :is(.badge, .badge-xs, .badge-tiny) {
  font-size: var(--project-meta-size);
  letter-spacing: 0;
}

.project-tab-content:not(.project-tab-content--schema) :is(.btn-sm, .form-control-sm, .form-select-sm) {
  min-height: 2rem;
}

.project-tab-content:not(.project-tab-content--schema) :is(.btn, .form-control, .form-select):focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.project-tab-content--operational .table > :not(caption) > * > * {
  padding: 0.625rem 0.75rem;
  border-bottom-color: var(--project-border);
}

.project-tab-content--operational .table th {
  font-weight: 500;
  white-space: nowrap;
}

.project-document-name {
  width: 40%;
  min-width: 18rem;
  max-width: 36rem;
  overflow-wrap: anywhere;
}

.project-document-name .d-inline-flex > span {
  min-width: 0;
}

.runs-row a:is(:hover, :focus-visible) {
  text-decoration: underline !important;
}

.project-tab-content:not(.project-tab-content--schema) :is(.card, .kpi-tile, .info-box) {
  border: 1px solid var(--project-border) !important;
  border-radius: var(--project-radius);
  box-shadow: none !important;
}

.project-tab-content:not(.project-tab-content--schema) .kpi-tile__value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.project-tab-content:not(.project-tab-content--schema) .kpi-tile__label {
  margin-top: 0.25rem;
  font-size: var(--project-text-size);
  line-height: 1.4;
  color: var(--project-text-muted);
}

.project-tab-content--operational .card.project-section {
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

.project-tab-content--operational .project-section > .card-header {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--project-border) !important;
  background: transparent !important;
  flex-wrap: wrap;
}

.project-tab-content--operational .project-section > .card-body {
  padding: 1rem 0 !important;
}

.project-tab-content--operational .project-section > .card-body > .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--project-border);
}

/* -- Releases / API page -----------------------------------------------
   Give the operational API surface a bounded enterprise layout without
   changing the shared project-tab treatment used by the other pages. */
.project-tab-content--releases {
  width: min(100%, 100rem);
  margin-inline: auto;
}

body:has(.project-tab-content--releases) .project-detail-chrome h1.h4 {
  font-size: 1.375rem;
  font-weight: 600;
}

.project-tab-content--releases #releases-tab {
  gap: 1rem !important;
}

.project-tab-content--releases .card.api-page-surface {
  border: 1px solid var(--project-border) !important;
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  box-shadow: none !important;
  overflow: visible;
}

.project-tab-content--releases .project-section.api-page-surface > .api-page-surface__header {
  min-height: 3.25rem;
  padding: 1.15rem 1.5rem 0.95rem !important;
  border-bottom: 1px solid var(--project-border) !important;
  background: var(--bs-body-bg) !important;
}

.project-tab-content--releases .project-section.api-page-surface > .api-page-surface__body {
  padding: 1.35rem 1.5rem !important;
}

.project-tab-content--releases .api-page-secondary-row {
  align-items: stretch;
}

.project-tab-content--releases .api-page-secondary-row > [class*="col-"] > .api-page-surface,
.project-tab-content--releases .api-page-secondary-row > [class*="col-"] > #api-tab,
.project-tab-content--releases .api-page-secondary-row > [class*="col-"] > #api-tab > .api-page-surface {
  height: 100%;
}

.project-tab-content--releases .api-page-deployment .api-page-surface__body {
  min-height: 11.75rem;
}

.project-tab-content--releases .api-page-status {
  border: 0 !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}

.project-tab-content--releases .api-page-status--success {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.project-tab-content--releases .api-page-status--warning {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.project-tab-content--releases .api-page-status--muted {
  background: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-color);
}

.project-tab-content--releases .table {
  font-size: 0.8125rem;
}

.project-tab-content--releases .table thead th {
  color: var(--project-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.project-tab-content--releases .table > :not(caption) > * > * {
  padding: 0.75rem 1rem;
}

.project-tab-content--releases .table tbody td:first-child {
  font-weight: 600;
}

.project-tab-content--releases .api-page-primary-action {
  white-space: nowrap;
}

.project-tab-content--releases .api-page-manage-menu .dropdown-menu,
.project-tab-content--releases .dropdown-menu {
  min-width: 10rem;
  border: 1px solid var(--project-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgba(27, 32, 82, 0.1);
}

.project-tab-content--releases .api-keys-scroll {
  height: auto;
  max-height: 15rem;
}

/* -- Overview dashboard ----------------------------------------------- */
.project-tab-content--overview .kpi-tile {
  min-height: 7.25rem;
  padding: 1.1rem 1.2rem;
  border-color: var(--project-border);
  border-radius: 0.5rem;
  box-shadow: none !important;
}

.project-tab-content--overview .kpi-tile__value {
  font-size: 1.375rem;
  font-weight: 700;
}

.project-tab-content--overview .kpi-tile__label {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.project-tab-content--overview .kpi-tile__meta {
  margin-top: 0.15rem;
  color: var(--project-text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.project-tab-content--overview .overview-surface {
  border: 1px solid var(--project-border) !important;
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  box-shadow: none !important;
  overflow: hidden;
}

.project-tab-content--overview .overview-surface__header {
  min-height: 3.25rem;
  padding: 1rem 1.25rem 0.8rem !important;
  border-bottom: 1px solid var(--project-border) !important;
  background: var(--bs-body-bg) !important;
}

.project-tab-content--overview .overview-surface__body {
  padding: 1rem 1.25rem !important;
}

.project-tab-content--overview .overview-surface > .overview-surface__body.p-0 {
  padding: 0 !important;
}

.project-tab-content--overview .project-recent-run {
  grid-template-columns: minmax(0, 1.4fr) minmax(6rem, 0.75fr) 7rem minmax(0, 8rem);
}

.project-tab-content--overview .project-recent-run--header {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--project-border);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.project-tab-content--overview .project-recent-run--header > * {
  padding: 0;
}

.project-tab-content--overview .project-recent-run__details {
  display: contents;
}

.project-tab-content--overview .project-recent-run__status {
  justify-content: center;
}

.project-tab-content--overview .project-recent-run__time {
  justify-content: center;
}

.project-tab-content--overview .project-recent-run > :nth-child(2),
.project-tab-content--overview .project-recent-run > :nth-child(3),
.project-tab-content--overview .project-recent-run > :nth-child(4) {
  text-align: center;
  justify-content: center;
}

.project-tab-content--overview .project-recent-release {
  display: grid;
  grid-template-columns: minmax(4rem, 0.8fr) minmax(0, 1.6fr) minmax(6.5rem, 0.9fr) minmax(0, 1fr);
}

.project-tab-content--overview .project-recent-release > * {
  min-width: 0;
  padding: 0.75rem 0.75rem;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}

.project-tab-content--overview .project-recent-release--header {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--project-border);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.project-tab-content--overview .project-recent-release--header > * {
  padding: 0;
}

.project-tab-content--overview .project-recent-release > :nth-child(3),
.project-tab-content--overview .project-recent-release > :nth-child(4),
.project-tab-content--overview .project-recent-release--header > :nth-child(3),
.project-tab-content--overview .project-recent-release--header > :nth-child(4) {
  justify-content: center;
  text-align: center;
}

.project-tab-content--overview .project-recent-release__status {
  font-size: 0.75rem;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .project-tab-content--overview .project-recent-run {
    grid-template-columns: minmax(0, 1fr) 6rem;
  }

  .project-tab-content--overview .project-recent-run--header {
    display: none;
  }

  .project-tab-content--overview .project-recent-run > :nth-child(2) {
    grid-column: 1;
  }

  .project-tab-content--overview .project-recent-run__status {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: flex-end;
  }

  .project-tab-content--overview .project-recent-run__time {
    grid-column: 1;
    justify-content: flex-start;
  }

  .project-tab-content--overview .project-recent-release {
    grid-template-columns: minmax(0, 1fr) 6rem;
  }

  .project-tab-content--overview .project-recent-release--header {
    display: none;
  }

  .project-tab-content--overview .project-recent-release > :nth-child(2) {
    grid-column: 1;
  }

  .project-tab-content--overview .project-recent-release > :nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .project-tab-content--overview .project-recent-release > :nth-child(4) {
    grid-column: 1;
    justify-content: flex-start;
    text-align: start;
  }
}

@media (max-width: 1199.98px) {
  .project-tab-content--releases {
    width: 100%;
  }
}

.project-recent-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 12rem);
}

.project-recent-run > * {
  min-width: 0;
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}

.project-recent-run__details {
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.125rem;
}

.project-recent-run__status {
  justify-content: center;
}

.project-recent-run__time {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .project-recent-run {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .project-recent-run__details {
    grid-column: 1 / -1;
  }
}

.project-tab-content--operational .table-scroll {
  height: auto;
  max-height: 34rem;
}

.project-tab-content--operational .wizard-scroll-panel {
  height: auto;
  max-height: 23rem;
}

.project-tab-content--operational .api-keys-scroll {
  height: auto;
  max-height: 15rem;
}

/* Chart.js with ``maintainAspectRatio: false`` needs a bounded parent.  Keep
   the analytics cards at a stable height when their dashboard is replaced by
   HTMX; otherwise the canvas can use the card's content height as its own
   height and expand the page after every refresh. */
.analytics-chart-container {
  position: relative;
  height: 16rem;
  min-height: 16rem;
}

.analytics-kpi-group {
  margin-bottom: 1rem;
}

.analytics-kpi-group .row > div {
  flex: 1 1 14rem;
  width: auto;
}

.analytics-kpi-group .info-box {
  align-items: center;
  min-height: 4.5rem;
  margin-bottom: 0;
}

.analytics-kpi-group .info-box-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  background: #eef2f4 !important;
  color: #546778 !important;
  box-shadow: none !important;
  font-size: 1.125rem;
}

.analytics-kpi-group .info-box-text {
  white-space: normal;
  font-size: 0.875rem;
}

.analytics-kpi-group .info-box-number {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

#analytics-filter-form {
  margin: 0;
  column-gap: 0.5rem;
}

#analytics-filter-form > div {
  padding-right: 0;
  padding-left: 0;
}

#schema-step-root,
#schema-fields-popout-modal {
  --bs-secondary-color: #62666c;
  --bs-tertiary-color: #62666c;
  --bs-border-color: #dce0e4;
  font-size: 0.875rem;
  line-height: 1.5;
}

:is(#schema-step-root, #schema-fields-popout-modal) :is(h2, h3, h4, h5, h6) {
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

:is(#schema-step-root, #schema-fields-popout-modal) :is(.small, small, .table, .btn-sm, .form-control-sm, .form-select-sm) {
  font-size: 0.875rem;
}

:is(#schema-step-root, #schema-fields-popout-modal) :is(.badge, .form-text) {
  font-size: 0.75rem;
  letter-spacing: 0;
}

:is(#schema-step-root, #schema-fields-popout-modal) :is(.btn-sm, .form-control-sm, .form-select-sm) {
  min-height: 2rem;
}

:is(#schema-step-root, #schema-fields-popout-modal) :is(button, input, textarea, select, a):focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

#schema-step-root :is(.schema-sidebar-panel, .schema-pdf-viewer-column, .schema-label-details-panel) {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.5rem;
  box-shadow: none;
}

#schema-step-root .schema-sidebar-panels {
  gap: 0 !important;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}

#schema-step-root .schema-sidebar-panel {
  border: 0 !important;
  border-radius: 0;
  padding: 0.75rem;
}

#schema-step-root .schema-sidebar-panel--documents {
  flex: 0 1 auto;
  max-height: 30%;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

#schema-step-root .schema-sidebar-panel--fields {
  padding: 0;
}

#schema-step-root #schema-fields-panel > header {
  padding: 0.75rem;
  margin-bottom: 0 !important;
  background: var(--bs-body-bg);
}

#schema-step-root .schema-doc-pill {
  border-color: transparent;
  border-radius: 0.25rem;
  box-shadow: none;
  padding: 0.5rem;
  transform: none;
}

#schema-step-root .schema-doc-pill--active {
  box-shadow: inset 3px 0 0 var(--bs-primary);
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-field-coverage-table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-field-coverage-col-status {
  width: 4.5rem;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-field-coverage-table > thead th {
  padding: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  background: #f4f6f7;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-field-coverage-table > thead th:first-child {
  padding-left: 0.75rem;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-field-coverage-label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-field-coverage-table .schema-row-icon-btn {
  opacity: 1;
}

#schema-step-root .schema-preview-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem !important;
  padding: 0.75rem !important;
}

#schema-step-root .schema-preview-toolbar__start {
  justify-content: space-between;
  min-width: 0;
}

#schema-step-root .schema-preview-document-name {
  display: block;
  flex: 1 1 10rem;
  max-width: 100%;
}

#schema-step-root .schema-preview-toolbar__center {
  min-width: 0;
  width: 100%;
  justify-content: flex-start;
}

#schema-step-root .schema-pdf-search__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 4rem;
}

#schema-step-root .schema-pdf-search__count {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

#schema-step-root .schema-preview-toolbar__end {
  justify-content: space-between !important;
  width: 100%;
}

#schema-step-root [data-pdf-page-info] {
  min-width: 4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#schema-step-root .schema-pdf-viewer-column {
  padding-bottom: 0;
}

#schema-step-root .schema-doc-preview {
  background: #edf0f2 !important;
}

#schema-step-root :is(.schema-label-preview-shell, .schema-labelling-workstation) {
  background: transparent;
}

#schema-step-root .schema-field-inspector__title {
  white-space: normal;
  overflow-wrap: anywhere;
}

#schema-step-root .schema-field-inspector:has([data-inspector-empty]:not([hidden])) :is(.schema-field-inspector__header, .schema-field-inspector__tabs, .schema-field-inspector__footer) {
  display: none;
}

#schema-step-root .schema-field-inspector__empty {
  padding: 2rem 0.5rem;
  text-align: center;
}

#schema-step-root :is(.schema-field-inspector__header, .schema-field-inspector__body, .schema-field-inspector__footer) {
  padding: 0.75rem;
}

#schema-step-root .schema-field-inspector__tabs .nav-link {
  font-size: 0.875rem;
  min-height: 2.5rem;
}

#schema-step-root .schema-field-viewer-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.75rem;
  gap: 0.5rem;
}

#schema-step-root .schema-field-viewer-toolbar > :first-child {
  grid-area: 1 / 1;
  font-size: 1rem;
}

#schema-step-root .schema-field-inspector__footer {
  flex-wrap: wrap;
  gap: 0.5rem;
}

#schema-step-root .schema-field-inspector__footer .form-check {
  flex: 1 1 8rem;
}

#schema-step-root :is([data-label-detail-key], [data-label-detail-path]) {
  font-size: 0.75rem;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-top: 0.25rem;
}

#schema-step-root [data-label-detail-text] {
  min-height: 7rem;
  max-height: 16rem;
}

#schema-step-root .schema-array-editor-table :is(th, td),
#schema-step-root .schema-inspector-key-value-row__key {
  font-size: 0.875rem;
}

#schema-step-root .schema-array-editor-toolbar {
  position: static;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-file-control:focus-within {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-icon-button [data-loading-idle] .bi {
  margin-right: 0 !important;
}

:is(#schema-step-root, #schema-fields-popout-modal) .schema-status-chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

#schema-step-root #schema-fields-panel > header {
  gap: 0.375rem !important;
}

#schema-step-root #schema-fields-panel > header > .bi {
  display: none;
}

#schema-step-root #schema-fields-panel > header > .schema-fields-panel__actions {
  flex: 0 0 auto;
}

#schema-step-root .schema-field-inspector__header [data-label-detail-status] {
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  background: transparent !important;
  color: var(--bs-secondary-color) !important;
  border: 0 !important;
  padding: 0;
  font-weight: 400;
  margin-left: 0 !important;
}

#schema-step-root .schema-field-viewer-toolbar #ai-suggest-control {
  display: contents !important;
}

#schema-step-root .schema-field-viewer-toolbar [data-ai-suggest-start] {
  grid-area: 1 / 2;
}

#schema-step-root .schema-field-viewer-toolbar [data-ai-suggest-status] {
  grid-area: 2 / 1 / 3 / 3;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  line-height: 1.4;
}

#schema-step-root .schema-field-viewer-toolbar [data-ai-suggest-status]:empty {
  display: none;
}

#schema-step-root .schema-field-inspector__title {
  font-size: 1.125rem;
  font-weight: 500;
}

#schema-step-root .schema-field-inspector__metadata {
  font-size: 0.75rem;
  align-items: baseline !important;
}

#schema-step-root .schema-field-inspector__metadata [data-label-detail-status]::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--bs-border-color);
}

#schema-step-root .schema-ai-suggest-review {
  display: block;
  max-height: none;
  overflow: visible;
  padding: 0.75rem !important;
  background: #f4f6f7 !important;
}

#schema-step-root .schema-ai-suggest-review__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  min-height: 2rem;
}

#schema-step-root .schema-ai-suggest-review__summary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

#schema-step-root .schema-ai-suggest-review__summary::-webkit-details-marker {
  display: none;
}

#schema-step-root .schema-ai-suggest-review[open] > summary .bi {
  transform: rotate(180deg);
}

#schema-step-root .schema-ai-suggest-review__body {
  display: flex;
  flex-direction: column;
  max-height: min(30dvh, 20rem);
  overflow: hidden;
  padding-top: 0.5rem;
}

#schema-step-root .schema-ai-suggest-review__body > :not([data-ai-suggest-predictions]) {
  flex-shrink: 0;
}

#schema-step-root [data-ai-suggest-predictions] {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#schema-step-root .schema-ai-suggest-field-tabs {
  border-bottom: 1px solid var(--bs-border-color);
  gap: 0.75rem !important;
}

#schema-step-root .schema-ai-suggest-field-tabs .nav-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--bs-secondary-color);
  padding: 0.375rem 0;
  font-size: 0.875rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

#schema-step-root .schema-ai-suggest-field-tabs .nav-link.active {
  border-bottom-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 500;
}

#schema-step-root .schema-ai-suggest-card {
  flex: 0 0 auto;
  padding: 0.75rem !important;
  border-radius: 0.25rem !important;
}

#schema-step-root .schema-ai-suggest-card__content {
  flex-direction: column;
  align-items: stretch !important;
}

#schema-step-root .schema-ai-suggest-card__content > .flex-grow-1 {
  width: 100%;
}

#schema-step-root .schema-ai-suggest-card__path {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

#schema-step-root .schema-ai-suggest-card__value {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin-block: 0.375rem;
}

#schema-step-root .schema-ai-suggest-card .small {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

#schema-step-root .schema-ai-suggest-card__value dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.375rem 0.75rem;
  margin: 0;
  white-space: normal;
}

#schema-step-root .schema-ai-suggest-card__value dt {
  color: var(--bs-secondary-color);
  font-weight: 400;
}

#schema-step-root .schema-ai-suggest-card__value dd {
  margin: 0;
  white-space: pre-wrap;
}

#schema-step-root .schema-ai-suggest-card__actions {
  justify-content: flex-start !important;
  border-top: 1px solid var(--bs-border-color);
  padding-top: 0.5rem;
  gap: 0.5rem !important;
}

#schema-step-root .schema-inspector-citation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2rem 2rem;
  gap: 0.375rem;
  align-items: center;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0;
}

#schema-step-root .schema-inspector-citation-row__label {
  grid-column: 1 / -1;
}

#schema-step-root .schema-inspector-citation-row__label > * {
  white-space: normal;
  overflow-wrap: anywhere;
}

#schema-step-root .schema-inspector-citation-row > .badge {
  justify-self: start;
  font-weight: 500;
}

#schema-step-root .schema-inspector-citation-row > .btn {
  width: 2rem;
  height: 2rem;
}

#schema-step-root .schema-inspector-citation-row > [data-inspector-citation-view] {
  grid-column: 3;
}

#schema-step-root .schema-linked-regions-summary {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 0.75rem;
}

#schema-step-root [data-inspector-panel="meta"] dl {
  margin: 0;
  gap: 0;
}

#schema-step-root [data-inspector-panel="meta"] :is(dt, dd) {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

#schema-step-root .schema-ai-suggest-review__body > .d-flex > .d-flex {
  width: 100%;
}

#schema-step-root [data-ai-suggest-review-count] {
  flex: 1 0 100%;
}

#schema-step-root .schema-ai-suggest-review .h6,
#schema-step-root .schema-ai-suggest-review h2 {
  font-size: 0.875rem;
}

#schema-step-root .schema-field-inspector__header [data-label-detail-status].text-bg-danger {
  color: var(--bs-danger-text-emphasis) !important;
  font-weight: 600;
}

#schema-step-root .schema-field-inspector__header [data-label-detail-status].text-bg-warning {
  color: var(--bs-warning-text-emphasis) !important;
  font-weight: 600;
}

#schema-step-root .schema-field-coverage-table > tbody > tr > td.text-end {
  opacity: 1;
}

#schema-step-root .schema-coverage-editor-row form > .row > :is(.col-md-7, .col-md-5) {
  width: 100%;
}

#schema-step-root .triage-progress {
  height: 3px;
  border-radius: 0;
}

#schema-step-root #schema-fields-panel > .triage-progress {
  margin-bottom: 0 !important;
}

body:has(.project-tab-content--schema) .project-detail-chrome .avatar-sq {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  border-radius: 0.375rem;
}

@media (min-width: 992px) {
  #schema-step-root > .schema-panel-wrapper__left {
    flex: 0 0 clamp(21rem, 27%, 26rem);
    width: clamp(21rem, 27%, 26rem);
    max-width: 26rem;
  }

  #schema-step-root > .schema-panel-wrapper__middle {
    max-width: none;
  }

}

/* ------------------------------------------------------------------ */
/* Project workspace body — tab content layout.                       */
/* ------------------------------------------------------------------ */
.project-workspace-body {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.project-workspace-body__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* The schema labelling workstation uses the full project workspace width.
   Keep the flex containers shrinkable so the active preview owns its
   internal scroll areas without widening the page. */
body:has(.project-tab-content--schema) .project-workspace-body {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.project-workspace-body--schema {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

body:has(.project-tab-content--schema) .project-workspace-body__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.project-workspace-body--schema .project-workspace-body__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* ------------------------------------------------------------------ */
/* Schema workspace Bootstrap columns.                                 */
/* ------------------------------------------------------------------ */
.schema-step-layout {
  min-height: 0;
}

@media (min-width: 992px) {
  body:has(.project-tab-content--schema) .project-tab-content--schema {
    min-width: 0;
  }
}

.schema-panel-wrapper__left,
.schema-panel-wrapper__middle {
  min-width: 0;
  min-height: 0;
}

/* Desktop split: keep the documents/fields sidebar to a fixed 25% and
   let the previewer flex to fill ALL remaining horizontal space. This
   keeps the initial render and the HTMX out-of-band sidebar swap
   consistent so the PDF preview never leaves dead space on the right. */
@media (min-width: 992px) {
  .schema-panel-wrapper__left {
    flex: 0 0 25%;
    max-width: 25%;
    width: 25%;
  }

  .schema-panel-wrapper__middle {
    flex: 1 1 0%;
    max-width: 75%;
  }
}

.sidebar-expand-lg.layout-fixed .app-main {
  scrollbar-gutter: stable both-edges;
}

body:has(.project-detail-chrome) .app-main {
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
}

/* Schema detail tab: force the grid middle track to be shrinkable so
   app-main uses available height without clipping bottom controls. */
body:has(.project-tab-content--schema) .app-wrapper {
  grid-template-rows: min-content minmax(0, 1fr) min-content;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body:has(.project-tab-content--schema) .app-main {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Let the labelling cards use the full height of the flex-growing preview
   content; the document preview supplies its own internal bottom padding. */
body:has(.project-tab-content--schema) #schema-doc-panel-content {
  padding-bottom: 0;
}

/* Bootstrap's modal opens by adding ``padding-right`` to <body> to
   compensate for the scrollbar it removes. On the project detail pages
   the scrolling element is ``.app-main`` rather than <body>, so there
   is no body-level scrollbar to compensate for — the inline padding
   simply shifts the chrome sideways and back, producing a visible
   jiggle every time the confirm modal opens/closes. Neutralise the
   compensation; the overflow lock still applies for any descendant
   scroller. Also reserve scrollbar gutter on the root so the viewport
   width stays constant whether or not <html>/<body> shows a scrollbar
   (modal-open sets ``overflow: hidden`` on <body>, which would
   otherwise reclaim the scrollbar width on open and give it back on
   close, shifting the page sideways). */
html {
  scrollbar-gutter: stable;
}

body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

.project-tabs {
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  /* Stronger separation from the tab content below. The default
     Bootstrap .border-bottom (1px @ --bs-border-color) is too faint
     once the page is busy. Use a two-tone rule: a crisper hairline
     plus a soft shadow that fades into the content. */
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 8px -8px rgba(15, 23, 42, 0.08);
  padding-bottom: 0.25rem;
}

@media (max-width: 991.98px) {
  .project-tabs {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   EXPANDABLE TEXT (show more / show less)
   ========================================================================== */

.expandable-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.expandable-text__toggle {
  font-size: inherit;
  text-decoration: none;
}

.expandable-text__toggle:hover {
  text-decoration: underline;
}

/* Project hero avatar: guarantee fixed size even inside flex shrinks. */
.project-hero-avatar {
  flex: 0 0 auto;
}

/* -- Range slider (RangeSliderWidget) --
   Theme Bootstrap's .form-range to use --bs-primary for the thumb and
   a brand-tinted track. Covers WebKit, Firefox, and the focus ring. */
.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--bs-primary);
  filter: brightness(1.1);
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb:active {
  background-color: var(--bs-primary);
  filter: brightness(1.1);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-range::-webkit-slider-runnable-track {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.form-range::-moz-range-track {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.range-slider-value {
  border-color: rgba(var(--bs-primary-rgb), 0.25) !important;
}


/* ==========================================================================
   TOM SELECT (Select2-style searchable dropdowns)
   --------------------------------------------------------------------------
   The bundled tom-select.bootstrap5.min.css ships the dropdown at z-index:
   1000, which sits below Bootstrap modals (1055), offcanvas (1045) and our
   selection popovers (1080). Lift it above every standard chrome layer so
   the menu is never clipped or hidden when a Tom Select control is used
   inside a modal, an offcanvas, or near another floating panel.
   ========================================================================== */
.ts-wrapper.single .ts-dropdown,
.ts-wrapper.multi .ts-dropdown,
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
  z-index: 1090 !important;
}

/* ==========================================================================
   UX UTILITIES
   --------------------------------------------------------------------------
   Reusable primitives for KPI tiles, micro-badges, avatar chips and schema
   field rows. Token-driven (no hard-coded brand hex values) so they respect
   the brand palette defined at the top of this file.
   ========================================================================== */

/* ── KPI icon chip (40x40 rounded square) ────────────────────────────── */
.kpi-icon {
  --kpi-accent: var(--bs-primary-rgb);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  flex-shrink: 0;
  background-color: rgba(var(--kpi-accent), 0.1);
  color: rgb(var(--kpi-accent));
  font-size: 1rem;
}

.kpi-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background-color: #fff;
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.06);
  border-radius: 0.75rem;
  height: 100%;
}

.kpi-tile__value {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--bs-body-color);
}

.kpi-tile__label {
  font-size: 0.8rem;
  color: var(--bs-secondary);
  line-height: 1.2;
}

/* ── Tiny badge (used for status pills, version chips) ───────────────── */
.badge-xs {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.badge-tiny {
  font-size: 0.7rem;
  font-weight: 500;
}

/* ── Square avatar chips (used for project monograms / images) ───────── */
.avatar-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  flex-shrink: 0;
  object-fit: cover;
  color: #fff;
  font-family: var(--bs-heading-font-family);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.avatar-sq-48 {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.avatar-sq-56 {
  width: 56px;
  height: 56px;
  font-size: 1.1rem;
}

/* ── Schema field row hover + active states ──────────────────────────── */
/* Quiet list, not stacked cards. Each row reads as a line in a calm
   register; affordances appear on hover or when the row is active /
   focus-within. Keeps every existing data-* / sortable hook intact. */
.schema-field-row {
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.075));
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.schema-field-list > .schema-field-row:last-child,
.schema-field-children > .schema-field-row:last-child {
  border-bottom: 0;
}

/* Tighten the inner content row to the 8px rhythm so the list feels
   uniform with the rest of the labeller surfaces. */
.schema-field-row > .d-flex {
  padding: 0.25rem 0.5rem;
  min-height: 2rem;
}

.schema-field-row:hover {
  background-color: var(--bs-tertiary-bg);
}

/* Active row: soft primary tint + 2px left accent — no border / no
   shadow stack so neighbouring rows stay aligned. */
.schema-field-row.schema-field-row--active {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  box-shadow: inset 2px 0 0 0 var(--bs-primary);
}

/* Demote the "<key> · <Type>" subtitle into a quieter register; only
   show it at full opacity when the row is hovered or active so the
   default state reads as a list of labels, not a list of records. */
.schema-field-row .schema-field-coverage-select .font-monospace {
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  opacity: 0.7;
  transition: opacity 0.12s ease;
}

.schema-field-row:hover .schema-field-coverage-select .font-monospace,
.schema-field-row:focus-within .schema-field-coverage-select .font-monospace,
.schema-field-row.schema-field-row--active .schema-field-coverage-select .font-monospace {
  opacity: 1;
}

/* Progressive disclosure for row actions. The drag handle stays
   visible but low-contrast; edit/delete/add-child reveal on hover,
   focus-within, or when the row is active. ``visibility: hidden`` is
   intentionally NOT used — opacity keeps the buttons in the tab order
   so keyboard users can still reach them. */
.schema-field-row .schema-row-icon-btn:not(.schema-drag-handle) {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.schema-field-row:hover .schema-row-icon-btn:not(.schema-drag-handle),
.schema-field-row:focus-within .schema-row-icon-btn:not(.schema-drag-handle),
.schema-field-row.schema-field-row--active .schema-row-icon-btn:not(.schema-drag-handle) {
  opacity: 1;
}

/* Always render focused actions, even before hover, so keyboard
   navigation never lands on an invisible button. */
.schema-field-row .schema-row-icon-btn:focus-visible {
  opacity: 1;
}

/* Drag handle: present but quiet until the row is interacted with. */
.schema-field-row .schema-drag-handle {
  opacity: 0.35;
  transition: opacity 0.12s ease;
}

.schema-field-row:hover .schema-drag-handle,
.schema-field-row:focus-within .schema-drag-handle,
.schema-field-row.schema-field-row--active .schema-drag-handle {
  opacity: 0.8;
}

/* One-shot pulse when a row is freshly created or just re-activated by
   the server (schema:label-activated). Class is added by JS and removed
   on animationend so it stays a true one-shot. */
@keyframes schema-field-row-just-created {
  0% {
    box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle, #9ec5fe),
                0 0 0 0 rgba(75, 0, 80, 0.35);
  }
  60% {
    box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle, #9ec5fe),
                0 0 0 6px rgba(75, 0, 80, 0);
  }
  100% {
    box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle, #9ec5fe),
                0 0 0 0 rgba(75, 0, 80, 0);
  }
}

.schema-field-row.schema-field-row--just-created {
  animation: schema-field-row-just-created 800ms ease-out 1;
}

@keyframes schema-coverage-row-enter {
  0% {
    opacity: 0;
    transform: translateY(-6px);
    background-color: color-mix(in srgb, var(--bs-primary, #4b0050) 12%, transparent);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    background-color: transparent;
  }
}

.schema-field-coverage-table > tbody > tr.schema-field-row--just-created {
  animation: schema-coverage-row-enter 220ms ease-out 1,
             schema-field-row-just-created 800ms ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .schema-field-row.schema-field-row--just-created {
    animation: none;
  }

  .schema-field-coverage-table > tbody > tr.schema-field-row--just-created {
    animation: none;
  }
}

/* === Labeller work area — calm tokens, no new colours. ================== */
.labeller {
  --labeller-active-tint: rgba(var(--bs-primary-rgb), 0.08);
  --labeller-active-fill: rgba(var(--bs-primary-rgb), 0.06);
}

/* Three-segment pill — a horizontal pill-shaped track holding three
   equal-width segments. The active segment renders as a raised white
   pill; inactive segments stay transparent with muted text. Used by
   the schema-step triage filters (documents + field coverage). */
.three-segment-pill {
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  padding: 3px;
  background: var(--bs-tertiary-bg, #f1f3f5);
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.28);
  border-radius: 8px;
  gap: 0;
}

.three-segment-pill .segment {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 12px;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  line-height: 1.4;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.three-segment-pill .segment:hover,
.three-segment-pill .segment:focus-visible {
  color: var(--bs-body-color);
  background: transparent;
}

.three-segment-pill .segment.active {
  background: #fff;
  color: var(--bs-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.three-segment-pill .segment .count {
  color: inherit;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.three-segment-pill .segment.active .count {
  opacity: 0.75;
}

/* Slim completion bar shown below the triage pill — fills green as the
   user labels more fields/documents. Track stays light gray so it never
   competes with primary actions. */
.triage-progress {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--bs-tertiary-bg, #f1f3f5);
  overflow: hidden;
}

.triage-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--bs-success, #198754);
  transition: width 240ms ease;
}

.triage-progress.is-complete .triage-progress__fill {
  background: var(--bs-success, #198754);
  box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.15) inset;
}

/* Triage visibility: when the panel is filtered to "todo" hide complete
   rows; when filtered to "done" hide the rest. `all` shows everything.
   Works for both the coverage list (<tr>) and the field tree (<li>) rows —
   the tree never tags container rows, so containers always render and never
   accidentally hide their children. */
[data-triage-state="todo"] [data-field-triage="done"],
[data-triage-state="done"] [data-field-triage="todo"] { display: none; }

/* Required / Optional group headers in the coverage table. Sticky on
   scroll so the user always knows which bucket they're in, and quiet
   enough to never compete with the field rows. */
.schema-coverage-group__header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg);
  padding: 0.375rem 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
}

.schema-coverage-group:first-child .schema-coverage-group__header { border-top: 0; }

/* Hide an entire group header when no row beneath it is visible under the
   current triage filter. The inline panel JS toggles ``data-empty``. */
tr.schema-coverage-group[data-empty="1"] { display: none; }

/* Collapsed group descendants — hidden when their container's chevron is
   toggled. Class is applied/removed by ``bindCoverageCollapse`` in
   schema_step.js. */
.schema-field-coverage-table tr.schema-coverage-row--collapsed { display: none; }

/* Nested child editors can grow after the parent Bootstrap collapse has
   opened. Keep the editor's height content-driven so expanded children do
   not overflow over the parent field actions. */
.schema-coverage-editor-row > td > .collapse.show {
  height: auto !important;
}

/* Footer region for the field coverage table. Keeps the panel ending
   intentional in both states: actionable (todo exists) and complete. */
.schema-fields-footer {
  align-items: center;
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  min-height: 2.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Legacy control removed from templates; keep hidden if a stale
   HTMX fragment still carries it. */
[data-next-unlabelled],
[data-next-unlabelled-footer] {
  display: none !important;
}

.schema-fields-footer--complete {
  border-top: 0;
  justify-content: flex-start;
}

.schema-fields-complete-pill {
  align-items: center;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.375rem;
  line-height: 1;
  padding: 0.375rem 0.625rem;
}

.schema-field-row .schema-field-coverage-select {
  font-size: inherit;
  line-height: inherit;
}

.schema-field-row .schema-row-icon-btn {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.75rem;
  justify-content: center;
  min-height: 1.75rem;
  min-width: 1.75rem;
  width: 1.75rem;
}

.schema-field-row .schema-row-status-icon {
  flex: 0 0 auto;
}

.schema-field-row--ghost {
  opacity: 0.4;
}

/* ── Schema step: shared design primitives ───────────────────────────── */

/* Drag handle */
.schema-drag-handle {
  cursor: grab;
}
.schema-drag-handle:active {
  cursor: grabbing;
}

/* Nested children indent */
.schema-field-children {
  border-left: 2px dashed var(--bs-border-color);
}
.schema-field-children--empty {
  min-height: 2rem;
}

/* Icon rendering inside field rows */
.schema-field-row .bi,
.schema-field-row .schema-row-icon-btn .bi {
  line-height: 1;
  text-rendering: geometricPrecision;
}
.schema-field-row .schema-row-icon-btn .bi,
.schema-field-row .schema-row-status-icon .bi {
  font-size: 1rem;
}

/* Status chip — neutral container, semantic icon color */
.schema-row-status-icon {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.375rem;
  justify-content: center;
  width: 1.375rem;
}
.schema-row-status-icon--complete {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success);
}
.schema-row-status-icon--missing_required {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.schema-row-status-icon--optional,
.schema-row-status-icon--neutral {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary);
}

/* Field colour dot (in field row + coverage table) */
.schema-field-dot {
  border-radius: 999px;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
}

/* Upload zone — calm primary surface when no documents exist */
.schema-upload-dropzone {
  background-color: var(--bs-body-tertiary-bg);
  border: 1px dashed var(--bs-border-color);
  color: var(--bs-body-color);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.schema-upload-dropzone:hover,
.schema-upload-dropzone:focus-within {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-primary);
}

/* Compact upload affordance when documents already exist */
.schema-upload-compact {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bs-border-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.schema-upload-compact:hover,
.schema-upload-compact:focus-within {
  background-color: var(--bs-body-tertiary-bg);
  color: var(--bs-body-color);
}

/* Document pill in the left rail — quiet by default, accent only when active */
.schema-doc-pill {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.125rem 0.25rem rgba(15, 23, 42, 0.05);
  color: var(--bs-body-color);
  font-size: 0.875rem;
  padding: 0.45rem 0.65rem;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.schema-doc-pill:hover {
  background-color: var(--bs-tertiary-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.18);
  transform: translateY(-1px);
}
.schema-doc-pill--active {
  background-color: rgba(var(--bs-primary-rgb), 0.06);
  border-color: rgba(var(--bs-primary-rgb), 0.28);
  box-shadow: inset 3px 0 0 var(--bs-primary);
  color: var(--bs-body-color);
  font-weight: 600;
}

.schema-sidebar-panel--documents .schema-sidebar-panel-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.schema-sidebar-panel--documents .schema-document-list {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  min-width: 0;
}

.schema-sidebar-panel--documents .schema-document-list > li,
.schema-sidebar-panel--documents .schema-document-list .schema-doc-pill {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* Document triage panel — keep the list surface visually distinct while the
  surrounding sidebar panel owns vertical scrolling. */
[data-doc-coverage-panel] .schema-document-list {
  background: var(--bs-body-bg);
  border-radius: var(--bs-border-radius-sm);
}
/* Triage filter — hide rows whose bucket doesn't match the active
   state. ``all`` shows everything. */
[data-doc-coverage-panel][data-doc-triage-state="todo"] li[data-doc-triage="done"],
[data-doc-coverage-panel][data-doc-triage-state="done"] li[data-doc-triage="todo"] {
  display: none;
}

/* Side card — quiet container used for "Fields" and Advanced "Schema" panels */
.schema-side-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem;
}

/* Slightly stronger edge on the Fields card so it reads as a distinct
   working panel against the surrounding surface. */
#schema-fields-panel.schema-side-card {
  border-color: rgba(var(--bs-body-color-rgb, 27, 32, 82), 0.22);
}

/* Keep the Fields panel header (with the "Add label" button) visible
   even when the surrounding container scrolls. */
#schema-fields-panel > header {
  background-color: transparent;
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: 3;
  padding-block: 0.25rem;
}

/* The sidebar can be narrower than the combined title and action buttons.
   Let the action group shrink and wrap instead of letting the Add Field
   button overflow beyond the panel at smaller widths or higher zoom levels. */
#schema-fields-panel > header > .schema-fields-panel__actions {
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
}

#schema-fields-panel > header > .schema-fields-panel__actions > form,
#schema-fields-panel > header > .schema-fields-panel__actions > button,
#schema-fields-panel > header > .schema-fields-panel__actions label {
  max-width: 100%;
}

/* Field-tree scroll container (was an inline style) */
.schema-field-tree-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

/* Status chip used in the Fields coverage table */
.schema-status-chip {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
.schema-status-chip--complete {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}
.schema-status-chip--missing,
.schema-status-chip--missing_required {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.schema-status-chip--optional,
.schema-status-chip--partial {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary);
}

/* ── Field coverage table — quiet list, not a grid ──────────────────── */
/* The field coverage list (`.schema-field-coverage-table`) shares the
  intent of the field tree rows: read as a calm list, keep row actions
  visually quiet while they remain discoverable. No drag handle here — fields
   are created from the floating popover — but the same disclosure
   rhythm applies so the two surfaces feel consistent. */
.schema-field-coverage-table {
  border-collapse: separate;
  border-spacing: 0;
}

.schema-field-coverage-table-wrap {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.125rem 0.25rem rgba(15, 23, 42, 0.05);
  overflow: hidden;
  width: 100%;
}

/* Avoid a first-paint flash where all rows render expanded briefly
   before sessionStorage collapse state is re-applied by JS. */
.schema-field-coverage-table:not([data-coverage-collapse-ready="1"]) > tbody {
  visibility: hidden;
}

.schema-field-coverage-table > thead th {
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.075));
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  letter-spacing: 0.055em;
  padding: 0.45rem 0.5rem;
  text-transform: uppercase;
}

.schema-field-coverage-table > tbody > tr {
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group) > th,
.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group) > td {
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.075));
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
}

.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group):hover {
  background-color: rgba(var(--bs-primary-rgb), 0.03);
}

/* Active row: same soft primary tint + 2px left accent as the Advanced
   row. Keyed off the existing aria-pressed="true" that
   ``schema_labelling.js`` already sets on the select button — no JS or
   markup changes needed. */
.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group):has([data-field-coverage-select][aria-pressed="true"]) {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  box-shadow: inset 2px 0 0 0 var(--bs-primary);
}

/* Demote the "labelled / total" doc count — informational, not primary. */
.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group) > td.text-end {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  opacity: 0.7;
  transition: opacity 0.12s ease;
}

.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group):hover > td.text-end,
.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group):focus-within > td.text-end,
.schema-field-coverage-table > tbody > tr:not(.schema-coverage-group):has([data-field-coverage-select][aria-pressed="true"]) > td.text-end {
  opacity: 1;
}

/* Keep row actions visually quiet without hiding them from users. */
.schema-field-coverage-table .schema-row-icon-btn {
  opacity: 0.65;
  transition: opacity 0.12s ease;
}

.schema-field-coverage-table .schema-field-reorder-btn {
  opacity: 0.65;
}

.schema-field-coverage-table .schema-field-reorder-btn:hover,
.schema-field-coverage-table .schema-field-reorder-btn:focus-visible {
  opacity: 1;
}

.schema-field-coverage-table .schema-field-reorder-btn:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

.schema-field-coverage-table .schema-field-coverage-col-actions {
  min-width: 112px;
  width: 112px;
}

.schema-field-coverage-table > tbody > tr:hover .schema-row-icon-btn,
.schema-field-coverage-table > tbody > tr:focus-within .schema-row-icon-btn,
.schema-field-coverage-table > tbody > tr:has([data-field-coverage-select][aria-pressed="true"]) .schema-row-icon-btn,
.schema-field-coverage-table .schema-row-icon-btn:focus-visible {
  opacity: 1;
}

.schema-field-coverage-table > tbody > tr:hover .schema-field-delete-btn,
.schema-field-coverage-table > tbody > tr > td.text-end:hover .schema-field-delete-btn,
.schema-field-coverage-table > tbody > tr:focus-within .schema-field-delete-btn,
.schema-field-coverage-table .schema-field-delete-btn:focus-visible {
  opacity: 1 !important;
  color: var(--bs-danger) !important;
}

/* Drag-to-group affordance on the coverage table.
   The grip handle uses the standard hover-reveal rule above; when a
   drag is in progress, we lock the body cursor and highlight the row
   currently under the pointer as a drop target. */
.schema-row-grip {
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.125rem 0.375rem;
  touch-action: none;
}
.schema-row-grip:active {
  cursor: grabbing;
}
tr[data-field-coverage-row] {
  cursor: grab;
}
tr[data-field-coverage-row]:active {
  cursor: grabbing;
}
/* Saved-annotation reveal: brief glow when a user clicks a field row that
   already has a saved bbox on the current document. */
@keyframes schemaBboxFlash {
  0%   { box-shadow: 0 0 0 0 rgba(220, 25, 155, 0.65); }
  60%  { box-shadow: 0 0 0 10px rgba(220, 25, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 25, 155, 0); }
}
.schema-bbox-overlay--flash {
  animation: schemaBboxFlash 1.5s ease-out;
}

/* ── Project tabs: wrap on >= md, scroll only on small screens ───────── */
@media (min-width: 768px) {
  .project-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
}

/* ── Project card: settings cog appears on hover only ────────────────── */
.project-card .project-card-settings {
  opacity: 0;
  transition: opacity 0.12s ease;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
}

.project-card:hover .project-card-settings,
.project-card:focus-within .project-card-settings {
  opacity: 1;
}

/* Marketplace upload bar — hide the HTMX upload-status indicator when
   not active so it does not add phantom height to the form and misalign
   the Extract / Download / Back buttons in the run header. */
.marketplace-upload-bar .htmx-indicator {
  display: none !important;
}
.marketplace-upload-bar.htmx-request .htmx-indicator {
  display: inline-flex !important;
  margin-top: 0.5rem;
}

/* Replace AI Suggest's idle stars with its HTMX loading indicator while the
   start request is being dispatched. Server-rendered polling states keep the
   same spinner visible until indexing or suggestion generation completes. */
#ai-suggest-control [data-ai-suggest-start].htmx-request [data-ai-suggest-idle-icon] {
  display: none;
}

/* Shared button-level HTMX feedback. The triggering button receives
   .htmx-request for button-owned requests; submit forms receive it when the
   request is owned by the form. */
[data-loading-button].htmx-request [data-loading-idle],
[data-loading-form].htmx-request [data-loading-idle] {
  display: none !important;
}

[data-loading-button].htmx-request [data-loading-active],
[data-loading-form].htmx-request [data-loading-active] {
  display: inline-flex !important;
}

.document-upload-status__progress {
  accent-color: var(--bs-primary);
  height: 0.5rem;
  max-width: 8rem;
  width: 100%;
}

/* Wizard General / Model & processing steps reuse the shared settings cards
   (#settings-general-card / #settings-model-card). Inside the wizard step card
   those settings cards would otherwise render as a card-in-card (nested border +
   shadow), unlike the single, flat card on the project create page. Flatten the
   nested card so the wizard step reads as one clean card matching create.html.
   Scoped to .project-wizard-step-body so the standalone Settings tab keeps its
   own card chrome. */
.project-wizard-step-body #settings-general-card,
.project-wizard-step-body #settings-model-card {
  border: 0 !important;
  box-shadow: none !important;
}

.project-wizard-step-body #settings-general-card > .card-body,
.project-wizard-step-body #settings-model-card > .card-body {
  padding: 0 !important;
}

.schema-array-editor-table textarea {
  min-width: 10rem;
  resize: vertical;
}

.schema-array-editor-table th {
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.schema-array-editor [data-array-editor-row]:focus-within {
  background-color: color-mix(in srgb, var(--bs-primary) 5%, transparent);
}

.schema-array-editor [data-array-editor-target] {
  min-width: 2rem;
}

.schema-array-editor-table tbody > tr.schema-array-editor-row--active > td {
  background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent) !important;
  box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--bs-primary) 8%, transparent) !important;
}

.schema-array-editor [data-array-editor-row].schema-array-editor-row--hover {
  background-color: color-mix(in srgb, var(--bs-primary) 5%, transparent);
}

.schema-array-editor [data-array-editor-row].schema-array-editor-row--active.schema-array-editor-row--hover {
  background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

.schema-array-editor [data-array-editor-target].schema-array-editor-target--active {
  background-color: var(--bs-primary-bg-subtle);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-primary) !important;
  font-weight: 600;
}

.schema-array-editor [data-array-editor-node] {
  border-color: var(--bs-border-color) !important;
}

.schema-array-editor details > summary {
  cursor: pointer;
  list-style-position: inside;
}

.schema-array-editor details > summary button {
  cursor: pointer;
}

/* ── Structured validation comparison ──────────────────────────────── */
.structured-evaluation-toolbar {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(12rem, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.structured-evaluation-toolbar [data-structured-evaluation-count] {
  min-width: 4.5rem;
  text-align: right;
}

.structured-comparison-table {
  --structured-comparison-border: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
  table-layout: fixed;
  width: 100%;
}

.structured-comparison-table th,
.structured-comparison-table td {
  border-color: var(--structured-comparison-border);
  vertical-align: top;
}

.structured-comparison-table > thead th {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.structured-comparison-table > thead th:first-child {
  width: 18%;
}

.structured-comparison-table > thead th:last-child {
  width: 18%;
}

.structured-comparison-field {
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
}

.structured-comparison-table .structured-comparison-field {
  vertical-align: middle;
}

.structured-comparison-value {
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.structured-comparison-value--mismatch {
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis);
}

.structured-comparison-result {
  font-size: 0.78rem;
}

.structured-comparison-leaf-score {
  display: block;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  margin-top: 0.15rem;
}

.structured-comparison-node.run-citation-trigger {
  cursor: pointer;
}

.structured-comparison-node.run-citation-trigger:focus-visible,
.structured-comparison-group summary:focus-visible,
.structured-comparison-item summary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.structured-comparison-group {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  padding: 0.15rem 0.5rem 0.5rem;
}

.structured-comparison-group + .structured-comparison-group,
.structured-comparison-item + .structured-comparison-item {
  margin-top: 0.5rem;
}

.structured-comparison-group summary,
.structured-comparison-item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style-position: inside;
  min-height: 2.25rem;
  padding: 0.35rem 0.25rem;
}

.structured-comparison-group-title,
.structured-comparison-item-title {
  color: var(--bs-body-color);
  font-weight: 600;
  min-width: 8rem;
}

.structured-comparison-summary-text {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.structured-comparison-score {
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}

.structured-comparison-group-body {
  padding: 0.35rem 0.25rem 0.15rem 1.25rem;
}

.structured-comparison-item {
  border-left: 2px solid var(--bs-border-color);
  margin-left: 0.5rem;
  padding-left: 0.65rem;
}

.structured-comparison-item.is-mismatch {
  border-left-color: var(--bs-warning);
}

.structured-comparison-item-body {
  padding: 0.15rem 0 0.5rem 1rem;
}

.structured-comparison-item-summary .structured-comparison-mismatch-badge {
  font-size: 0.67rem;
  font-weight: 500;
}

.structured-comparison-table-wrap {
  max-width: 100%;
}

.structured-comparison-nested-row > td {
  background: transparent;
  border-bottom: 0;
  padding: 0.35rem 0.25rem;
}

.structured-comparison-nested-row > td > .structured-comparison-group {
  margin-left: 0.35rem;
}

.structured-comparison-group.is-mismatch {
  border-color: color-mix(in srgb, var(--bs-warning) 45%, var(--bs-border-color));
}

@media (max-width: 680px) {
  .structured-evaluation-toolbar {
    grid-template-columns: 1fr;
  }

  .structured-evaluation-toolbar [data-structured-evaluation-count] {
    text-align: left;
  }

  .structured-comparison-table {
    min-width: 38rem;
  }
}

/* ── Schema labeller: docked Field Inspector ───────────────────────── */
.schema-field-inspector {
  --schema-inspector-border: var(--bs-border-color-translucent);
  background: var(--bs-body-bg);
  min-width: 0;
}

.schema-labelling-header {
  isolation: isolate;
  min-width: 0;
  position: relative;
  z-index: 3;
}

.schema-labelling-header > [data-ai-suggest-start],
.schema-labelling-header > a {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.schema-labelling-header > [data-ai-suggest-status] {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-preview-document-name {
  flex: 0 1 clamp(10rem, 18vw, 22rem);
  min-width: 8rem;
}

.schema-field-viewer-toolbar {
  align-items: center;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--schema-inspector-border);
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
  min-height: 3rem;
  min-width: 0;
  padding: 0.55rem 0.8rem;
}

.schema-field-viewer-toolbar > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.schema-field-viewer-toolbar [data-ai-suggest-status] {
  max-width: 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-field-viewer-toolbar [data-ai-suggest-start] {
  flex: 0 0 auto;
}

.schema-field-viewer-splitter {
  align-items: center;
  background: transparent;
  cursor: col-resize;
  display: flex;
  justify-content: center;
  min-width: 0;
  outline: none;
  position: relative;
  touch-action: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
  z-index: 3;
}

.schema-field-viewer-splitter::after {
  background: var(--bs-secondary-color);
  border-radius: 999px;
  content: "";
  height: 2.5rem;
  opacity: 0.55;
  width: 2px;
}

.schema-field-viewer-splitter:hover,
.schema-field-viewer-splitter:focus-visible,
.schema-field-viewer-splitter.is-dragging {
  background: transparent;
  box-shadow: none;
}

.schema-field-viewer-splitter:hover::after,
.schema-field-viewer-splitter:focus-visible::after,
.schema-field-viewer-splitter.is-dragging::after {
  background: var(--bs-primary);
  opacity: 1;
}

body.schema-field-viewer-resizing {
  cursor: col-resize;
  user-select: none;
}

.run-document-choice-list {
  align-content: flex-start;
  max-height: 8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

.schema-field-inspector__header {
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--schema-inspector-border);
  flex: 0 0 auto;
  padding: 0.7rem 0.8rem 0.6rem;
  position: sticky;
  top: 0;
  z-index: 2;
}

.schema-field-inspector__title {
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}

.schema-field-inspector__tabs {
  background: var(--bs-body-bg);
  border-bottom-color: var(--schema-inspector-border);
  flex: 0 0 auto;
  padding: 0 0.45rem;
  position: sticky;
  top: 5.5rem;
  z-index: 2;
}

.schema-field-inspector__tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
  padding: 0.5rem 0.25rem;
}

.schema-field-inspector__tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 600;
}

.schema-field-inspector__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.8rem;
}

.schema-field-inspector__section[hidden],
.schema-field-inspector__value-panel[hidden] {
  display: none !important;
}

.schema-field-inspector__footer {
  align-items: center;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--schema-inspector-border);
  display: flex;
  flex: 0 0 auto;
  gap: 0.45rem;
  min-height: 3.25rem;
  padding: 0.65rem 0.8rem;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.schema-array-item-strip {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.schema-array-item-pill {
  align-items: center;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
}

.schema-array-item-pill.is-active {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
  color: var(--bs-primary-text-emphasis);
}

.schema-array-item-pill__status {
  font-size: 0.7rem;
}

.schema-array-editor-table {
  max-width: none;
  min-width: 100%;
  table-layout: fixed;
  width: max-content;
}

.schema-array-editor .table-responsive {
  overflow-x: hidden;
}

.schema-array-editor-scrollbar {
  background-color: var(--bs-body-bg, #fff);
  border-top: 1px solid var(--schema-inspector-border);
  box-shadow: 0 -0.4rem 0.7rem rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.95);
  isolation: isolate;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.15rem;
  position: sticky;
  bottom: 0;
  z-index: 4;
}

.schema-array-editor-scrollbar > div {
  height: 1px;
}

.schema-array-editor-toolbar {
  background: var(--bs-body-bg);
  position: sticky;
  top: 0;
  z-index: 3;
}

.schema-array-editor-table th,
.schema-array-editor-table td {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
  padding: 0.35rem;
  vertical-align: middle;
}

.schema-array-editor-table thead th {
  background: var(--bs-body-bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.schema-array-editor-add-compact {
  align-items: center;
  display: inline-flex;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

.schema-field-inspector .schema-array-editor-table > tbody > tr > td,
.schema-field-inspector .schema-array-editor-table > thead > tr > th {
  font-size: 0.75rem;
  padding: 0.35rem;
}

.schema-array-editor-table th:first-child,
.schema-array-editor-table td:first-child {
  width: 2.5rem;
}

.schema-array-editor-table th:nth-last-child(2),
.schema-array-editor-table td:nth-last-child(2) {
  width: 2.75rem;
}

.schema-array-editor-table th:last-child,
.schema-array-editor-table td:last-child {
  width: 3rem;
}

.schema-array-editor-table th:not(:first-child):not(:nth-last-child(2)):not(:last-child),
.schema-array-editor-table td:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
  min-width: 10rem;
}

.schema-array-editor-table textarea {
  min-height: 2.2rem;
  min-width: 0;
  resize: vertical;
  width: 100%;
}

.schema-inspector-key-value-row {
  align-items: start;
  border-bottom: 1px solid var(--schema-inspector-border);
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(6rem, 0.8fr) minmax(0, 1.2fr) auto;
  padding: 0.45rem 0;
}

.schema-inspector-key-value-row:last-child {
  border-bottom: 0;
}

.schema-inspector-key-value-row__key {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.schema-inspector-key-value-row__value {
  min-width: 0;
}

.schema-inspector-citation-row {
  align-items: center;
  border: 1px solid var(--schema-inspector-border);
  border-radius: var(--bs-border-radius-sm);
  display: flex;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
}

.schema-inspector-citation-row__label {
  flex: 1 1 auto;
  min-width: 0;
}

.schema-inspector-citation-row__label > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-linked-regions-summary:empty {
  display: none;
}

.schema-field-inspector [data-label-detail-text] {
  max-height: 8rem;
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .schema-field-inspector__header,
  .schema-field-inspector__tabs,
  .schema-field-inspector__footer {
    position: static;
  }

  .schema-field-inspector__body {
    max-height: 45dvh;
  }
}