/*!
 * Capteur Support Portal — site.css (UI shell)
 *
 * Mobile-first. All colours come from tokens.css (var(--cap-*)); never hardcode colours here or in module CSS.
 * Vocabulary (see wwwroot/css/README.md for markup examples):
 *   layout ........ .cap-shell .cap-sidebar .cap-topbar .cap-content .cap-page-header .page-actions
 *   surfaces ...... .cap-card .cap-section-title .cap-stack
 *   dashboards .... .kpi-card(--alert|--warning) .kpi-value .kpi-label .kpi-definition .chart-container(--sm|--md|--lg)
 *   tickets ....... .cap-timeline .cap-timeline-item(--internal|--status) .cap-internal-panel .cap-composer(--internal|--staff)
 *   lists/forms ... .cap-filter-bar .cap-table .cap-meta-list .cap-form-section .cap-help .text-prewrap
 *   states ........ .cap-empty-state .cap-loading .cap-skeleton .cap-error-state .cap-form-errors
 *   badges ........ .cap-badge(--status-*|--priority-*|--type|--sla-*|--scan-*|--visibility-*)
 */

/* =========================================================================================== Base */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The sticky .cap-topbar (rendered ≈ 4rem incl. padding/border) must not cover in-page jump targets
     (#reageren, #take-on), scrollIntoView() or controls that receive focus near the top of the viewport. */
  scroll-padding-top: calc(var(--cap-topbar-height) + var(--cap-space-4));
}

body {
  min-height: 100vh;
  font-family: var(--cap-font-sans);
  color: var(--cap-text);
  background-color: var(--cap-bg-app);
  line-height: var(--cap-line-height);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--cap-text);
  font-weight: var(--cap-font-weight-semibold);
  letter-spacing: -0.01em;
}

a {
  color: var(--cap-link);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--cap-link-hover);
}

code, kbd, pre, samp {
  font-family: var(--cap-font-mono);
}

::selection {
  background-color: var(--cap-brand-primary-subtle);
  color: var(--cap-text);
}

[hidden] {
  display: none !important;
}

/* Elements only meant for browsers without JavaScript (site.js adds .js to <html>). */
.js .js-hide-when-enabled {
  display: none !important;
}

/* =========================================================================================== Focus & skip link */

:focus-visible {
  outline: var(--cap-focus-ring-width) solid var(--cap-focus-ring);
  outline-offset: var(--cap-focus-ring-offset);
}

.btn:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
.btn-close:focus-visible,
.accordion-button:focus-visible {
  outline: var(--cap-focus-ring-width) solid var(--cap-focus-ring);
  outline-offset: var(--cap-focus-ring-offset);
  box-shadow: none;
}

.dropdown-item:focus-visible {
  outline-offset: -3px;
}

.cap-skip-link {
  position: absolute;
  top: 0;
  left: var(--cap-space-4);
  z-index: 2000;
  padding: var(--cap-space-2) var(--cap-space-4);
  border-radius: 0 0 var(--cap-radius) var(--cap-radius);
  background-color: var(--cap-brand-primary);
  color: var(--cap-brand-on-primary);
  font-weight: var(--cap-font-weight-semibold);
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--cap-transition);
}

.cap-skip-link:focus,
.cap-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--cap-brand-on-primary);
  outline-color: var(--cap-focus-ring);
}

main:focus {
  outline: none;
}

/* =========================================================================================== Bootstrap component mapping */

.btn {
  --bs-btn-font-weight: var(--cap-font-weight-semibold);
  --bs-btn-border-radius: var(--cap-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cap-space-2);
}

.btn-primary {
  --bs-btn-color: var(--cap-brand-on-primary);
  --bs-btn-bg: var(--cap-brand-primary);
  --bs-btn-border-color: var(--cap-brand-primary);
  --bs-btn-hover-color: var(--cap-brand-on-primary);
  --bs-btn-hover-bg: var(--cap-brand-primary-hover);
  --bs-btn-hover-border-color: var(--cap-brand-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--cap-brand-primary-rgb);
  --bs-btn-active-color: var(--cap-brand-on-primary);
  --bs-btn-active-bg: var(--cap-brand-primary-active);
  --bs-btn-active-border-color: var(--cap-brand-primary-active);
  --bs-btn-disabled-color: var(--cap-brand-on-primary);
  --bs-btn-disabled-bg: var(--cap-brand-primary);
  --bs-btn-disabled-border-color: var(--cap-brand-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--cap-brand-primary);
  --bs-btn-border-color: var(--cap-brand-primary);
  --bs-btn-hover-color: var(--cap-brand-on-primary);
  --bs-btn-hover-bg: var(--cap-brand-primary);
  --bs-btn-hover-border-color: var(--cap-brand-primary);
  --bs-btn-focus-shadow-rgb: var(--cap-brand-primary-rgb);
  --bs-btn-active-color: var(--cap-brand-on-primary);
  --bs-btn-active-bg: var(--cap-brand-primary-active);
  --bs-btn-active-border-color: var(--cap-brand-primary-active);
  --bs-btn-disabled-color: var(--cap-brand-primary);
  --bs-btn-disabled-border-color: var(--cap-brand-primary);
  background-color: var(--cap-surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--bs-btn-hover-bg);
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--cap-text);
  --bs-btn-bg: var(--cap-surface);
  --bs-btn-border-color: var(--cap-border-strong);
  --bs-btn-hover-color: var(--cap-text);
  --bs-btn-hover-bg: var(--cap-surface-hover);
  --bs-btn-hover-border-color: var(--cap-text-muted);
  --bs-btn-active-color: var(--cap-text);
  --bs-btn-active-bg: var(--cap-surface-sunken);
  --bs-btn-active-border-color: var(--cap-text-muted);
  --bs-btn-disabled-color: var(--cap-text-muted);
  --bs-btn-disabled-bg: var(--cap-surface-muted);
  --bs-btn-disabled-border-color: var(--cap-border);
}

.btn-danger {
  --bs-btn-color: var(--cap-brand-on-primary);
  --bs-btn-bg: var(--cap-danger-solid);
  --bs-btn-border-color: var(--cap-danger-solid);
  --bs-btn-hover-color: var(--cap-brand-on-primary);
  --bs-btn-hover-bg: var(--cap-danger-solid-hover);
  --bs-btn-hover-border-color: var(--cap-danger-solid-hover);
  --bs-btn-active-color: var(--cap-brand-on-primary);
  --bs-btn-active-bg: var(--cap-danger-solid-hover);
  --bs-btn-active-border-color: var(--cap-danger-solid-hover);
  --bs-btn-disabled-bg: var(--cap-danger-solid);
  --bs-btn-disabled-border-color: var(--cap-danger-solid);
}

.btn-outline-danger {
  --bs-btn-color: var(--cap-danger-fg);
  --bs-btn-border-color: var(--cap-danger-solid);
  --bs-btn-hover-color: var(--cap-brand-on-primary);
  --bs-btn-hover-bg: var(--cap-danger-solid);
  --bs-btn-hover-border-color: var(--cap-danger-solid);
  --bs-btn-active-color: var(--cap-brand-on-primary);
  --bs-btn-active-bg: var(--cap-danger-solid-hover);
  --bs-btn-active-border-color: var(--cap-danger-solid-hover);
  --bs-btn-disabled-color: var(--cap-danger-fg);
  --bs-btn-disabled-border-color: var(--cap-danger-solid);
  background-color: var(--cap-surface);
}

.btn-outline-danger:hover,
.btn-outline-danger:active {
  background-color: var(--bs-btn-hover-bg);
}

.btn-success {
  --bs-btn-color: var(--cap-brand-on-primary);
  --bs-btn-bg: var(--cap-success-solid);
  --bs-btn-border-color: var(--cap-success-solid);
  --bs-btn-hover-color: var(--cap-brand-on-primary);
  --bs-btn-hover-bg: var(--cap-success-fg);
  --bs-btn-hover-border-color: var(--cap-success-fg);
  --bs-btn-active-color: var(--cap-brand-on-primary);
  --bs-btn-active-bg: var(--cap-success-fg);
  --bs-btn-active-border-color: var(--cap-success-fg);
}

.btn-link {
  --bs-btn-color: var(--cap-link);
  --bs-btn-hover-color: var(--cap-link-hover);
  --bs-btn-active-color: var(--cap-link-hover);
  --bs-btn-font-weight: var(--cap-font-weight-medium);
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
}

/* Text utilities with too little contrast in stock Bootstrap. */
.text-warning {
  color: var(--cap-warning-fg) !important;
}

.text-bg-info {
  color: var(--cap-brand-on-primary) !important;
}

.text-body-secondary,
.text-muted {
  color: var(--cap-text-muted) !important;
}

/* Forms: white fields with a ≥ 3:1 border. */
.form-control,
.form-select {
  background-color: var(--cap-surface);
  border-color: var(--cap-border-strong);
  color: var(--cap-text);
}

.form-control::placeholder {
  color: var(--cap-text-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--cap-focus-ring);
  box-shadow: var(--cap-focus-ring-shadow);
  outline: 0;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--cap-surface-muted);
  color: var(--cap-text-muted);
}

.form-check-input {
  border-color: var(--cap-border-strong);
  background-color: var(--cap-surface);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--cap-brand-primary);
  border-color: var(--cap-brand-primary);
}

/* Keyboard focus on checkboxes, radios and switches: the same 3px outline as every other control (WCAG 2.4.7/1.4.11).
   Must stay AFTER the :focus and :checked rules above: they have equal specificity and would otherwise remove the
   outline (outline: 0) and reset the border, leaving only a faint glow on checked controls. */
.form-check-input:focus-visible {
  outline: var(--cap-focus-ring-width) solid var(--cap-focus-ring);
  outline-offset: var(--cap-focus-ring-offset);
  box-shadow: none;
}

/* Data URIs cannot read custom properties: this fill equals --cap-focus-ring (#1F63C6). Only for an unchecked
   switch: a checked switch keeps Bootstrap's white knob, which stays visible on the brand-coloured track. */
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231F63C6'/%3e%3c/svg%3e");
}

/* Toggle buttons (.btn-check + label.btn, e.g. the composer's public/internal choice): Bootstrap only draws a
   translucent halo around the label; use the portal's focus outline instead. The second selector matches Bootstrap's
   higher-specificity checked variant, which would otherwise bring the halo back. */
.btn-check:focus-visible + .btn,
.btn-check:checked:focus-visible + .btn {
  outline: var(--cap-focus-ring-width) solid var(--cap-focus-ring);
  outline-offset: var(--cap-focus-ring-offset);
  box-shadow: none;
}

.form-label {
  font-weight: var(--cap-font-weight-semibold);
  margin-bottom: var(--cap-space-1);
}

.form-label .cap-required,
.cap-required {
  color: var(--cap-danger-fg);
  font-weight: var(--cap-font-weight-bold);
}

.form-text,
.cap-help {
  display: block;
  margin-top: var(--cap-space-1);
  font-size: var(--cap-font-size-sm);
  color: var(--cap-text-muted);
}

/* ASP.NET Core validation classes mapped onto Bootstrap's look. */
.input-validation-error,
.form-control.input-validation-error,
.form-select.input-validation-error {
  border-color: var(--cap-danger-solid);
  background-color: var(--cap-surface);
}

.input-validation-error:focus {
  border-color: var(--cap-danger-solid);
  box-shadow: var(--cap-danger-ring-shadow);
}

.field-validation-error,
.invalid-feedback {
  display: block;
  margin-top: var(--cap-space-1);
  font-size: var(--cap-font-size-sm);
  font-weight: var(--cap-font-weight-medium);
  color: var(--cap-danger-fg);
}

.field-validation-error::before {
  content: "\F333";
  font-family: "bootstrap-icons";
  font-weight: normal;
  margin-right: 0.375em;
  vertical-align: -0.125em;
}

.field-validation-valid {
  display: none;
}

.validation-summary-valid {
  display: none;
}

/* Cards, tables, dropdowns, pagination, alerts. */
.card {
  --bs-card-border-color: var(--cap-border);
  --bs-card-border-radius: var(--cap-radius-lg);
  --bs-card-cap-bg: var(--cap-surface-muted);
  box-shadow: var(--cap-shadow-sm);
}

.table {
  --bs-table-color: var(--cap-text);
  --bs-table-bg: var(--cap-surface);
  --bs-table-border-color: var(--cap-border);
  --bs-table-striped-bg: var(--cap-surface-muted);
  --bs-table-hover-bg: var(--cap-surface-hover);
  --bs-table-hover-color: var(--cap-text);
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--cap-border);
  --bs-dropdown-border-radius: var(--cap-radius);
  --bs-dropdown-box-shadow: var(--cap-shadow-lg);
  --bs-dropdown-link-color: var(--cap-text);
  --bs-dropdown-link-hover-color: var(--cap-text);
  --bs-dropdown-link-hover-bg: var(--cap-surface-hover);
  --bs-dropdown-link-active-color: var(--cap-brand-on-primary);
  --bs-dropdown-link-active-bg: var(--cap-brand-primary);
  --bs-dropdown-header-color: var(--cap-text-muted);
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--cap-space-2);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--cap-brand-primary);
  --bs-nav-pills-link-active-color: var(--cap-brand-on-primary);
}

.nav-link {
  --bs-nav-link-color: var(--cap-link);
  --bs-nav-link-hover-color: var(--cap-link-hover);
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--cap-text);
  --bs-nav-tabs-border-color: var(--cap-border);
}

.nav-tabs .nav-link.active {
  font-weight: var(--cap-font-weight-semibold);
  box-shadow: inset 0 -3px 0 var(--cap-brand-primary);
}

.pagination {
  --bs-pagination-color: var(--cap-link);
  --bs-pagination-bg: var(--cap-surface);
  --bs-pagination-border-color: var(--cap-border);
  --bs-pagination-hover-color: var(--cap-link-hover);
  --bs-pagination-hover-bg: var(--cap-surface-hover);
  --bs-pagination-hover-border-color: var(--cap-border);
  --bs-pagination-focus-color: var(--cap-link-hover);
  --bs-pagination-focus-bg: var(--cap-surface-hover);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--cap-brand-on-primary);
  --bs-pagination-active-bg: var(--cap-brand-primary);
  --bs-pagination-active-border-color: var(--cap-brand-primary);
  --bs-pagination-disabled-color: var(--cap-text-muted);
  --bs-pagination-disabled-bg: var(--cap-surface-muted);
  --bs-pagination-disabled-border-color: var(--cap-border);
}

.progress {
  --bs-progress-bar-bg: var(--cap-brand-primary);
  --bs-progress-bg: var(--cap-surface-sunken);
}

.list-group {
  --bs-list-group-border-color: var(--cap-border);
  --bs-list-group-active-bg: var(--cap-brand-primary);
  --bs-list-group-active-border-color: var(--cap-brand-primary);
  --bs-list-group-action-hover-bg: var(--cap-surface-hover);
}

.modal {
  --bs-modal-border-color: var(--cap-border);
  --bs-modal-border-radius: var(--cap-radius-lg);
  --bs-modal-box-shadow: var(--cap-shadow-lg);
  --bs-modal-header-border-color: var(--cap-border);
  --bs-modal-footer-border-color: var(--cap-border);
}

.alert {
  --bs-alert-border-radius: var(--cap-radius);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--cap-text-muted);
  --bs-breadcrumb-item-active-color: var(--cap-text-muted);
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-font-size: var(--cap-font-size-sm);
  flex-wrap: wrap;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--cap-space-1);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* =========================================================================================== Brand (Capteur-logo) */

/*
 * _Brand.cshtml: woordmerk 'capteur' + productnaam. Op witte vlakken (topbalk) het kleurenlogo, op de navy zijbalk
 * de witte variant. _BrandStacked.cshtml: het volledige logo (beeldmerk + woordmerk) op de inlogpagina's.
 */
.cap-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--cap-brand-navy);
  text-decoration: none;
  line-height: 1.1;
}

.cap-brand:hover {
  color: var(--cap-brand-navy);
}

.cap-brand__logo {
  display: block;
  flex: 0 0 auto;
  height: var(--cap-brand-logo-height);
  width: auto;
}

.cap-brand__logo--inverse {
  display: none;
}

.cap-brand__product {
  padding-left: 0.625rem;
  border-left: 1px solid var(--cap-border);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cap-brand-navy);
  white-space: nowrap;
}

.cap-sidebar .cap-brand,
.cap-sidebar .cap-brand:hover {
  color: var(--cap-sidebar-active-text);
}

.cap-sidebar .cap-brand__logo--color {
  display: none;
}

.cap-sidebar .cap-brand__logo--inverse {
  display: block;
}

.cap-sidebar .cap-brand__product {
  border-left-color: var(--cap-sidebar-border);
  color: var(--cap-sidebar-active-text);
}

.cap-brand--stacked {
  flex-direction: column;
  gap: var(--cap-space-2);
}

.cap-brand--stacked .cap-brand__logo {
  width: var(--cap-brand-logo-stacked-width);
  max-width: 60vw;
  height: auto;
}

.cap-brand--stacked .cap-brand__product {
  padding-left: 0;
  border-left: 0;
  font-size: var(--cap-font-size-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cap-text-muted);
}

/* =========================================================================================== Application shell */

.cap-shell {
  min-height: 100vh;
}

.cap-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

/* Sidebar: offcanvas below lg (Bootstrap .offcanvas-lg), fixed column from lg. */
.cap-sidebar.offcanvas-lg {
  --bs-offcanvas-width: min(18rem, 86vw);
  --bs-offcanvas-bg: var(--cap-sidebar-bg);
  --bs-offcanvas-color: var(--cap-sidebar-text);
  --bs-offcanvas-border-color: var(--cap-sidebar-border);
  background-color: var(--cap-sidebar-bg) !important;
  color: var(--cap-sidebar-text);
}

.cap-sidebar :focus-visible {
  outline-color: var(--cap-focus-ring-inverse);
}

.cap-sidebar__header {
  border-bottom: 1px solid var(--cap-sidebar-border);
  min-height: var(--cap-topbar-height);
  padding: var(--cap-space-3) var(--cap-space-4);
}

.cap-sidebar__brand {
  display: none;
  align-items: center;
  min-height: var(--cap-topbar-height);
  padding: 0 var(--cap-space-5);
  border-bottom: 1px solid var(--cap-sidebar-border);
}

.cap-sidebar .cap-sidebar__body {
  display: block;
  flex: 1 1 auto;
  padding: var(--cap-space-4) var(--cap-space-3);
  overflow-y: auto;
}

.cap-sidebar__footer {
  padding: var(--cap-space-3) var(--cap-space-5);
  border-top: 1px solid var(--cap-sidebar-border);
  font-size: var(--cap-font-size-xs);
  color: var(--cap-sidebar-text-muted);
}

@media (min-width: 992px) {
  .cap-sidebar.offcanvas-lg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    width: var(--cap-sidebar-width);
  }

  .cap-sidebar__brand {
    display: flex;
  }

  .cap-main {
    margin-left: var(--cap-sidebar-width);
  }
}

/* Navigation */
.cap-nav__heading {
  margin: var(--cap-space-5) var(--cap-space-3) var(--cap-space-2);
  font-size: var(--cap-font-size-xs);
  font-weight: var(--cap-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cap-sidebar-text-muted);
}

.cap-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cap-space-3);
  min-height: 2.5rem;
  padding: var(--cap-space-2) var(--cap-space-3);
  border-radius: var(--cap-radius);
  color: var(--cap-sidebar-text);
  font-weight: var(--cap-font-weight-medium);
  text-decoration: none;
  transition: background-color var(--cap-transition), color var(--cap-transition);
}

.cap-nav__link .bi {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1;
}

.cap-nav__link:hover {
  background-color: var(--cap-sidebar-hover-bg);
  color: var(--cap-sidebar-active-text);
}

.cap-nav__link.active,
.cap-nav__link[aria-current="page"] {
  background-color: var(--cap-sidebar-active-bg);
  color: var(--cap-sidebar-active-text);
  font-weight: var(--cap-font-weight-semibold);
}

.cap-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background-color: var(--cap-sidebar-active-indicator);
}

.cap-nav__item--action {
  margin-bottom: var(--cap-space-3);
}

.cap-nav__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cap-space-2);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--cap-space-2) var(--cap-space-3);
  border-radius: var(--cap-radius);
  background-color: var(--cap-sidebar-action-bg);
  color: var(--cap-sidebar-action-fg);
  font-weight: var(--cap-font-weight-semibold);
  text-decoration: none;
  box-shadow: var(--cap-shadow-sm);
  transition: background-color var(--cap-transition);
}

.cap-nav__action:hover,
.cap-nav__action[aria-current="page"] {
  background-color: var(--cap-sidebar-action-hover-bg);
  color: var(--cap-sidebar-action-fg);
}

.cap-nav__action[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--cap-sidebar-action-fg);
}

/* Topbar */
.cap-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: var(--cap-space-3);
  min-height: var(--cap-topbar-height);
  padding: var(--cap-space-2) var(--cap-space-4);
  background-color: var(--cap-surface);
  border-bottom: 1px solid var(--cap-border);
  box-shadow: var(--cap-shadow-sm);
}

.cap-topbar__toggle {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-border-color: var(--cap-border-strong);
  --bs-btn-hover-bg: var(--cap-surface-hover);
  --bs-btn-hover-border-color: var(--cap-text-muted);
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1.375rem;
  color: var(--cap-text);
}

.cap-topbar > * {
  flex-shrink: 0;
}

.cap-topbar__brand {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.cap-topbar__spacer {
  flex: 1 1 auto;
}

@media (max-width: 575.98px) {
  .cap-topbar {
    gap: var(--cap-space-2);
    padding-left: var(--cap-space-3);
    padding-right: var(--cap-space-3);
  }

  /* Compact environment badge: icon only, text stays available to screen readers. */
  .cap-env-badge {
    padding: 0.25rem 0.375rem;
  }

  .cap-env-badge > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 359.98px) {
  .cap-topbar__brand .cap-brand__product {
    display: none;
  }
}

.cap-env-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cap-space-1);
  padding: 0.125rem var(--cap-space-2);
  border: 1px solid var(--cap-warning-border);
  border-radius: var(--cap-radius-pill);
  background-color: var(--cap-warning-bg);
  color: var(--cap-warning-fg);
  font-size: var(--cap-font-size-xs);
  font-weight: var(--cap-font-weight-semibold);
  white-space: nowrap;
}

@media (min-width: 992px) {
  .cap-topbar__brand {
    display: none;
  }
}

/* User menu */
.cap-user-menu__toggle {
  --bs-btn-padding-x: 0.375rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-hover-bg: var(--cap-surface-hover);
  --bs-btn-active-bg: var(--cap-surface-sunken);
  --bs-btn-color: var(--cap-text);
  --bs-btn-hover-color: var(--cap-text);
  --bs-btn-active-color: var(--cap-text);
  --bs-btn-font-weight: var(--cap-font-weight-medium);
  min-height: 2.75rem;
  gap: var(--cap-space-2);
  text-align: left;
}

.cap-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--cap-brand-primary-subtle);
  color: var(--cap-brand-primary-text);
  font-size: var(--cap-font-size-sm);
  font-weight: var(--cap-font-weight-bold);
}

.cap-user-menu__identity {
  /* Visually hidden on small screens (still the accessible name of the toggle). */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cap-user-menu__name {
  display: block;
  font-size: var(--cap-font-size-sm);
  font-weight: var(--cap-font-weight-semibold);
  line-height: 1.2;
}

.cap-user-menu__role {
  display: block;
  font-size: var(--cap-font-size-xs);
  color: var(--cap-text-muted);
  line-height: 1.2;
}

.cap-user-menu .dropdown-menu {
  min-width: 15rem;
}

.cap-user-menu .dropdown-header {
  white-space: normal;
}

.cap-user-menu__email {
  display: block;
  font-size: var(--cap-font-size-xs);
  color: var(--cap-text-muted);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .cap-user-menu__identity {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    display: flex;
    flex-direction: column;
    max-width: 14rem;
  }

  .cap-user-menu__name,
  .cap-user-menu__role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Content area and page header */
.cap-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--cap-content-max-width);
  margin: 0 auto;
  padding: var(--cap-space-4) var(--cap-space-4) var(--cap-space-6);
}

@media (min-width: 768px) {
  .cap-content {
    padding: var(--cap-space-5) var(--cap-space-5) var(--cap-space-7);
  }
}

@media (min-width: 1400px) {
  .cap-content {
    padding-left: var(--cap-space-6);
    padding-right: var(--cap-space-6);
  }
}

.cap-page-header {
  margin-bottom: var(--cap-space-5);
}

.cap-breadcrumbs {
  margin-bottom: var(--cap-space-2);
}

.cap-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cap-space-3) var(--cap-space-4);
}

.cap-page-header__titles {
  flex: 1 1 18rem;
  min-width: 0;
}

.cap-page-title {
  margin: 0;
  font-size: var(--cap-font-size-xl);
  font-weight: var(--cap-font-weight-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cap-page-subtitle {
  margin: var(--cap-space-1) 0 0;
  color: var(--cap-text-muted);
}

.cap-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-2);
  margin-top: var(--cap-space-2);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-2);
}

@media (max-width: 575.98px) {
  .page-actions {
    width: 100%;
  }

  .page-actions > .btn,
  .page-actions > form,
  .page-actions > .dropdown {
    flex: 1 1 auto;
  }

  .page-actions > form > .btn,
  .page-actions > .dropdown > .btn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .cap-page-title {
    font-size: var(--cap-font-size-2xl);
  }
}

.cap-footer {
  padding: var(--cap-space-4);
  border-top: 1px solid var(--cap-border);
  color: var(--cap-text-muted);
  font-size: var(--cap-font-size-xs);
  text-align: center;
}

/* Flash messages */
.cap-flash {
  display: flex;
  align-items: flex-start;
  gap: var(--cap-space-3);
  margin-bottom: var(--cap-space-5);
  box-shadow: var(--cap-shadow-sm);
}

.cap-flash__icon {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1.4;
}

.cap-flash__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =========================================================================================== Anonymous layout */

.cap-auth {
  background-color: var(--cap-bg-app);
}

.cap-auth__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--cap-space-6) var(--cap-space-4);
}

.cap-auth__header {
  margin-bottom: var(--cap-space-5);
}

.cap-auth__card {
  width: 100%;
  max-width: 28rem;
  padding: var(--cap-space-5);
  background-color: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-top: 4px solid var(--cap-brand-secondary); /* Capteur-rood merkaccent */
  border-radius: var(--cap-radius-lg);
  box-shadow: var(--cap-shadow-md);
}

.cap-auth__card--wide {
  max-width: 40rem;
}

.cap-auth__title {
  margin: 0 0 var(--cap-space-2);
  font-size: var(--cap-font-size-xl);
}

.cap-auth__subtitle {
  margin: 0 0 var(--cap-space-4);
  color: var(--cap-text-muted);
}

.cap-auth__footer {
  margin-top: auto;
  padding-top: var(--cap-space-6);
  max-width: 28rem;
  color: var(--cap-text-muted);
  font-size: var(--cap-font-size-xs);
  text-align: center;
}

@media (min-width: 576px) {
  .cap-auth__wrapper {
    justify-content: center;
    padding-top: var(--cap-space-7);
  }

  .cap-auth__card {
    padding: var(--cap-space-6);
  }

  .cap-auth__footer {
    margin-top: var(--cap-space-6);
    padding-top: 0;
  }
}

/* =========================================================================================== Surfaces */

.cap-card {
  position: relative;
  min-width: 0;
  padding: var(--cap-space-4);
  background-color: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-radius: var(--cap-radius-lg);
  box-shadow: var(--cap-shadow-sm);
}

@media (min-width: 768px) {
  .cap-card {
    padding: var(--cap-space-5);
  }
}

/* Flush card (e.g. around a table): no padding; wide tables scroll horizontally instead of being clipped. */
.cap-card--flush {
  padding: 0;
  overflow-x: auto;
}

.cap-card--flush > .table,
.cap-card--flush > .table-responsive > .table {
  margin-bottom: 0;
}

.cap-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cap-space-2) var(--cap-space-3);
  margin-bottom: var(--cap-space-4);
}

.cap-card--flush > .cap-card__header {
  margin: 0;
  padding: var(--cap-space-4) var(--cap-space-4) var(--cap-space-3);
}

.cap-card__header > .cap-section-title {
  margin-bottom: 0;
}

.cap-card__footer {
  margin-top: var(--cap-space-4);
  padding-top: var(--cap-space-4);
  border-top: 1px solid var(--cap-border);
}

.cap-section-title {
  display: flex;
  align-items: center;
  gap: var(--cap-space-2);
  margin: 0 0 var(--cap-space-4);
  font-size: var(--cap-font-size-lg);
  font-weight: var(--cap-font-weight-semibold);
  line-height: 1.3;
  color: var(--cap-text);
}

.cap-section-title .bi {
  color: var(--cap-brand-primary);
}

.cap-section-title small,
.cap-section-title .cap-section-title__hint {
  font-size: var(--cap-font-size-sm);
  font-weight: 400;
  color: var(--cap-text-muted);
}

/* Vertical rhythm helper: direct children get consistent spacing. */
.cap-stack > * + * {
  margin-top: var(--cap-space-5);
}

/* =========================================================================================== KPI cards */

.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cap-space-1);
  height: 100%;
  min-width: 0;
  padding: var(--cap-space-4);
  background-color: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-left: 4px solid var(--cap-kpi-accent);
  border-radius: var(--cap-radius-lg);
  box-shadow: var(--cap-shadow-sm);
}

.kpi-label {
  display: flex;
  align-items: center;
  gap: var(--cap-space-2);
  margin: 0;
  font-size: var(--cap-font-size-sm);
  font-weight: var(--cap-font-weight-semibold);
  color: var(--cap-text-muted);
}

.kpi-value {
  margin: 0;
  font-size: 1.875rem;
  font-weight: var(--cap-font-weight-bold);
  line-height: 1.15;
  color: var(--cap-text);
  overflow-wrap: anywhere;
}

.kpi-value small,
.kpi-value .kpi-unit {
  margin-left: 0.15em;
  font-size: 0.5em;
  font-weight: var(--cap-font-weight-semibold);
  color: var(--cap-text-muted);
}

.kpi-definition {
  margin: auto 0 0;
  padding-top: var(--cap-space-2);
  font-size: var(--cap-font-size-xs);
  color: var(--cap-text-muted);
}

.kpi-card--alert {
  border-left-color: var(--cap-kpi-alert-accent);
}

.kpi-card--warning {
  border-left-color: var(--cap-kpi-warning-accent);
}

/* Shape/icon cue in addition to colour (never colour only). */
.kpi-card--alert .kpi-label::before,
.kpi-card--warning .kpi-label::before {
  font-family: "bootstrap-icons";
  font-weight: normal;
  line-height: 1;
}

.kpi-card--alert .kpi-label::before {
  content: "\F336";
  color: var(--cap-danger-fg);
}

.kpi-card--warning .kpi-label::before {
  content: "\F33A";
  color: var(--cap-warning-fg);
}

.kpi-card a.stretched-link:focus-visible {
  outline: none;
}

.kpi-card:has(a.stretched-link:focus-visible) {
  outline: var(--cap-focus-ring-width) solid var(--cap-focus-ring);
  outline-offset: var(--cap-focus-ring-offset);
}

.kpi-card:has(a.stretched-link):hover {
  border-color: var(--cap-border-strong);
  box-shadow: var(--cap-shadow-md);
}

@media (min-width: 1200px) {
  .kpi-value {
    font-size: 2.125rem;
  }
}

/* Charts (Chart.js with maintainAspectRatio: false needs a sized parent). */
.chart-container {
  position: relative;
  width: 100%;
  height: 16rem;
  min-width: 0;
}

.chart-container--sm {
  height: 12rem;
}

.chart-container--md {
  height: 18rem;
}

.chart-container--lg {
  height: 24rem;
}

.chart-container > canvas {
  display: block;
  max-width: 100%;
}

/* =========================================================================================== Badges */

.cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.1875rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--cap-radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--cap-font-weight-semibold);
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
}

.cap-badge > .bi {
  flex: 0 0 auto;
  font-size: 0.875em;
  line-height: 1;
}

.cap-badge__text {
  min-width: 0;
}

/* SLA texts can be long: allow wrapping on narrow screens. */
.cap-badge[class*="cap-badge--sla-"] {
  border-radius: var(--cap-radius);
  white-space: normal;
  text-align: left;
}

.cap-badge--status-new { color: var(--cap-status-new-fg); background-color: var(--cap-status-new-bg); border-color: var(--cap-status-new-border); }
.cap-badge--status-in-progress { color: var(--cap-status-in-progress-fg); background-color: var(--cap-status-in-progress-bg); border-color: var(--cap-status-in-progress-border); }
.cap-badge--status-waiting { color: var(--cap-status-waiting-fg); background-color: var(--cap-status-waiting-bg); border-color: var(--cap-status-waiting-border); }
.cap-badge--status-resolved { color: var(--cap-status-resolved-fg); background-color: var(--cap-status-resolved-bg); border-color: var(--cap-status-resolved-border); }
.cap-badge--status-closed { color: var(--cap-status-closed-fg); background-color: var(--cap-status-closed-bg); border-color: var(--cap-status-closed-border); }

.cap-badge--priority-normal { color: var(--cap-priority-normal-fg); background-color: var(--cap-priority-normal-bg); border-color: var(--cap-priority-normal-border); }
.cap-badge--priority-high { color: var(--cap-priority-high-fg); background-color: var(--cap-priority-high-bg); border-color: var(--cap-priority-high-border); }
.cap-badge--priority-critical { color: var(--cap-priority-critical-fg); background-color: var(--cap-priority-critical-bg); border-color: var(--cap-priority-critical-border); }

.cap-badge--type { color: var(--cap-type-fg); background-color: var(--cap-type-bg); border-color: var(--cap-type-border); }

.cap-badge--sla-running { color: var(--cap-sla-running-fg); background-color: var(--cap-sla-running-bg); border-color: var(--cap-sla-running-border); }
.cap-badge--sla-at-risk { color: var(--cap-sla-at-risk-fg); background-color: var(--cap-sla-at-risk-bg); border-color: var(--cap-sla-at-risk-border); }
.cap-badge--sla-breached { color: var(--cap-sla-breached-fg); background-color: var(--cap-sla-breached-bg); border-color: var(--cap-sla-breached-border); }
.cap-badge--sla-met { color: var(--cap-sla-met-fg); background-color: var(--cap-sla-met-bg); border-color: var(--cap-sla-met-border); }
.cap-badge--sla-late { color: var(--cap-sla-late-fg); background-color: var(--cap-sla-late-bg); border-color: var(--cap-sla-late-border); }
.cap-badge--sla-paused { color: var(--cap-sla-paused-fg); background-color: var(--cap-sla-paused-bg); border-color: var(--cap-sla-paused-border); }

.cap-badge--scan-pending { color: var(--cap-scan-pending-fg); background-color: var(--cap-scan-pending-bg); border-color: var(--cap-sla-paused-border); }
.cap-badge--scan-clean { color: var(--cap-scan-clean-fg); background-color: var(--cap-scan-clean-bg); border-color: var(--cap-success-border); }
.cap-badge--scan-blocked { color: var(--cap-scan-blocked-fg); background-color: var(--cap-scan-blocked-bg); border-color: var(--cap-danger-border); }
.cap-badge--scan-not-scanned { color: var(--cap-scan-not-scanned-fg); background-color: var(--cap-scan-not-scanned-bg); border-color: var(--cap-scan-not-scanned-border); }

.cap-badge--visibility-public { color: var(--cap-visibility-public-fg); background-color: var(--cap-visibility-public-bg); border-color: var(--cap-info-border); }
.cap-badge--visibility-internal { color: var(--cap-internal-fg); background-color: var(--cap-internal-bg); border-color: var(--cap-internal-border); border-style: dashed; }

.cap-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-1) var(--cap-space-2);
}

.cap-empty-value {
  color: var(--cap-text-muted);
}

.cap-duration {
  white-space: nowrap;
}

time[title] {
  text-decoration: none;
}

/* =========================================================================================== Timeline */

.cap-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 1.0625rem;
  width: 2px;
  background-color: var(--cap-border);
}

.cap-timeline-item {
  position: relative;
  padding-left: 3rem;
}

.cap-timeline-item + .cap-timeline-item {
  margin-top: var(--cap-space-4);
}

.cap-timeline-item__marker {
  position: absolute;
  top: 0.25rem;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--cap-border);
  border-radius: 50%;
  background-color: var(--cap-surface);
  color: var(--cap-text-muted);
  font-size: 1rem;
}

.cap-timeline-item--staff .cap-timeline-item__marker {
  border-color: var(--cap-brand-primary-border-subtle);
  color: var(--cap-brand-primary);
}

.cap-timeline-item__card {
  min-width: 0;
  padding: var(--cap-space-3) var(--cap-space-4);
  background-color: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-radius: var(--cap-radius-lg);
  box-shadow: var(--cap-shadow-sm);
}

.cap-timeline-item__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-1) var(--cap-space-3);
  margin-bottom: var(--cap-space-2);
  font-size: var(--cap-font-size-sm);
}

.cap-timeline-item__author {
  font-weight: var(--cap-font-weight-semibold);
  color: var(--cap-text);
}

.cap-timeline-item__meta {
  color: var(--cap-text-muted);
  font-size: var(--cap-font-size-sm);
}

.cap-timeline-item__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cap-timeline-item__attachments {
  margin-top: var(--cap-space-3);
}

/* Internal note: hatched yellow tint, dashed border, explicit label — unmistakably different from public replies. */
.cap-timeline-item--internal .cap-timeline-item__card {
  background-color: var(--cap-internal-bg);
  background-image: repeating-linear-gradient(135deg, var(--cap-internal-hatch) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--cap-internal-border);
  border-left: 4px solid var(--cap-internal-border);
}

.cap-timeline-item--internal .cap-timeline-item__marker {
  background-color: var(--cap-internal-bg);
  border-color: var(--cap-internal-border);
  border-style: dashed;
  color: var(--cap-internal-fg);
}

.cap-timeline-item--internal .cap-timeline-item__card::before,
.cap-internal-panel::before,
.cap-composer--internal::before,
.cap-composer--staff::before {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.375em;
  margin-bottom: var(--cap-space-2);
  padding: 0.125rem 0.625rem;
  border-radius: var(--cap-radius-pill);
  font-family: "bootstrap-icons", var(--cap-font-sans);
  font-size: var(--cap-font-size-xs);
  font-weight: var(--cap-font-weight-bold);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.cap-timeline-item--internal .cap-timeline-item__card::before,
.cap-internal-panel::before,
.cap-composer--internal::before {
  background-color: var(--cap-internal-label-bg);
  color: var(--cap-internal-label-fg);
  content: "Alleen zichtbaar voor Capteur";
  content: "\F47A\00A0\00A0 Alleen zichtbaar voor Capteur" / "Alleen zichtbaar voor Capteur";
}

/* Status change / system events: compact, no card chrome. */
.cap-timeline-item--status .cap-timeline-item__marker {
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--cap-surface-muted);
  font-size: 0.875rem;
}

.cap-timeline-item--status .cap-timeline-item__card {
  padding: var(--cap-space-2) 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--cap-text-muted);
  font-size: var(--cap-font-size-sm);
}

.cap-timeline-item--status .cap-timeline-item__header {
  margin-bottom: 0;
}

/* Capteur-only area (internal product info, internal fields) */
.cap-internal-panel {
  position: relative;
  padding: var(--cap-space-4);
  background-color: var(--cap-internal-bg);
  background-image: repeating-linear-gradient(135deg, var(--cap-internal-hatch) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--cap-internal-border);
  border-left: 4px solid var(--cap-internal-border);
  border-radius: var(--cap-radius-lg);
}

.cap-internal-panel::before {
  margin-bottom: var(--cap-space-3);
}

.cap-internal-panel > :last-child {
  margin-bottom: 0;
}

/* =========================================================================================== Composer (reply / internal note) */

.cap-composer {
  position: relative;
  padding: var(--cap-space-4);
  background-color: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-top: 4px solid var(--cap-brand-primary);
  border-radius: var(--cap-radius-lg);
  box-shadow: var(--cap-shadow-sm);
  transition: background-color var(--cap-transition), border-color var(--cap-transition);
}

/* Staff composer in "public" mode: explicit label that customers will see the reply. */
.cap-composer--staff::before {
  background-color: var(--cap-visibility-public-bg);
  color: var(--cap-visibility-public-fg);
  content: "Publieke reactie · zichtbaar voor de klant";
  content: "\F3EF\00A0\00A0 Publieke reactie · zichtbaar voor de klant" / "Publieke reactie, zichtbaar voor de klant";
}

.cap-composer--internal {
  background-color: var(--cap-internal-bg);
  background-image: repeating-linear-gradient(135deg, var(--cap-internal-hatch) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--cap-internal-border);
  border-top: 4px solid var(--cap-internal-border);
}

.cap-composer--internal::before {
  background-color: var(--cap-internal-label-bg);
  color: var(--cap-internal-label-fg);
  content: "Interne notitie · alleen zichtbaar voor Capteur";
  content: "\F47A\00A0\00A0 Interne notitie · alleen zichtbaar voor Capteur" / "Interne notitie, alleen zichtbaar voor Capteur";
}

.cap-composer--internal .form-control {
  border-color: var(--cap-internal-border);
}

.cap-composer__mode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cap-space-2);
  margin-bottom: var(--cap-space-3);
}

.cap-composer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cap-space-2);
  margin-top: var(--cap-space-3);
}

.cap-composer__hint {
  margin-right: auto;
  font-size: var(--cap-font-size-sm);
  color: var(--cap-text-muted);
}

/* =========================================================================================== Filter bar */

.cap-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--cap-space-3) var(--cap-space-4);
  margin-bottom: var(--cap-space-5);
  padding: var(--cap-space-4);
  background-color: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-radius: var(--cap-radius-lg);
  box-shadow: var(--cap-shadow-sm);
}

.cap-filter-bar .form-label {
  margin-bottom: var(--cap-space-1);
  font-size: var(--cap-font-size-sm);
}

.cap-filter-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-2);
}

.cap-filter-bar__toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-2) var(--cap-space-4);
  grid-column: 1 / -1;
}

@media (min-width: 576px) {
  .cap-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cap-filter-bar__search,
  .cap-filter-bar__actions {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .cap-filter-bar {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }

  .cap-filter-bar__search {
    grid-column: span 2;
  }

  .cap-filter-bar__actions {
    grid-column: auto;
  }
}

/* =========================================================================================== Tables */

.cap-table {
  margin-bottom: 0;
  font-size: var(--cap-font-size-sm);
}

.cap-table > :not(caption) > * > * {
  padding: var(--cap-space-3);
  vertical-align: middle;
}

.cap-table > thead th {
  background-color: var(--cap-surface-muted);
  color: var(--cap-text-muted);
  font-size: var(--cap-font-size-xs);
  font-weight: var(--cap-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cap-table > thead th a {
  color: inherit;
  text-decoration: none;
}

.cap-table > thead th a:hover {
  color: var(--cap-text);
  text-decoration: underline;
}

.cap-table > caption {
  caption-side: top;
  padding: 0 0 var(--cap-space-2);
  color: var(--cap-text-muted);
}

/* Name/title of a row (ticket title, product, customer, staff member). break-word, not anywhere: "anywhere" also lowers
   the min-content width, so the auto table layout could squeeze the primary column to the ticket-number width and
   break ordinary words mid-word ("Vergunningen|loket"). With break-word a title only wraps between words; a single
   token longer than the column (a URL, a very long compound) makes the table scroll inside .table-responsive from
   768 px, and still breaks inside the stacked card on phones. Checked on every table using it at 390/820/1366 px. */
.cap-table__title {
  font-weight: var(--cap-font-weight-semibold);
  color: var(--cap-text);
  overflow-wrap: break-word;
}

.cap-table__number {
  font-family: var(--cap-font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.cap-table td.cap-table__numeric,
.cap-table th.cap-table__numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cap-table--row-attention > tbody > tr.cap-row--attention > :first-child {
  box-shadow: inset 4px 0 0 var(--cap-kpi-alert-accent);
}

/* Wide tables with many short numeric columns (e.g. report comparisons): headers wrap in sentence case, so a long
   label such as "Onbeantwoord overschreden" no longer makes a wide column for a single digit; the column width
   follows the data instead. Text columns keep a readable minimum width (names do not wrap word by word). */
.cap-table--compact-headers > thead th {
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: bottom;
}

@media (min-width: 768px) {
  /* Bootstrap's .table-sm padding is otherwise overruled by the .cap-table cell padding. */
  .cap-table.table-sm > :not(caption) > * > * {
    padding: var(--cap-space-2);
  }

  .cap-table--compact-headers > tbody > tr > td:not(.cap-table__numeric) {
    min-width: 8rem;
  }

  /* Wide tables in a horizontally scrolling .table-responsive: the first column (row header) stays in view while
     the other columns scroll, so every value remains identifiable. Phones get the stacked cards instead. */
  .cap-table--sticky-first > thead > tr > :first-child,
  .cap-table--sticky-first > tbody > tr > :first-child,
  .cap-table--sticky-first > tfoot > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 10rem;
    background-color: var(--cap-surface);
    box-shadow: inset -1px 0 0 var(--cap-border);
  }

  .cap-table--sticky-first > thead > tr > :first-child {
    background-color: var(--cap-surface-muted);
  }
}

/* Below md: every row becomes a card; cells show their data-label. Use .cap-table--no-stack to opt out. */
@media (max-width: 767.98px) {
  .cap-table:not(.cap-table--no-stack) {
    border: 0;
    background: transparent;
  }

  .cap-table:not(.cap-table--no-stack) > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .cap-table:not(.cap-table--no-stack),
  .cap-table:not(.cap-table--no-stack) > tbody,
  .cap-table:not(.cap-table--no-stack) > tbody > tr,
  .cap-table:not(.cap-table--no-stack) > tbody > tr > td,
  .cap-table:not(.cap-table--no-stack) > tbody > tr > th {
    display: block;
    width: 100%;
  }

  .cap-table:not(.cap-table--no-stack) > tbody > tr {
    margin-bottom: var(--cap-space-3);
    padding: var(--cap-space-2) var(--cap-space-3);
    background-color: var(--cap-surface);
    border: 1px solid var(--cap-border);
    border-radius: var(--cap-radius);
    box-shadow: var(--cap-shadow-sm);
  }

  .cap-table:not(.cap-table--no-stack) > tbody > tr > td,
  .cap-table:not(.cap-table--no-stack) > tbody > tr > th {
    padding: var(--cap-space-1) 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: right;
    overflow-wrap: anywhere; /* GUIDs, e-mail addresses and long codes break instead of leaving the card */
  }

  /* Labelled cell: the label is floated into the left 40% (the cell's padding), the value flows as ordinary content
     in the remaining 60%. Normal flow (no flex/grid on the cell) keeps a multi-part value together: text, icons and
     links stay on one line, .d-block parts start a new line, and nothing is squeezed into side-by-side columns. */
  .cap-table:not(.cap-table--no-stack) > tbody > tr > [data-label]:not(.cap-table__primary) {
    display: flow-root; /* contains the floated label when it is taller than the value */
    padding-left: 40%;
  }

  .cap-table:not(.cap-table--no-stack) > tbody > tr > [data-label]::before {
    content: attr(data-label);
    font-size: var(--cap-font-size-xs);
    font-weight: var(--cap-font-weight-semibold);
    letter-spacing: 0.02em;
    color: var(--cap-text-muted);
    text-align: left;
    text-transform: uppercase;
  }

  /* Percentages of the float resolve against the 60% value column: 66.667% of it equals 40% of the cell. */
  .cap-table:not(.cap-table--no-stack) > tbody > tr > [data-label]:not(.cap-table__primary)::before {
    float: left;
    width: calc(66.667% - var(--cap-space-3));
    margin-left: -66.667%;
    /* Same line box as the value text, so label and first value line share a baseline. */
    line-height: calc(var(--cap-font-size-sm) * var(--cap-line-height));
  }

  /* Badges may wrap inside the value column instead of sticking out of the card. */
  .cap-table:not(.cap-table--no-stack) > tbody > tr > [data-label] .cap-badge {
    white-space: normal;
    text-align: left;
  }

  /* A checkbox/radio in a value keeps its own label next to it (right-aligned like every other value). */
  .cap-table:not(.cap-table--no-stack) > tbody > tr > [data-label] > .form-check {
    display: inline-block;
    text-align: left;
  }

  .cap-table:not(.cap-table--no-stack) > tbody > tr > :not([data-label]) {
    display: block;
    text-align: left;
  }

  .cap-table:not(.cap-table--no-stack) > tbody > tr > .cap-table__primary {
    display: block;
    padding-bottom: var(--cap-space-2);
    margin-bottom: var(--cap-space-1);
    border-bottom: 1px solid var(--cap-border);
    font-size: var(--cap-font-size-base);
    text-align: left;
  }

  .cap-table:not(.cap-table--no-stack) > tbody > tr > .cap-table__primary::before {
    content: none;
  }

  /* Attention rows: the accent moves from the first cell (which has no left padding here, so the bar would be drawn
     under the ticket number) to the card's left edge, outside the card padding. */
  .cap-table--row-attention:not(.cap-table--no-stack) > tbody > tr.cap-row--attention {
    border-left: 4px solid var(--cap-kpi-alert-accent);
  }

  .cap-table--row-attention:not(.cap-table--no-stack) > tbody > tr.cap-row--attention > :first-child {
    box-shadow: none;
  }

  .cap-card--flush > .cap-table:not(.cap-table--no-stack),
  .cap-card--flush > .table-responsive > .cap-table:not(.cap-table--no-stack) {
    padding: var(--cap-space-3);
  }
}

/* =========================================================================================== Key/value list */

.cap-meta-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.cap-meta-list > dt {
  margin-top: var(--cap-space-3);
  font-size: var(--cap-font-size-xs);
  font-weight: var(--cap-font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cap-text-muted);
}

.cap-meta-list > dt:first-child {
  margin-top: 0;
}

.cap-meta-list > dd {
  margin: var(--cap-space-1) 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 576px) {
  .cap-meta-list {
    grid-template-columns: minmax(8rem, 35%) minmax(0, 1fr);
    column-gap: var(--cap-space-4);
  }

  .cap-meta-list > dt,
  .cap-meta-list > dd {
    margin: 0;
    padding: var(--cap-space-2) 0;
    border-top: 1px solid var(--cap-border);
  }

  .cap-meta-list > dt:first-of-type,
  .cap-meta-list > dt:first-of-type + dd {
    border-top: 0;
  }

  .cap-meta-list > dt {
    padding-top: calc(var(--cap-space-2) + 0.15rem);
  }
}

/* Compact variant for narrow side panels: always stacked. */
.cap-meta-list--stacked {
  grid-template-columns: minmax(0, 1fr) !important;
}

.cap-meta-list--stacked > dt,
.cap-meta-list--stacked > dd {
  border-top: 0 !important;
  padding: 0 !important;
}

.cap-meta-list--stacked > dt {
  margin-top: var(--cap-space-3) !important;
}

.cap-meta-list--stacked > dt:first-child {
  margin-top: 0 !important;
}

.cap-meta-list--stacked > dd {
  margin-top: var(--cap-space-1) !important;
}

/* =========================================================================================== Forms */

.text-prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cap-form-section {
  margin: 0 0 var(--cap-space-5);
  padding: var(--cap-space-4);
  background-color: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-radius: var(--cap-radius-lg);
}

@media (min-width: 768px) {
  .cap-form-section {
    padding: var(--cap-space-5);
  }
}

fieldset.cap-form-section {
  min-width: 0;
}

.cap-form-section > legend,
.cap-form-section__title {
  float: none;
  width: auto;
  margin: 0 0 var(--cap-space-1);
  padding: 0;
  font-size: var(--cap-font-size-lg);
  font-weight: var(--cap-font-weight-semibold);
  line-height: 1.3;
}

.cap-form-section__description {
  margin: 0 0 var(--cap-space-4);
  color: var(--cap-text-muted);
  font-size: var(--cap-font-size-sm);
}

.cap-form-section > legend + * {
  clear: both;
}

.cap-form-section > :last-child {
  margin-bottom: 0;
}

.cap-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-2);
  margin-top: var(--cap-space-5);
}

@media (max-width: 575.98px) {
  .cap-form-actions > .btn {
    flex: 1 1 auto;
  }
}

/* Validation summary partial (_FormErrors) */
.cap-form-errors {
  margin-bottom: var(--cap-space-5);
  color: var(--cap-danger-fg);
  background-color: var(--cap-danger-bg);
  border: 1px solid var(--cap-danger-border);
  border-left: 4px solid var(--cap-danger-solid);
}

.cap-form-errors__header {
  display: flex;
  align-items: center;
  gap: var(--cap-space-2);
}

.cap-form-errors__title {
  margin: 0;
  font-size: var(--cap-font-size-base);
  font-weight: var(--cap-font-weight-bold);
  color: var(--cap-danger-fg);
}

.cap-form-errors__list {
  margin: var(--cap-space-2) 0 0;
  padding-left: 1.75rem;
}

.cap-form-errors__list a {
  color: var(--cap-danger-fg);
  font-weight: var(--cap-font-weight-semibold);
}

/* =========================================================================================== Empty / loading / error states */

.cap-empty-state,
.cap-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cap-space-2);
  padding: var(--cap-space-6) var(--cap-space-4);
  text-align: center;
}

.cap-empty-state__icon,
.cap-error-state__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--cap-space-2);
  border-radius: 50%;
  background-color: var(--cap-brand-primary-subtle);
  color: var(--cap-brand-primary);
  font-size: 1.5rem;
}

.cap-error-state__icon {
  background-color: var(--cap-danger-bg);
  color: var(--cap-danger-fg);
}

.cap-empty-state__title,
.cap-error-state__title {
  margin: 0;
  font-size: var(--cap-font-size-lg);
  font-weight: var(--cap-font-weight-semibold);
  color: var(--cap-text);
}

.cap-empty-state__text,
.cap-error-state__text {
  max-width: 36rem;
  margin: 0 0 var(--cap-space-2);
  color: var(--cap-text-muted);
}

.cap-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--cap-space-2);
  color: var(--cap-text-muted);
}

.cap-loading--block {
  display: flex;
  justify-content: center;
  padding: var(--cap-space-6) var(--cap-space-4);
}

.cap-skeleton {
  display: block;
  min-height: 1rem;
  border-radius: var(--cap-radius-sm);
  background-color: var(--cap-surface-sunken);
  background-image: linear-gradient(90deg, transparent 0, var(--cap-skeleton-shine) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: cap-skeleton 1.4s ease-in-out infinite;
}

@keyframes cap-skeleton {
  from {
    background-position: 150% 0;
  }

  to {
    background-position: -50% 0;
  }
}

/* Error page */
.cap-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cap-space-3);
}

.cap-error__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--cap-brand-primary-subtle);
  color: var(--cap-brand-primary);
  font-size: 1.5rem;
}

.cap-error__code {
  margin: 0;
  font-size: var(--cap-font-size-sm);
  font-weight: var(--cap-font-weight-semibold);
  color: var(--cap-text-muted);
}

.cap-error__message {
  margin: 0;
  max-width: 40rem;
}

.cap-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cap-space-2);
  margin-top: var(--cap-space-2);
}

.cap-error__reference {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cap-space-2);
  margin: var(--cap-space-2) 0 0;
  font-size: var(--cap-font-size-sm);
  color: var(--cap-text-muted);
}

.cap-error__reference code {
  color: var(--cap-text);
  overflow-wrap: anywhere;
}

/* Pagination partial */
.cap-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cap-space-3);
  margin-top: var(--cap-space-4);
}

.cap-pagination__summary {
  margin: 0;
  font-size: var(--cap-font-size-sm);
  color: var(--cap-text-muted);
}

.cap-pagination .pagination {
  margin: 0;
  flex-wrap: wrap;
}

.cap-pagination .page-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cap-space-1);
  min-width: 2.5rem;
  min-height: 2.5rem;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .cap-pagination .page-item:not(.active):not(.cap-pagination__edge) {
    display: none;
  }
}

/* Confirmation modal (site.js data-confirm) */
.cap-confirm-modal .modal-body {
  white-space: pre-wrap;
}

/* Copy button feedback */
[data-copy].is-copied {
  color: var(--cap-success-fg);
}

/* Spinner inside busy buttons (form.js-once) */
.btn .spinner-border {
  flex: 0 0 auto;
}

/* =========================================================================================== Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cap-skeleton {
    animation: none;
    background-image: none;
  }
}

/* =========================================================================================== Forced colours (Windows high contrast) */

@media (forced-colors: active) {
  .cap-badge,
  .kpi-card,
  .cap-card,
  .cap-timeline-item__card,
  .cap-internal-panel,
  .cap-composer {
    border: 1px solid CanvasText;
  }

  .cap-timeline-item--internal .cap-timeline-item__card,
  .cap-internal-panel,
  .cap-composer--internal {
    border-style: dashed;
    border-width: 3px;
  }

  .cap-nav__link[aria-current="page"] {
    outline: 2px solid Highlight;
  }
}

/* =========================================================================================== Print */

@media print {
  @page {
    margin: 1.5cm;
  }

  body,
  .cap-auth {
    background: var(--cap-print-bg) !important;
    color: var(--cap-print-text) !important;
    font-size: 11pt;
  }

  .cap-sidebar,
  .cap-topbar,
  .cap-skip-link,
  .cap-footer,
  .page-actions,
  .cap-filter-bar,
  .cap-composer,
  .cap-pagination,
  .cap-flash .btn-close,
  .btn,
  .dropdown,
  form.cap-no-print,
  .cap-no-print {
    display: none !important;
  }

  .cap-main {
    margin-left: 0 !important;
  }

  .cap-content {
    max-width: none;
    padding: 0;
  }

  .cap-card,
  .kpi-card,
  .cap-timeline-item__card,
  .cap-form-section {
    box-shadow: none !important;
    break-inside: avoid;
  }

  .cap-badge {
    border-color: var(--cap-print-text) !important;
  }

  .cap-timeline-item--internal .cap-timeline-item__card,
  .cap-internal-panel {
    border: 2px dashed var(--cap-print-text) !important;
  }

  a[href]:not(.btn) {
    color: var(--cap-print-text);
    text-decoration: underline;
  }

  .cap-table > thead {
    display: table-header-group;
  }

  .chart-container {
    break-inside: avoid;
  }
}