@charset "UTF-8";
/* ============================================================
   Fonts
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap");
/* ============================================================
   Reboot
   ------------------------------------------------------------
   Own version of Bootstrap's Reboot: the base element reset that
   used to arrive for free from bootstrap.min.css loading before
   user.css. Without it the browser's raw UA defaults show through
   — an 8px body margin and a serif fallback font instead of Inter.
   Loaded first (see user.scss) so every later partial's overrides
   land on a known-zero baseline, same as Bootstrap's own load order.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color, #212529);
  background-color: var(--bs-body-bg, #fff);
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol, ul {
  padding-left: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

b, strong {
  font-weight: bolder;
}

a {
  text-decoration: underline;
}

img, svg {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

code, kbd, pre, samp {
  font-family: var(--bs-font-monospace, "DM Mono", "Courier New", monospace);
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}

code {
  font-size: 0.875em;
}

small {
  font-size: 0.875em;
}

mark {
  padding: 0.1875em;
  background-color: #fcf8e3;
}

[hidden] {
  display: none !important;
}

/* ============================================================
   Fabric design tokens
   ------------------------------------------------------------
   Single source of truth for the brand palette (see the Fabric
   brand & style guide). Bootstrap's own --bs-* surface below is
   remapped onto these so stock components inherit them for free.
   ============================================================ */
:root {
  --fabric-navy: #0D1B2A;
  --fabric-blue: #2563EB;
  --fabric-teal: #14B8A6;
  --fabric-slate: #475569;
  --fabric-mist: #E2E8F0;
  --fabric-white: #FFFFFF;
  --fabric-bg: #F8FAFC;
  --fabric-text: #0D1B2A;
  --fabric-text-muted: #64748B;
  --fabric-border: #E2E8F0;
  --fabric-success: #14B8A6;
  --fabric-active: #2563EB;
  --fabric-warning: #F59E0B;
  --fabric-error: #DC2626;
  --fabric-radius-sm: 6px;
  --fabric-radius-md: 8px;
  --fabric-radius-lg: 12px;
  --fabric-radius-xl: 16px;
  /* Brand-hover / subtle-tint shades (not named individually in the
     guide, but needed for hover/active/tint states — derived from
     --fabric-blue at standard Tailwind blue-700 / blue-50 steps). */
  --fabric-primary: var(--fabric-blue);
  --fabric-primary-hover: #1D4ED8;
  --fabric-primary-subtle: #EFF6FF;
}

/* ============================================================
   Bootstrap variable overrides
   ============================================================ */
:root {
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-font-monospace: 'DM Mono', 'Courier New', monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-border-radius: var(--fabric-radius-md);
  --bs-border-color: rgba(13,27,42,.09);
  --bs-body-bg: var(--fabric-bg);
  --bs-card-bg: var(--fabric-white);
  --bs-primary: var(--fabric-blue);
  --bs-primary-rgb: 37, 99, 235;
  --bs-success: var(--fabric-teal);
  --bs-warning: var(--fabric-warning);
  --bs-danger: var(--fabric-error);
}

/* Global button size - tighter than Bootstrap/the style guide's default
   (10px/16px) by design: this is a dense, data-heavy operational UI with
   many buttons packed into toolbars and table rows. Weight/colour/radius
   follow the guide exactly; padding stays compact so existing toolbar
   layouts don't overflow/wrap. */
.btn {
  --bs-btn-padding-y: 0.3125rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 600;
}

/* Primary colour - buttons */
.btn-primary {
  --bs-btn-bg: #2563EB;
  --bs-btn-border-color: #2563EB;
  --bs-btn-hover-bg: #1D4ED8;
  --bs-btn-hover-border-color: #1D4ED8;
  --bs-btn-active-bg: #1D4ED8;
  --bs-btn-active-border-color: #1D4ED8;
  --bs-btn-disabled-bg: #2563EB;
  --bs-btn-disabled-border-color: #2563EB;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-outline-primary {
  --bs-btn-color: #2563EB;
  --bs-btn-border-color: #2563EB;
  --bs-btn-hover-bg: #2563EB;
  --bs-btn-hover-border-color: #2563EB;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1D4ED8;
  --bs-btn-active-border-color: #1D4ED8;
}

/* Primary colour - text / bg / border */
.text-primary {
  color: #2563EB !important;
}

.bg-primary {
  background-color: #2563EB !important;
}

.border-primary {
  border-color: #2563EB !important;
}

a {
  color: #2563EB;
}

a:hover {
  color: #1D4ED8;
}

/* Nav active states */
.nav-pills .nav-link.active {
  background-color: #2563EB;
}

.nav-underline .nav-link.active {
  border-bottom-color: #2563EB;
  color: #2563EB;
}

.nav-underline .nav-link:hover {
  color: #1D4ED8;
}

/* ============================================================
   Native components
   ------------------------------------------------------------
   Fabric's own structural implementation of the interactive
   components previously supplied by the bootstrap.min.css CDN
   bundle. Every rule here is authored for this app — there is no
   Bootstrap stylesheet loaded any more (see layout/main.php).
   Classnames were deliberately kept (`.btn`, `.modal`, `.card`…)
   to avoid rewriting ~600 class references across every view;
   what changed is that we now own every line of CSS behind them.
   Colour/shape variants layer on top via `--bs-*` custom
   properties, same pattern the rest of the app already used for
   its brand overrides (see _tokens.scss) — so this file supplies
   the *base* the rest of the app was already customising.
   Loaded early (see user.scss) so later partials keep winning
   the cascade exactly as they did when Bootstrap loaded first.
   ============================================================ */
/* ---------- Root component defaults not already set by _tokens.scss ---------- */
:root {
  --bs-body-color: #212529;
  --bs-secondary-color: rgba(33, 37, 41, .75);
  --bs-tertiary-bg: #f8f9fa;
  --bs-card-border-color: rgba(0, 0, 0, .125);
  --bs-card-cap-bg: rgba(0, 0, 0, .03);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius, 0.375rem);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: inherit;
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn:disabled, .btn[disabled], fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-sm {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm, 0.25rem);
}

/* Solid variant mixin-by-hand: bg + border + hover/active shades */
/* .btn-primary / .btn-outline-primary are re-declared with the Fabric
   blue in _tokens.scss (loaded after this file) — this just supplies
   Bootstrap-stock fallbacks so the class works before that override. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0b5ed7;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a58ca;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #5c636a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #565e64;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #bb2d3b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #b02a37;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #d3d4d5;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #c6c7c8;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-outline-primary {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
}

.btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
}

.btn-link {
  --bs-btn-color: var(--fabric-primary, #2563EB);
  --bs-btn-hover-color: var(--fabric-primary-hover, #1D4ED8);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  text-decoration: underline;
}

/* Close button — same visual as Bootstrap's (SVG X, dims on hover) but
   drawn as our own inline SVG, no external asset. */
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: var(--bs-border-radius, 0.375rem);
  opacity: 0.5;
  cursor: pointer;
}

.btn-close:hover {
  opacity: 0.75;
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
  --bs-alert-bg: #cfe2ff;
  --bs-alert-color: #084298;
  --bs-alert-border-color: #b6d4fe;
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: 1px solid var(--bs-alert-border-color);
  border-radius: var(--bs-border-radius, 0.375rem);
}

.alert-warning {
  --bs-alert-bg: #fff3cd;
  --bs-alert-color: #664d03;
  --bs-alert-border-color: #ffecb5;
}

.alert-dismissible {
  padding-right: 3rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.25rem 1rem;
}

.alert.fade {
  transition: opacity 0.15s linear;
}

.alert.fade:not(.show) {
  opacity: 0;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--bs-border-color, rgba(0,0,0,.125));
  --bs-card-border-radius: var(--bs-border-radius, 0.375rem);
  --bs-card-bg: var(--bs-body-bg, #fff);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.card-header {
  padding: 0.5rem var(--bs-card-spacer-x);
  background-color: var(--bs-card-cap-bg);
  border-bottom: 1px solid var(--bs-card-border-color);
}

/* ============================================================
   Tables
   ============================================================ */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-body-color);
  vertical-align: top;
  border-color: var(--bs-border-color, #dee2e6);
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: inherit;
}

.table > thead {
  vertical-align: bottom;
  border-bottom: 2px solid currentColor;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Forms
   ============================================================ */
.form-control, .form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
  appearance: none;
}

.form-control-sm, .form-select-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.form-control:disabled, .form-select:disabled {
  background-color: var(--bs-tertiary-bg);
  opacity: 1;
}

.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

textarea.form-control {
  min-height: calc(1.5em + 0.75rem + 2px);
  resize: vertical;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}

.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: var(--bs-body-bg, #fff);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  appearance: none;
  color-adjust: exact;
  cursor: pointer;
}

.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}

.form-check-input[type=radio] {
  border-radius: 50%;
}

.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-check-input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3e%3cpath d='M6 10l3 3 6-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.form-check-input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-label {
  cursor: pointer;
}

.form-switch {
  padding-left: 2.5em;
}

.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}

.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.is-invalid {
  border-color: var(--fabric-error, #dc3545) !important;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--fabric-error, #dc3545);
}

.invalid-feedback.d-block, .is-invalid ~ .invalid-feedback {
  display: block;
}

.required {
  font-weight: 600;
}

/* ============================================================
   Nav
   ============================================================ */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--fabric-primary, #2563EB);
  text-decoration: none;
  cursor: pointer;
}

.nav-underline {
  gap: 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.nav-underline .nav-link {
  padding: 0.5rem 0.125rem;
  color: var(--bs-secondary-color);
  border-bottom: 2px solid transparent;
}

/* ============================================================
   Dropdown
   ============================================================ */
.dropdown, .dropup {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  display: none;
  min-width: 10rem;
  margin: 0.125rem 0 0;
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg, #fff);
  background-clip: padding-box;
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-menu.show {
  display: block;
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin: 0 0 0.125rem;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  color: var(--bs-body-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bs-tertiary-bg);
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  background-color: var(--fabric-primary, #2563EB);
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
}

/* ============================================================
   Modal
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: none;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal.show {
  display: block;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
  transform: translate(0, -50px);
  transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
  transform: none;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
  }
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--bs-body-bg, #fff);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  outline: 0;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  border-top-left-radius: var(--bs-border-radius-lg, 0.5rem);
  border-top-right-radius: var(--bs-border-radius-lg, 0.5rem);
}

.modal-title {
  margin: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.modal-footer > * {
  margin: 0.25rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background-color: var(--bs-backdrop-bg, #000);
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity, 0.5);
}

body.modal-open {
  overflow: hidden;
}

/* ============================================================
   Toast
   ============================================================ */
.toast-container {
  z-index: 1100;
}

.toast {
  width: 320px;
  max-width: 100%;
  margin-bottom: 0.75rem;
  background-color: var(--bs-body-bg, #fff);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.toast.show {
  display: block;
  opacity: 1;
}

.toast:not(.show) {
  display: none;
}

.toast .d-flex {
  display: flex;
  align-items: center;
}

.toast-body {
  padding: 0.75rem;
  word-wrap: break-word;
  flex: 1 1 auto;
}

.text-bg-success {
  background-color: var(--fabric-success, #14B8A6) !important;
  color: #fff !important;
}

.text-bg-danger {
  background-color: var(--fabric-error, #DC2626) !important;
  color: #fff !important;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  gap: 0.25rem;
}

.page-link {
  display: block;
  padding: 0.375rem 0.75rem;
  color: var(--fabric-primary, #2563EB);
  text-decoration: none;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
}

.page-link:hover {
  background-color: var(--bs-tertiary-bg);
}

.page-item.active .page-link {
  color: #fff;
  background-color: var(--fabric-primary, #2563EB);
  border-color: var(--fabric-primary, #2563EB);
}

.page-item.disabled .page-link {
  color: var(--bs-secondary-color);
  pointer-events: none;
  background-color: var(--bs-body-bg, #fff);
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* ============================================================
   Spinner
   ============================================================ */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fab-spin 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@keyframes fab-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================
   Tooltip (own version — fixed placement, no Popper)
   ============================================================ */
.tooltip {
  position: absolute;
  z-index: 1080;
  display: block;
  font-size: 0.8125rem;
  opacity: 0;
  transition: opacity 0.1s linear;
  pointer-events: none;
}

.tooltip.show {
  opacity: 0.95;
}

.tooltip-inner {
  max-width: 220px;
  padding: 0.375rem 0.625rem;
  color: #fff;
  text-align: center;
  background-color: var(--fabric-navy, #0D1B2A);
  border-radius: var(--bs-border-radius, 0.375rem);
}

.tooltip-arrow {
  position: absolute;
  width: 0.6rem;
  height: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-arrow::before {
  content: "";
  position: absolute;
  border: 0.3rem solid transparent;
}

.tooltip--top .tooltip-arrow {
  bottom: 0;
}

.tooltip--top .tooltip-arrow::before {
  border-top-color: var(--fabric-navy, #0D1B2A);
  border-bottom-width: 0;
  top: -1px;
}

.tooltip--bottom .tooltip-arrow {
  top: -0.3rem;
}

.tooltip--bottom .tooltip-arrow::before {
  border-bottom-color: var(--fabric-navy, #0D1B2A);
  border-top-width: 0;
}

.tooltip--left .tooltip-arrow, .tooltip--right .tooltip-arrow {
  display: none;
}

/* ============================================================
   Fade transition (shared by alerts/modal/toast/dropdown) — own
   version of Bootstrap's .fade utility.
   ============================================================ */
.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

/* ============================================================
   Collapse (generic — Accordion builds on this)
   ============================================================ */
.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}

/* ============================================================
   Accordion
   ============================================================ */
.accordion {
  --bs-accordion-border-color: var(--bs-border-color, rgba(0,0,0,.125));
}

.accordion-item {
  border: 1px solid var(--bs-accordion-border-color);
  background: var(--bs-body-bg, #fff);
}

.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-border-radius, 0.375rem);
  border-top-right-radius: var(--bs-border-radius, 0.375rem);
}

.accordion-item:last-of-type {
  border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
  border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
}

.accordion-item + .accordion-item {
  border-top: 0;
}

.accordion-header {
  margin: 0;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--bs-body-color);
  text-align: left;
  background: var(--bs-body-bg, #fff);
  border: 0;
  cursor: pointer;
}

.accordion-button::after {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1rem;
  transition: transform 0.2s ease;
}

.accordion-button.collapsed::after {
  transform: rotate(-90deg);
}

.accordion-button:not(.collapsed) {
  color: var(--fabric-primary, #2563EB);
  background-color: var(--fabric-primary-subtle, #EFF6FF);
}

.accordion-body {
  padding: 1rem 1.25rem;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
  font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding-right: 0.5rem;
  color: var(--bs-secondary-color);
}

.breadcrumb-item.active {
  color: var(--bs-secondary-color);
}

.breadcrumb-item a {
  color: var(--fabric-primary, #2563EB);
  text-decoration: none;
}

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

/* ============================================================
   Button group
   ============================================================ */
.btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group > .btn:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active {
  z-index: 1;
}

.btn-group-sm > .btn {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 0.875rem;
}

/* ============================================================
   Input group
   ============================================================ */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
}

/* ============================================================
   List group
   ============================================================ */
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: var(--bs-body-color);
  text-decoration: none;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: var(--fabric-primary, #2563EB);
  border-color: var(--fabric-primary, #2563EB);
}

.list-group-item.disabled {
  color: var(--bs-secondary-color);
  pointer-events: none;
  background-color: var(--bs-body-bg, #fff);
}

.list-group-item-action {
  cursor: pointer;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--bs-tertiary-bg);
}

/* ============================================================
   Progress
   ============================================================ */
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: var(--bs-tertiary-bg);
  border-radius: var(--bs-border-radius, 0.375rem);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--fabric-primary, #2563EB);
  transition: width 0.3s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: fab-progress-stripes 1s linear infinite;
}

@keyframes fab-progress-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
/* ============================================================
   Navbar (catalog completeness — the app's own chrome uses
   .app-shell / .sidebar-* instead, this is unused in-app)
   ============================================================ */
.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-body-color);
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  gap: 0.25rem;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  background-color: transparent;
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
  border-radius: var(--bs-border-radius, 0.375rem);
  cursor: pointer;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-light {
  background-color: var(--bs-tertiary-bg);
}

.navbar-dark {
  background-color: var(--fabric-navy, #0D1B2A);
}

.navbar-dark .navbar-brand, .navbar-dark .nav-link {
  color: #fff;
}

/* ============================================================
   Carousel
   ============================================================ */
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.5s ease-in-out;
}

.carousel-item.active, .carousel-item-next, .carousel-item-prev {
  display: block;
}

.carousel-control-prev, .carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  opacity: 0.8;
  cursor: pointer;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
  background-color: rgba(13, 27, 42, 0.4);
  border-radius: 50%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 0 1rem;
  gap: 0.5rem;
}

.carousel-indicators button {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 2rem;
  height: 3px;
  padding: 0;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  opacity: 0.5;
}

.carousel-indicators button.active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}

/* ============================================================
   Popover (distinct from Tooltip — click-triggered, header+body)
   ============================================================ */
.popover {
  position: absolute;
  z-index: 1070;
  display: block;
  max-width: 276px;
  font-size: 0.875rem;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.1s linear;
}

.popover.show {
  opacity: 1;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top-left-radius: calc(var(--bs-border-radius-lg, 0.5rem) - 1px);
  border-top-right-radius: calc(var(--bs-border-radius-lg, 0.5rem) - 1px);
}

.popover-body {
  padding: 0.75rem;
  color: var(--bs-body-color);
}

/* ============================================================
   Placeholders (Bootstrap-parity loading state — this app's
   primary loading pattern is the more bespoke .skel-* system,
   see _feedback.scss; these exist for catalog completeness)
   ============================================================ */
.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentColor;
  opacity: 0.5;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.placeholder-glow .placeholder {
  animation: fab-placeholder-glow 1.5s ease-in-out infinite;
}

@keyframes fab-placeholder-glow {
  50% {
    opacity: 0.2;
  }
}
.placeholder-wave .placeholder {
  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation: fab-placeholder-wave 2s linear infinite;
}

@keyframes fab-placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
    mask-position: -200% 0%;
  }
}
/* ============================================================
   Offcanvas
   ============================================================ */
.offcanvas {
  position: fixed;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background-color: var(--bs-body-bg, #fff);
  background-clip: padding-box;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  outline: 0;
  transition: transform 0.3s ease-in-out;
  visibility: hidden;
}

.offcanvas.show {
  visibility: visible;
}

.offcanvas-start {
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  border-right: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
  transform: translateX(-100%);
}

.offcanvas-end {
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  border-left: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
  transform: translateX(100%);
}

.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: 240px;
  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
  transform: translateY(-100%);
}

.offcanvas-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: 240px;
  border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
  transform: translateY(100%);
}

.offcanvas-start.show, .offcanvas-end.show {
  transform: translateX(0);
}

.offcanvas-top.show, .offcanvas-bottom.show {
  transform: translateY(0);
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
}

.offcanvas-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.offcanvas-body {
  flex: 1 1 auto;
  padding: 1rem;
  overflow-y: auto;
}

/* ============================================================
   Typography extras
   ============================================================ */
.display-1 {
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-5 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-6 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.blockquote-footer::before {
  content: "— ";
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

/* ============================================================
   Images & Figures
   ============================================================ */
.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

/* ============================================================
   Table variants
   ============================================================ */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0, 0, 0, 0.03);
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-dark {
  --bs-body-color: #fff;
  color: #fff;
  background-color: var(--fabric-navy, #0D1B2A);
  border-color: rgba(255, 255, 255, 0.1);
}

caption {
  caption-side: bottom;
}

.caption-top caption {
  caption-side: top;
}

/* ============================================================
   Form extras
   ============================================================ */
.form-floating {
  position: relative;
}

.form-floating > .form-control, .form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
  line-height: 1.25;
}

.form-floating > .form-control::placeholder {
  color: transparent;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  color: var(--bs-secondary-color);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
}

.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: var(--fabric-primary, #2563EB);
  border-radius: 50%;
  cursor: pointer;
}

.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  background-color: var(--bs-border-color, #dee2e6);
  border-radius: 1rem;
}

.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: var(--fabric-primary, #2563EB);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  background-color: var(--bs-border-color, #dee2e6);
  border-radius: 1rem;
}

.form-control[type=file] {
  overflow: hidden;
}

.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.is-valid {
  border-color: var(--fabric-success, #14B8A6) !important;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--fabric-success, #14B8A6);
}

.valid-feedback.d-block, .is-valid ~ .valid-feedback {
  display: block;
}

/* ============================================================
   Grid
   ------------------------------------------------------------
   Own version of Bootstrap's grid system — container/row/col-*,
   responsive column widths, offsets, and gutters. Deliberately
   built even though the app itself uses flexbox + a custom
   app-shell rather than this grid anywhere today — added for
   full Bootstrap "Layout" catalog parity, same reasoning as the
   Navbar/Carousel/etc. components in _native.scss.
   ============================================================ */
.container, .container-fluid {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container, .container-md {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container, .container-lg {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container, .container-xl {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container, .container-xxl {
    max-width: 1320px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.offset-3 {
  margin-left: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.offset-6 {
  margin-left: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.offset-9 {
  margin-left: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-12 {
  margin-left: 100%;
}

.offset-0 {
  margin-left: 0;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-12 {
    margin-left: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-12 {
    margin-left: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-12 {
    margin-left: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-12 {
    margin-left: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-12 {
    margin-left: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
}
.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.g-0 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.gx-0 {
  --bs-gutter-x: 0;
}

.gy-0 {
  --bs-gutter-y: 0;
}

.g-1 {
  --bs-gutter-x: 0.25rem;
  --bs-gutter-y: 0.25rem;
}

.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2 {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.5rem;
}

.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.gx-3 {
  --bs-gutter-x: 1rem;
}

.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5 {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}

.gx-5 {
  --bs-gutter-x: 3rem;
}

.gy-5 {
  --bs-gutter-y: 3rem;
}

/* ============================================================
   App shell - sidebar + topbar + body
   ============================================================ */
html {
  font-size: 14px;
}

html, body {
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--bs-body-bg);
}

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  /* Caps the working content width so pages stay left-aligned but don't
     stretch edge-to-edge on ultra-wide monitors. Topbar + body share it
     so the topbar action lines up with the content's right edge. */
  --app-max-width: 1600px;
}

.app-sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: radial-gradient(ellipse 160% 50% at 0% 0%, rgba(37, 99, 235, 0.1) 0%, transparent 55%), var(--fabric-navy);
  border-right: none;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* On desktop the topbar carries no controls (nav + user menu live in the
   sidebar, and each page's hero owns its own actions), so it's hidden to
   reclaim the vertical space. It reappears on mobile purely to host the
   hamburger that opens the off-canvas sidebar (see the media query below). */
.app-topbar {
  display: none;
  flex-shrink: 0;
  height: 52px;
  padding: 0 1.75rem;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Mobile nav toggle - hidden on desktop, pushed to the left edge on mobile. */
.topbar-hamburger {
  display: none;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
  cursor: pointer;
}

.topbar-hamburger i {
  width: 18px;
  height: 18px;
}

.topbar-hamburger:hover {
  background: var(--bs-tertiary-bg);
}

/* Off-canvas backdrop - only used on mobile when the drawer is open. */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.45);
  z-index: 1040;
}

.nav-overlay--show {
  display: block;
}

.app-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
  background: var(--bs-body-bg);
  /* Full-width so the background + scrollbar fill the viewport; the inner
     wrapper caps and left-aligns the actual content (see --app-max-width). */
  /* Dossier design tokens - shared site-wide so .dsec, .kv-grid,
     .show-*, .flag-chip and .page-hero resolve on every page, not
     just inside a .dossier wrapper. Reference the --fabric-* tokens
     so there's one source of truth for the palette. */
  --doc-ink: var(--fabric-navy);
  --doc-paper: var(--fabric-white);
  --doc-line: rgba(13,27,42,.09);
  --doc-mute: var(--fabric-text-muted);
  --doc-accent: var(--fabric-blue);
  --doc-spine: var(--fabric-blue);
  --ff-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-docket: 'DM Mono', ui-monospace, monospace;
}

.app-body__inner {
  max-width: var(--app-max-width);
}

@media (max-width: 768px) {
  .app-topbar {
    display: flex;
  }
  .topbar-hamburger {
    display: inline-flex;
  }
  .app-body {
    padding: 1rem;
  }
  /* Sidebar becomes an off-canvas drawer slid in from the left. */
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 248px;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .app-sidebar--open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }
}
/* The backdrop is mobile-only; never show it on desktop even if a stale
   --show class lingers after a resize. */
@media (min-width: 769px) {
  .nav-overlay {
    display: none !important;
  }
}
/* ============================================================
   Sidebar navigation
   ============================================================ */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 1.25rem;
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-brand:hover {
  color: #fff;
}

.sidebar-section {
  padding: 1rem 1rem 0.5rem;
}

.sidebar-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.32);
  padding: 0 0.5rem 0.5rem;
  pointer-events: none;
  user-select: none;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 4px;
}

.sidebar-link i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

.sidebar-link.active {
  background: rgba(37, 99, 235, 0.2);
  color: #60A5FA;
  font-weight: 500;
}

/* Sidebar items for modules that aren't built yet - visible (so the nav
   reads as complete, matching the target design) but inert: no href, no
   hover feedback, dimmed text, a small "Soon" tag instead of an icon-only
   affordance. */
.sidebar-link--disabled {
  color: rgba(255, 255, 255, 0.28);
  cursor: default;
  justify-content: space-between;
}

.sidebar-link--disabled:hover {
  background: none;
  color: rgba(255, 255, 255, 0.28);
}

.sidebar-link--disabled > i:first-child {
  opacity: 0.6;
}

.sidebar-soon {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  padding: 0.0625rem 0.4rem;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Indented sub-link shown under a real parent item (Compliance -> My
   incidents, Settings -> Users/Locations) only while that parent section
   is active. */
.sidebar-sublink {
  display: block;
  margin: 0 0 4px 2.125rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--bs-border-radius);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.sidebar-sublink:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
}

.sidebar-sublink.active {
  color: #60A5FA;
  font-weight: 500;
}

/* Version tag + user menu pinned to the foot of the sidebar (margin-top:auto
   pushes the whole footer down within the flex column). */
.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-version {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
  padding: 0.5rem 0.5rem 0;
}

/* Sidebar user menu (dropup) - avatar, name/role, chevron. Opens upward
   since it's pinned to the bottom of the sidebar. */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.sidebar-user:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon variant - used for the System admin dropup, distinct from the
   user's own initials avatar. */
.sidebar-user-avatar--icon {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
}

.sidebar-user-avatar--icon i {
  width: 16px;
  height: 16px;
}

.sidebar-user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.sidebar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-role {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-chevron {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.sidebar-footer .dropdown-menu {
  width: 100%;
}

/* ============================================================
   Topbar - brand + user dropdown
   ============================================================ */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.625rem 0.3rem 0.375rem;
  background: none;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bs-body-color);
}

.topbar-user:hover {
  background: var(--bs-tertiary-bg);
  border-color: rgba(0, 0, 0, 0.15);
}

.topbar-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.topbar-username {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-chevron {
  width: 12px;
  height: 12px;
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.topbar-dropdown {
  min-width: 210px;
  padding: 0.25rem 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.09);
  border-radius: var(--bs-border-radius);
}

.topbar-dropdown-header {
  padding: 0.625rem 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.topbar-dropdown-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.topbar-dropdown-email {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.topbar-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.4rem 1rem;
}

.topbar-dropdown .dropdown-item.active {
  background: rgba(37, 99, 235, 0.08);
  color: #2563EB;
}

.topbar-dropdown .dropdown-item:hover {
  background: var(--bs-tertiary-bg);
}

.topbar-dropdown .dropdown-item.active:hover {
  background: rgba(37, 99, 235, 0.12);
}

.topbar-dropdown-signout {
  color: var(--bs-secondary-color) !important;
}

.topbar-dropdown-signout:hover {
  color: var(--bs-body-color) !important;
}

.topbar-dropdown .dropdown-divider {
  margin: 0.25rem 0;
  border-color: var(--bs-border-color);
}

/* Uniform control height across the topbar - the New incident button
   (.btn-sm) and mobile hamburger compute different heights from their own
   padding, so pin them to one height and centre their contents. */
.app-topbar .btn {
  display: inline-flex;
  align-items: center;
}

.app-topbar .btn,
.topbar-hamburger {
  height: 34px;
  box-sizing: border-box;
}

/* ============================================================
   Page hero - site-wide page header banner.
   Designed as a first-class member of the .dsec card family: the
   same white shell, hairline border, 10px radius and shadow as
   every content card below it, scaled up for the page title. The
   eyebrow speaks the site's docket micro-label voice (DM Mono +
   tracking, matching .dsec__title / .kv-label / table headers),
   led by a small modular-block marker that echoes the Fabric
   pixel-grid logo and carries the register accent colour. The meta
   strip mirrors .dsec__toolbar so the whole page reads as one card
   system. See .dossier-hero for the separate dark incident header.
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border-radius: 10px;
  background: var(--doc-paper);
  border: 1px solid var(--doc-line);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}

.page-hero__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem 1.125rem;
}

.page-hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--doc-mute);
  margin-bottom: 0.5rem;
}

/* modular-block marker — echoes the pixel-grid logo and carries the
   register accent (blue by default; recoloured via --doc-spine on the
   .dossier--* modifiers the incident-create hero passes through). The
   soft halo, mixed from the same accent, gives it a quiet "live" feel. */
.page-hero__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--doc-spine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--doc-spine) 13%, transparent);
  flex-shrink: 0;
}

.page-hero__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--doc-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.page-hero__lead {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: var(--doc-mute);
  line-height: 1.5;
  max-width: 70ch;
}

.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.page-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--doc-mute);
  background: rgba(13, 27, 42, 0.015);
  border-top: 1px solid var(--doc-line);
}

.page-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.page-hero__meta-item i {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

/* middot separators between items — matches the site's "·" lead separator */
.page-hero__meta-item + .page-hero__meta-item::before {
  content: "·";
  color: rgba(13, 27, 42, 0.25);
}

.page-hero__meta-item--end {
  margin-left: auto;
  font-family: var(--ff-docket);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.page-hero__meta-item--end::before {
  content: none;
}

/* An attention count chip in the meta strip (e.g. "3 open incidents").
   Subtle blue by default; inverts to a solid chip on the navy welcome
   hero below. Replaces per-view inline colour styling. */
.page-hero__alert {
  font-family: var(--ff-docket);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.1875rem 0.5625rem;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.14);
  color: var(--fabric-blue);
}

/* ── Dashboard welcome variant ────────────────────────────────
   The landing page gets its own navy "command surface" hero — tied
   to the navy sidebar and the brand's high-confidence colour —
   instead of the white document header every other page uses. One
   soft blue glow for depth (not a busy gradient), a teal marker for
   the "connected / operational" accent, white title on navy. */
.page-hero--welcome {
  border-color: transparent;
  background: var(--fabric-navy); /* fallback if the gradient layer fails to parse */
  background: radial-gradient(135% 135% at 100% 0%, rgba(37, 99, 235, 0.24) 0%, transparent 52%), var(--fabric-navy);
  box-shadow: 0 12px 30px -20px rgba(13, 27, 42, 0.55);
}

.page-hero--welcome .page-hero__kicker {
  color: rgba(255, 255, 255, 0.55);
}

.page-hero--welcome .page-hero__kicker::before {
  background: var(--fabric-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fabric-teal) 22%, transparent);
}

.page-hero--welcome .page-hero__title {
  color: var(--fabric-white);
}

.page-hero--welcome .page-hero__lead {
  color: rgba(255, 255, 255, 0.72);
}

.page-hero--welcome .page-hero__meta {
  background: rgba(255, 255, 255, 0.04);
  border-top-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
}

.page-hero--welcome .page-hero__meta-item + .page-hero__meta-item::before {
  color: rgba(255, 255, 255, 0.28);
}

.page-hero--welcome .page-hero__alert {
  background: rgba(96, 143, 247, 0.2);
  color: #cfe0ff;
}

/* ============================================================
   .dsec toolbar + flush table treatment (site-wide list pages)
   ============================================================ */
.dsec__toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--doc-line);
  background: rgba(13, 27, 42, 0.015);
}

.dsec__toolbar .form-select,
.dsec__toolbar .form-control {
  width: auto;
}

/* A table that sits flush inside a document card (allowing for a
   .table-responsive wrapper between the body and the table). */
.dsec__body--flush .table {
  margin-bottom: 0;
}

.dsec__body--flush .table > thead > tr > th {
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--doc-mute);
  background: rgba(13, 27, 42, 0.02);
  border-bottom: 1px solid var(--doc-line);
  padding: 0.625rem 1rem;
  white-space: nowrap;
}

.dsec__body--flush .table > tbody > tr > td {
  padding: 0.6875rem 1rem;
  border-bottom-color: var(--doc-line);
  vertical-align: middle;
}

.dsec__body--flush .table > tbody > tr:last-child > td {
  border-bottom: none;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb {
  margin-bottom: 1rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-secondary-color);
  opacity: 0.4;
}

.breadcrumb-item a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #2563EB;
}

.breadcrumb-item.active {
  color: var(--bs-body-color);
  font-weight: 500;
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
}

/* ════════════════════════════════════════════════════════════
   INCIDENT DOSSIER  ·  "Regulatory Case File"
   A refined editorial treatment of a single incident record.
   Playfair Display (gravitas) + DM Mono (docket) + Inter (body),
   navy ink, warm paper, register-coloured spine.
   ════════════════════════════════════════════════════════════ */
.dossier {
  --doc-ink: var(--fabric-navy);
  --doc-paper: var(--fabric-white);
  --doc-line: rgba(13,27,42,.09);
  --doc-mute: var(--fabric-text-muted);
  --doc-accent: var(--fabric-blue);
  --doc-spine: var(--fabric-blue);
  --ff-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-docket: 'DM Mono', ui-monospace, monospace;
  counter-reset: docsec;
}

.dossier--gambling {
  --doc-spine: #7c3aed;
}

.dossier--liquor {
  --doc-spine: #0891b2;
}

.dossier--aml {
  --doc-spine: #be123c;
}

.dossier--food-safety {
  --doc-spine: #0D9488;
}

.dossier--welfare {
  --doc-spine: #F59E0B;
}

/* ── Hero ─────────────────────────────────────────────────── */
.dossier-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.75rem;
  border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.16) 0%, transparent 46%), radial-gradient(90% 120% at 100% 0%, rgba(56, 89, 138, 0.22) 0%, transparent 50%), var(--doc-ink);
  box-shadow: 0 18px 40px -22px rgba(13, 27, 42, 0.55);
}

/* hairline "secure document" texture */
.dossier-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

/* register-coloured spine */
.dossier-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background: var(--doc-spine);
}

.dossier-hero__watermark {
  position: absolute;
  top: -0.35em;
  right: 1.25rem;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.dossier-hero__body {
  position: relative;
  padding: 1.75rem 2rem 1.5rem 2.25rem;
}

.dossier-hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #93C5FD;
  margin-bottom: 0.875rem;
}

.dossier-hero__kicker .dot {
  color: rgba(255, 255, 255, 0.25);
}

.dossier-hero__id {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.02;
  margin-bottom: 0.5rem;
}

.dossier-hero__id::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.625rem;
  border-radius: 3px;
  background: var(--doc-spine);
}

.dossier-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
  max-width: 60ch;
  margin-top: 0.875rem;
}

.dossier-hero__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-top: 1.125rem;
}

.dossier-hero__meta {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.8125rem 2rem 0.8125rem 2.25rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.dossier-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.dossier-hero__meta-item i {
  opacity: 0.6;
}

.dossier-hero__meta-item--end {
  margin-left: auto;
  font-family: var(--ff-docket);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ── Document section card ────────────────────────────────── */
.dsec {
  position: relative;
  background: var(--doc-paper);
  border: 1px solid var(--doc-line);
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}

.dsec__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--doc-line);
}

/* numbered like a real file divider - 01, 02, 03 … */
.dsec--numbered .dsec__head::before {
  counter-increment: docsec;
  content: counter(docsec, decimal-leading-zero);
  font-family: var(--ff-docket);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--doc-accent);
  letter-spacing: 0.04em;
}

.dsec__title {
  font-family: var(--ff-docket);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--doc-ink);
}

.dsec__count {
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
  color: var(--doc-mute);
  background: rgba(13, 27, 42, 0.05);
  border-radius: 5px;
  padding: 0.0625rem 0.4375rem;
}

.dsec__head-end {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.dsec__body {
  padding: 1.125rem 1.25rem;
}

.dsec__body--flush {
  padding: 0;
}

.dsec__body--tight {
  padding: 0.5rem 0.75rem;
}

/* ── Key/value grid ───────────────────────────────────────── */
.kv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6875rem 1.5rem;
  font-size: 0.875rem;
}

.kv-label {
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--doc-mute);
  white-space: nowrap;
  padding-top: 0.1875rem;
}

.kv-value {
  color: var(--doc-ink);
  min-width: 0;
  line-height: 1.5;
}

/* ── Compliance "stamps" ──────────────────────────────────── */
.flag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 6px;
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1.5px solid;
}

.flag-chip i {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.flag-chip--warning {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.flag-chip--info {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}

.flag-chip--aml {
  background: #fff1f2;
  border-color: #fda4af;
  color: #9f1239;
}

.flag-chip--gambling {
  background: #faf5ff;
  border-color: #d8b4fe;
  color: #6d28d9;
}

.flag-chip--food {
  background: #F0FDFA;
  border-color: #5EEAD4;
  color: #0F766E;
}

/* ── Narrative ────────────────────────────────────────────── */
.dsec .narrative-text {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #1e293b;
}

/* ── Sidebar · action list ────────────────────────────────── */
.show-actions {
  display: flex;
  flex-direction: column;
  padding: 0.375rem;
  gap: 0.125rem;
}

.show-action-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  background: transparent;
  color: var(--doc-ink);
  cursor: pointer;
  width: 100%;
  text-align: left;
  line-height: 1.3;
  border-radius: 7px;
  transition: background 0.12s, color 0.12s;
}

.show-action-btn:hover {
  background: rgba(13, 27, 42, 0.04);
  color: var(--doc-ink);
}

.show-action-btn i {
  width: 15px;
  height: 15px;
  color: var(--doc-mute);
  flex-shrink: 0;
}

.show-action-btn--primary {
  background: var(--doc-accent);
  color: #fff;
  font-weight: 600;
  justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(37, 99, 235, 0.45);
}

.show-action-btn--primary:hover {
  background: var(--fabric-primary-hover);
  color: #fff;
}

.show-action-btn--primary i {
  color: rgba(255, 255, 255, 0.8);
}

.show-action-btn--danger {
  color: #b91c1c;
}

.show-action-btn--danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.show-action-btn--danger i {
  color: #d4544a;
}

.show-action-divider {
  height: 1px;
  background: var(--doc-line);
  margin: 0.375rem 0.5rem;
}

/* ── Sidebar · about panel ────────────────────────────────── */
.show-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--doc-line);
}

.show-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.show-info-row:first-child {
  padding-top: 0;
}

.show-info-icon {
  width: 18px;
  flex-shrink: 0;
  color: var(--doc-mute);
  margin-top: 1px;
}

.show-info-icon i {
  width: 14px;
  height: 14px;
}

.show-info-label {
  font-family: var(--ff-docket);
  font-weight: 500;
  color: var(--doc-mute);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.1875rem;
}

.show-info-val {
  color: var(--doc-ink);
  font-size: 0.8125rem;
}

/* ── Review & Submit (dossier variant) ────────────────────── */
.review-lead {
  font-size: 0.9375rem;
  color: var(--doc-mute);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 70ch;
}

.review-narrative {
  font-size: 0.9375rem;
  line-height: 1.7;
  border-color: var(--doc-line);
}

.review-narrative:focus {
  border-color: var(--doc-accent);
  box-shadow: 0 0 0 0.18rem rgba(37, 99, 235, 0.14);
}

.review-confirm {
  border-color: rgba(37, 99, 235, 0.3);
  background: linear-gradient(0deg, #EFF6FF, #EFF6FF);
}

.review-confirm .dsec__head {
  border-bottom-color: rgba(37, 99, 235, 0.18);
}

.review-confirm__label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--doc-ink);
  cursor: pointer;
}

.review-confirm__label input {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: var(--doc-accent);
  cursor: pointer;
}

.review-footnote {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--doc-mute);
}

/* ── History · audit timeline ─────────────────────────────── */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--doc-line);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 0.875rem;
  padding: 0.4375rem 0;
}

.timeline-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dot, #94a3b8);
  color: var(--dot, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-dot i {
  width: 12px;
  height: 12px;
}

.timeline-body {
  min-width: 0;
  padding-top: 1px;
}

.timeline-headline {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.timeline-action {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--doc-ink);
}

.timeline-detail {
  font-family: var(--ff-docket);
  font-size: 0.75rem;
  color: var(--doc-mute);
  background: rgba(13, 27, 42, 0.05);
  border-radius: 4px;
  padding: 0.0625rem 0.375rem;
  word-break: break-all;
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  flex-wrap: wrap;
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  color: var(--doc-mute);
}

.timeline-sep {
  opacity: 0.4;
}

.timeline-ip {
  font-family: var(--ff-docket);
}

/* ── Orchestrated load reveal ─────────────────────────────── */
@keyframes doc-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dossier-hero,
.dossier .incident-main > *,
.dossier .incident-sidebar > .dsec,
.dossier .review-grid > *,
.dossier form > .dsec {
  animation: doc-rise 0.5s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

.dossier .review-grid > *:nth-child(1) {
  animation-delay: 0.06s;
}

.dossier .review-grid > *:nth-child(2) {
  animation-delay: 0.12s;
}

.dossier form > .dsec {
  animation-delay: 0.16s;
}

.dossier .incident-main > *:nth-child(1) {
  animation-delay: 0.04s;
}

.dossier .incident-main > *:nth-child(2) {
  animation-delay: 0.09s;
}

.dossier .incident-main > *:nth-child(3) {
  animation-delay: 0.14s;
}

.dossier .incident-main > *:nth-child(4) {
  animation-delay: 0.19s;
}

.dossier .incident-main > *:nth-child(5) {
  animation-delay: 0.24s;
}

.dossier .incident-main > *:nth-child(n+6) {
  animation-delay: 0.28s;
}

.dossier .incident-sidebar > .dsec:nth-child(odd) {
  animation-delay: 0.12s;
}

.dossier .incident-sidebar > .dsec:nth-child(even) {
  animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .dossier-hero,
  .dossier .incident-main > *,
  .dossier .incident-sidebar > .dsec {
    animation: none;
  }
}
/* ============================================================
   Layouts
   ============================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.incident-layout {
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 1.5rem;
  align-items: start;
}

.incident-main {
  min-width: 0;
}

.incident-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 960px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Card helpers
   ============================================================ */
.card {
  --bs-card-border-radius: var(--fabric-radius-lg);
  --bs-card-spacer-y: 24px;
  --bs-card-spacer-x: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  border-color: var(--fabric-border);
}

.card-header {
  background: rgba(0, 0, 0, 0.018);
  border-bottom-color: var(--fabric-border);
}

/* ============================================================
   Form helpers
   ============================================================ */
.form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row--3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .form-row--2col,
  .form-row--3col {
    grid-template-columns: 1fr;
  }
}
.form-section {
  border: none;
  padding: 0;
  margin-bottom: 2rem;
}

.form-section-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.form-section-subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  margin-top: 0.3rem;
}

.required {
  color: #dc2626;
}

.form-section--aml {
  background: #EFF6FF;
  border: 1px solid #f9cba7;
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  margin-top: 1rem;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.narrative-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--bs-body-color);
  white-space: pre-wrap;
}

.raw-text {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  padding: 0.875rem;
  border-radius: var(--bs-border-radius);
  white-space: pre-wrap;
}

.link-mono {
  /* Report codes read more clearly in Inter than in DM Mono;
     tabular figures (set in the polish section) keep them aligned. */
  font-family: var(--bs-font-sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2563EB;
  text-decoration: none;
}

.link-mono:hover {
  color: #1D4ED8;
  text-decoration: underline;
}

/* ============================================================
   Definition list (horizontal)
   ============================================================ */
.dl-horizontal {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.375rem 1rem;
  font-size: 0.875rem;
}

.dl-horizontal dt {
  font-weight: 600;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.dl-horizontal dd {
  margin: 0;
}

/* ============================================================
   Stat strip (dashboard)
   ============================================================ */
.stat-strip {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.stat-strip .card {
  flex: 1 1 160px;
  min-width: 150px;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bs-body-color);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.stat-trend {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.stat-trend-up {
  color: #14B8A6;
}

.stat-trend-down {
  color: #dc2626;
}

.stat-alert .stat-value {
  color: #dc2626;
}

.stat-warn .stat-value {
  color: #F59E0B;
}

/* Card anatomy: label + icon badge (top row) -> big number -> trend. */
.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.dash-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-stat-icon i {
  width: 16px;
  height: 16px;
}

.dash-stat-icon--gambling {
  background: rgba(37, 99, 235, 0.12);
  color: #2563EB;
}

.dash-stat-icon--liquor {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

.dash-stat-icon--aml {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.dash-stat-icon--critical {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.dash-stat-icon--ok {
  background: rgba(20, 184, 166, 0.12);
  color: #14B8A6;
}

.dash-stat-icon--draft {
  background: rgba(107, 114, 128, 0.12);
  color: #64748B;
}

.dash-stat-icon--warn {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

/* ============================================================
   Incident feed rows (dashboard)
   ============================================================ */
.incident-feed-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.incident-feed-row:last-child {
  border-bottom: none;
}

.incident-feed-row:hover {
  background: var(--bs-tertiary-bg);
  color: inherit;
}

.incident-feed-id {
  font-family: var(--bs-font-sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: #2563EB;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.incident-feed-title {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.incident-feed-meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.sev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sev-dot--critical {
  background: #dc2626;
}

.sev-dot--high {
  background: #F59E0B;
}

.sev-dot--medium {
  background: #2563eb;
}

.sev-dot--low {
  background: #9ca3af;
}

/* ============================================================
   Ring card - circular progress stat (dashboard)
   ============================================================ */
.ring-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.ring-card__body {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.ring-card__ring {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.ring-card__ring svg circle {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ring-card__ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ring-card__frac {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ring-card__frac-sub {
  font-size: 0.6875rem;
  color: var(--bs-secondary-color);
  margin-top: 0.2rem;
}

.ring-card__meta {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ring-card__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.ring-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ring-card__dot.is-ok {
  background: #14B8A6;
}

.ring-card__dot.is-pending {
  background: #F59E0B;
}

.ring-card__last {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  line-height: 1.5;
}

.ring-card__cta {
  align-self: flex-start;
}

@media (max-width: 900px) {
  .incident-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .review-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ============================================================
   Site row - compact list row (dashboard "Open by location")
   ============================================================ */
.site-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.site-row:last-child {
  border-bottom: none;
}

.site-row__name {
  flex: 1;
  min-width: 0;
}

.site-row__name-text {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-row__badge {
  margin-top: 0.2rem;
}

.site-row__stat {
  text-align: right;
  flex-shrink: 0;
}

.site-row__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.site-row__stat-crit {
  font-size: 0.7rem;
  color: #dc2626;
  font-weight: 600;
}

.site-row__stat-label {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
}

/* ============================================================
   Attachments (show page)
   ============================================================ */
.attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.125rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.1s;
}

.attachment-item:last-child {
  border-bottom: none;
}

.attachment-item:hover {
  background: var(--bs-tertiary-bg);
}

.att-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.att-icon i {
  width: 14px;
  height: 14px;
}

.att-icon--image {
  background: #eff6ff;
  color: #2563eb;
}

.att-icon--pdf {
  background: #fff1f2;
  color: #dc2626;
}

.att-icon--audio {
  background: #faf5ff;
  color: #7c3aed;
}

.att-icon--file {
  background: #f8fafc;
  color: #64748b;
}

.att-body {
  flex: 1;
  min-width: 0;
}

.att-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-size {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-item {
  align-items: flex-start;
}

.att-icon {
  margin-top: 1px;
}

.att-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
  margin-left: auto;
  align-items: center;
}

.att-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.att-audio {
  display: block;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 340px;
  height: 36px;
}

.att-transcript {
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

.att-transcript > summary {
  cursor: pointer;
  color: var(--doc-mute);
}

.att-transcript > p {
  margin: 0.5rem 0 0;
}

/* Attachment viewer overlay (image lightbox / inline PDF) */
.att-viewer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  flex-direction: column;
  background: rgba(13, 27, 42, 0.88);
  backdrop-filter: blur(2px);
}

.att-viewer.is-open {
  display: flex;
}

.att-viewer__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  color: #fff;
}

.att-viewer__name {
  font-size: 0.9375rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
}

.att-viewer__close {
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.125rem 0.5rem;
}

.att-viewer__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem 1rem;
}

.att-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.att-viewer__pdf {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
  background: #fff;
}

/* ============================================================
   Notes (show page)
   ============================================================ */
.note-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.note-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.note-item:last-child {
  border-bottom: none;
}

.note-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  letter-spacing: 0.05em;
}

.note-content {
  flex: 1;
  min-width: 0;
}

.note-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.note-author {
  font-size: 0.8125rem;
  font-weight: 600;
}

.note-date {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.note-body {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Triage (step 1)
   ============================================================ */
.triage-options {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.triage-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.triage-option:hover {
  border-color: #2563EB;
  background: #EFF6FF;
}

.triage-option--selected {
  border-color: #2563EB;
  background: #EFF6FF;
}

.triage-checkbox {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: #2563EB;
  cursor: pointer;
}

.triage-option__body {
  flex: 1;
  min-width: 0;
}

.triage-option__register {
  margin-bottom: 0.375rem;
  display: inline-block;
}

.triage-option__title {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.triage-option__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  line-height: 1.5;
}

/* ============================================================
   Severity selector
   ============================================================ */
.severity-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.severity-option {
  flex: 1 1 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: border-color 0.15s;
}

.severity-option input[type=radio] {
  display: none;
}

.severity-option--critical {
  border-color: #fecaca;
  color: #dc2626;
}

.severity-option--critical.severity-option--selected {
  background: #fee2e2;
  border-color: #dc2626;
}

.severity-option--high {
  border-color: #fed7aa;
  color: #ea580c;
}

.severity-option--high.severity-option--selected {
  background: #ffedd5;
  border-color: #ea580c;
}

.severity-option--medium {
  border-color: #fef08a;
  color: #ca8a04;
}

.severity-option--medium.severity-option--selected {
  background: #fefce8;
  border-color: #ca8a04;
}

.severity-option--low {
  border-color: #99F6E4;
  color: #14B8A6;
}

.severity-option--low.severity-option--selected {
  background: #CCFBF1;
  border-color: #14B8A6;
}

/* ============================================================
   Food Safety badge + form section
   ============================================================ */
.badge--food-safety {
  color: #0D9488;
}

.form-section--food-safety {
  background: #F0FDFA;
  border: 1px solid #5EEAD4;
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  margin-top: 1rem;
}

/* ============================================================
   Step progress indicator
   ============================================================ */
.step-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.step-indicator__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.step-indicator__item--active {
  color: var(--bs-body-color);
  font-weight: 600;
}

.step-indicator__item--done {
  color: #14B8A6;
}

.step-indicator__num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.step-indicator__item--active .step-indicator__num {
  border-color: #2563EB;
  background: #2563EB;
  color: #fff;
}

.step-indicator__item--done .step-indicator__num {
  border-color: #14B8A6;
  background: #14B8A6;
  color: #fff;
}

.step-indicator__connector {
  flex: 1;
  height: 2px;
  background: var(--bs-border-color);
  margin: 0 0.875rem;
  min-width: 1.5rem;
  max-width: 3.5rem;
}

.step-indicator__connector--done {
  background: #14B8A6;
}

/* Two-tier stepper: the macro "journey" bar (Triage → Details → Review →
   Submitted) is the primary tier; the create page's sub-steps are demoted. */
.step-indicator--journey {
  margin-bottom: 1rem;
}

.step-indicator--sub {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.9;
}

.step-indicator--sub .step-indicator__num {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.6875rem;
  border-width: 1.5px;
}

.step-indicator--sub .step-indicator__connector {
  max-width: 2.5rem;
  margin: 0 0.625rem;
}

/* Multi-step wizard - without JS all steps show as one scrollable form;
   .js-wizard (added by JS) reveals only the active step. */
.wizard-step {
  display: block;
}

form.js-wizard .wizard-step {
  display: none;
}

form.js-wizard .wizard-step.is-active {
  display: block;
}

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.wizard-nav__hint {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

@media (max-width: 560px) {
  /* Drop the flexible connectors and let the step chips wrap, but
     give them a real column gap so they don't jam together into
     one cramped run ("...Triage Details Review..."). Each label is
     white-space:nowrap, so chips wrap as whole units, never mid-word. */
  .step-indicator {
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
  }
  .step-indicator__connector {
    display: none;
  }
  .step-indicator__item {
    font-size: 0.78125rem;
  }
  .step-indicator__num {
    width: 1.5rem;
    height: 1.5rem;
  }
  .step-indicator--sub .step-indicator__num {
    width: 1.25rem;
    height: 1.25rem;
  }
}
/* ============================================================
   Triage enhancements
   ============================================================ */
.triage-option--gambling {
  border-left: 4px solid #7c3aed;
}

.triage-option--liquor {
  border-left: 4px solid #0891b2;
}

.triage-option--aml {
  border-left: 4px solid #be123c;
}

.triage-option--food-safety {
  border-left: 4px solid #0D9488;
}

.triage-option--welfare {
  border-left: 4px solid #F59E0B;
}

.triage-option--gambling.triage-option--selected {
  background: #faf5ff;
  border-color: #7c3aed;
}

.triage-option--liquor.triage-option--selected {
  background: #f0f9ff;
  border-color: #0891b2;
}

.triage-option--aml.triage-option--selected {
  background: #fff1f2;
  border-color: #be123c;
}

.triage-option--food-safety.triage-option--selected {
  background: #F0FDFA;
  border-color: #0D9488;
}

.triage-option--welfare.triage-option--selected {
  background: #fffbeb;
  border-color: #F59E0B;
}

.triage-option__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.triage-option__icon--gambling {
  background: #f3f0ff;
  color: #7c3aed;
}

.triage-option__icon--liquor {
  background: #e0f2fe;
  color: #0891b2;
}

.triage-option__icon--aml {
  background: #fff1f2;
  color: #be123c;
}

.triage-option__icon--food-safety {
  background: #CCFBF1;
  color: #0D9488;
}

.triage-option__icon--welfare {
  background: #fefce8;
  color: #F59E0B;
}

.triage-examples {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.triage-examples li {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  padding-left: 1rem;
  position: relative;
  line-height: 1.45;
  margin-bottom: 0.125rem;
}

.triage-examples li::before {
  content: "›";
  position: absolute;
  left: 0.25rem;
  opacity: 0.6;
}

.triage-compliance-note {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.triage-selection-summary {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #EFF6FF;
  border: 1px solid #f9cba7;
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  color: #92400e;
}

.triage-selection-summary--visible {
  display: flex;
}

/* ============================================================
   Incident create - sidebar register / category cards
   ============================================================ */
.ic-register-card {
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}

.ic-register-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

.ic-register-card__desc {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  line-height: 1.55;
  margin-bottom: 0.625rem;
}

.ic-register-card__authority {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ic-category-card {
  padding: 1rem;
  background: #EFF6FF;
  border: 1px solid #f9cba7;
  border-radius: var(--bs-border-radius);
}

.ic-category-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #92400e;
  margin-bottom: 0.375rem;
}

.ic-category-card__name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--bs-body-color);
}

.ic-category-card__flags {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f9cba7;
}

.ic-category-card__flag {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #92400e;
}

/* ============================================================
   Flag tiles (compliance flags)
   ============================================================ */
.flag-tiles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flag-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.flag-tile:hover {
  border-color: #2563EB;
  background: #EFF6FF;
}

.flag-tile input[type=checkbox] {
  display: none;
}

.flag-tile__check {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--bs-border-color);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 0.125rem;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.flag-tile--checked .flag-tile__check {
  background: #2563EB;
  border-color: #2563EB;
}

.flag-tile--checked .flag-tile__check::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  top: 0;
  left: 4px;
}

.flag-tile__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bs-body-color);
  margin-bottom: 0.125rem;
}

.flag-tile__desc {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  line-height: 1.4;
}

.flag-tile--checked {
  border-color: #2563EB;
  background: #EFF6FF;
}

/* ============================================================
   Form section help + late entry banner
   ============================================================ */
.form-section-help {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.late-entry-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  color: #92400e;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* ============================================================
   Cash Up
   ============================================================ */
.cu-site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cu-site-card {
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 1rem;
}

.cu-site-card__name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.cu-site-card__meta {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.cu-site-card__latest {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-top: 0.5rem;
}

.cu-row input.form-control {
  flex: 1;
}

/* ============================================================
   Badge compat (PHP Enums return these class names)
   ------------------------------------------------------------
   Style guide spec: coloured dot + label, not a filled pill.
   Each variant sets `color` only - the base .badge rule below
   renders a ::before dot in currentColor and the label in the
   same colour, so markup/PHP enum code needs no changes.
   ============================================================ */
.badge--gambling {
  color: #7c3aed;
}

.badge--liquor {
  color: #0891b2;
}

.badge--aml {
  color: #be123c;
}

.badge--critical {
  color: #DC2626;
}

.badge--high {
  color: #ea580c;
}

.badge--medium {
  color: #ca8a04;
}

.badge--low {
  color: #14B8A6;
}

.badge--open {
  color: #2563EB;
}

.badge--review {
  color: #ca8a04;
}

.badge--draft {
  color: #64748B;
}

.badge--closed {
  color: #374151;
}

.badge--warning {
  color: #F59E0B;
}

.badge--danger {
  color: #DC2626;
}

.badge--success {
  color: #14B8A6;
}

.badge--primary {
  color: #2563EB;
}

.badge--secondary {
  color: #64748B;
}

.badge--info {
  color: #0891b2;
}

.badge--escalation {
  background: #7c3aed;
  color: #fff;
}

/* ============================================================
   Form control - branded focus ring
   ============================================================ */
.form-control:focus,
.form-select:focus {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ============================================================
   Table - branded hover
   ============================================================ */
.table-hover > tbody > tr:hover > * {
  background-color: rgba(37, 99, 235, 0.035);
}

/* ============================================================
   Alert overrides - modern palette
   ============================================================ */
.alert-success {
  --bs-alert-bg: #F0FDFA;
  --bs-alert-border-color: #99F6E4;
  --bs-alert-color: #115E59;
}

.alert-danger {
  --bs-alert-bg: #fff1f2;
  --bs-alert-border-color: #fecdd3;
  --bs-alert-color: #9f1239;
}

/* ============================================================
   Character counter
   ============================================================ */
.char-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.char-counter__quality--poor {
  color: #dc2626;
  font-weight: 500;
}

.char-counter__quality--ok {
  color: #ca8a04;
  font-weight: 500;
}

.char-counter__quality--good {
  color: #0D9488;
  font-weight: 500;
}

/* ============================================================
   Auth page
   ============================================================ */
.body--auth {
  overflow: auto !important;
  height: auto !important;
  min-height: 100vh;
  background: #0D1B2A;
  position: relative;
}

.body--auth::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 110% 90% at 5% 20%, rgba(37, 99, 235, 0.32) 0%, transparent 55%), radial-gradient(ellipse 70% 100% at 90% 80%, rgba(124, 58, 237, 0.22) 0%, transparent 50%), radial-gradient(ellipse 60% 60% at 50% 110%, rgb(13, 27, 42) 0%, transparent 100%);
  pointer-events: none;
}

/* Grain texture */
.body--auth::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.04;
  pointer-events: none;
}

.auth-scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 2rem;
}

.auth-stage {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 4rem;
  max-width: 1000px;
  margin: auto;
  width: 100%;
  align-items: center;
}

.auth-info {
  color: rgba(255, 255, 255, 0.85);
  padding: 2rem 0;
}

.auth-wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.auth-wordmark-text {
  display: flex;
  flex-direction: column;
}

.auth-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.auth-descriptor {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

.auth-divider {
  border-color: rgba(255, 255, 255, 0.12);
  margin: 0 0 2rem;
}

.auth-pitch-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1rem;
}

.auth-pitch-heading em {
  font-style: italic;
  color: #60A5FA;
}

.auth-pitch-body {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.auth-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.auth-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 0.625rem;
  color: #60A5FA;
}

.auth-feature-icon svg {
  width: 16px;
  height: 16px;
}

.auth-feature-content {
  flex: 1;
  min-width: 0;
}

.auth-feature-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}

.auth-feature-desc {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
}

/* Frosted glass card */
.auth-card .card-body {
  padding: 2.25rem 2.5rem;
}

.auth-card .card-body.pb-2 {
  padding-bottom: 1.5rem;
}

.auth-card-footer {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 1.5rem;
}

.auth-card {
  max-width: 440px;
  --bs-card-bg: rgba(13,27,42,.55);
  --bs-card-color: rgba(255,255,255,.9);
  --bs-card-border-color: rgba(255,255,255,.1);
  --bs-card-cap-bg: transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.07) inset;
}

.auth-card .text-secondary {
  color: rgba(255, 255, 255, 0.4) !important;
}

.auth-card-footer {
  padding: 0.75rem 1.25rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Inline links on the dark auth pages (e.g. "Forgot password?", "Sign in"). */
.body--auth a,
.auth-console a,
.auth-link {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.15s ease;
}

.body--auth a:hover,
.auth-console a:hover,
.auth-link:hover {
  color: #60A5FA;
  text-decoration: none;
}

/* Dark inputs inside auth card */
.body--auth .form-label,
.auth-console .form-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}

.body--auth .form-control,
.body--auth .form-select,
.auth-console .form-control,
.auth-console .form-select {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.body--auth .form-control:focus,
.body--auth .form-select:focus,
.auth-console .form-control:focus,
.auth-console .form-select:focus {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: rgba(37, 99, 235, 0.7);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.body--auth .form-control::placeholder,
.auth-console .form-control::placeholder {
  color: rgba(255, 255, 255, 0.27);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.auth-shell .auth-card {
  width: 100%;
  max-width: 360px;
}

.auth-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  text-align: center;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Password field with an inline show/hide toggle. */
.auth-password-wrap {
  position: relative;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0.25rem;
  color: var(--bs-secondary-color);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.auth-password-toggle:hover {
  color: var(--bs-body-color);
}

.auth-password-toggle i {
  width: 16px;
  height: 16px;
}

.auth-password-wrap .form-control {
  padding-right: 2.5rem;
}

/* Dark "Ops Console" variant - the default look for the unauthenticated auth
   flow (login / forgot / reset / 2fa). A faint drifting grid + soft blue glow
   read as a monitored operations terminal rather than a generic SaaS login,
   fitting a compliance/security tool for a licensed venue. Distinct from the
   .body--auth split-panel scene (invite/accept.php only). */
.auth-console {
  overflow: auto !important;
  height: auto !important;
  min-height: 100vh;
  position: relative;
  background: #0D1B2A;
}

.auth-console::before {
  content: "";
  position: fixed;
  inset: -28px;
  background-image: linear-gradient(rgba(20, 184, 166, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, black 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, black 30%, transparent 72%);
  animation: auth-console-drift 40s linear infinite;
  pointer-events: none;
}

.auth-console::after {
  content: "";
  position: fixed;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(37, 99, 235, 0.2) 0%, transparent 65%);
  pointer-events: none;
}

@keyframes auth-console-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 28px 28px;
  }
}
.auth-console .auth-shell {
  flex-direction: column;
  gap: 2rem;
}

.auth-console-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

.auth-console-tagline {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

.auth-console .card {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(20, 184, 166, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.auth-console .auth-title {
  color: #fff;
}

.auth-console .auth-subtitle {
  color: rgba(255, 255, 255, 0.42);
}

.auth-console .auth-password-toggle {
  color: rgba(255, 255, 255, 0.45);
}

.auth-console .auth-password-toggle:hover {
  color: #fff;
}

.auth-console .form-check-label {
  color: rgba(255, 255, 255, 0.72);
}

/* _forms.scss's .alert-success/.alert-danger set light-pastel custom
   properties (bg/border/text) that read as a leftover light-theme card
   against this dark scene; override per-variant like the form-check-label
   fix above. */
.auth-console .alert-success {
  --bs-alert-bg: rgba(20,184,166,.12);
  --bs-alert-border-color: rgba(20,184,166,.35);
  --bs-alert-color: #5eead4;
}

.auth-console .alert-danger {
  --bs-alert-bg: rgba(220,38,38,.12);
  --bs-alert-border-color: rgba(220,38,38,.4);
  --bs-alert-color: #fca5a5;
}

/* Bounded two-column "window" variant of the console card - brand/pitch on
   the left, the sign-in form on the right. Distinct from both the
   single-column .auth-console .card (used by forgot/reset/2fa) and the
   full-bleed .auth-scene/.auth-stage split panel (invite/accept.php only):
   this one is capped in size and centered, reading as a floating window
   rather than a full-screen takeover. Currently used by login.php only. */
.auth-console-window {
  position: relative;
  width: 86%;
  max-width: 780px;
  height: 460px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(20, 184, 166, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Small window-chrome dots (top-left) - a subtle nod to a real app window. */
.auth-console-window::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 16px 0 0 rgba(255, 255, 255, 0.15), 32px 0 0 rgba(255, 255, 255, 0.15);
}

.auth-console-window-left {
  padding: 3rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.1), transparent 60%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-console-window-left .brand-lockup {
  margin-bottom: 1rem;
}

.auth-console-window-pitch {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.auth-console-window-pitch em {
  color: #5eead4;
  font-style: normal;
}

.auth-console-window-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin-bottom: 0;
}

.auth-console-window-left .auth-console-tagline {
  margin-top: auto;
  padding-top: 1.5rem;
}

.auth-console-window-right {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The footer's own horizontal padding (from the base .auth-card-footer rule)
   would double up with this column's padding - cancel it here so the footer
   text lines up with the form above it. */
.auth-console-window-right .auth-card-footer {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 768px) {
  .auth-stage {
    grid-template-columns: 1fr;
  }
  .auth-info {
    display: none;
  }
  .auth-scene {
    padding: 1rem;
  }
  .auth-console-window {
    grid-template-columns: 1fr;
    height: auto;
    width: 92%;
  }
  .auth-console-window-left {
    display: none;
  }
}
/* ============================================================
   My Account - sub-navigation + cards
   ============================================================ */
.profile-subnav {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 1.5rem;
}

.profile-subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: -1px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.profile-subnav__link svg {
  width: 15px;
  height: 15px;
}

.profile-subnav__link:hover {
  color: var(--bs-body-color);
}

.profile-subnav__link.is-active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}

/* Backup codes one-time display */
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 1rem;
  background: var(--bs-tertiary-bg, #f8fafc);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  font-family: var(--bs-font-monospace);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.backup-codes code {
  color: var(--bs-body-color);
}

/* Session list rows */
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.session-row:first-child {
  border-top: none;
}

.session-row__meta {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  line-height: 1.5;
}

.session-row__dev {
  font-weight: 600;
  color: var(--bs-body-color);
  font-size: 0.875rem;
}

/* ⓘ help icon beside a field label (field_info helper) */
.field-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
  color: var(--bs-secondary-color);
  cursor: help;
  vertical-align: middle;
  line-height: 1;
}

.field-info svg {
  width: 14px;
  height: 14px;
}

.field-info:hover,
.field-info:focus-visible {
  color: #2563eb;
  outline: none;
}

/* "What each role can do" reference (role_guide helper) */
.role-guide {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--bs-tertiary-bg, #f8fafc);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.role-guide__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.5rem;
  font-size: 0.78125rem;
  line-height: 1.4;
}

.role-guide__role {
  font-weight: 600;
  color: var(--bs-body-color);
}

.role-guide__desc {
  color: var(--bs-secondary-color);
}

/* Divider between primary fields and an optional/secondary group */
.modal-divider {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1.25rem 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}

.modal-divider::before,
.modal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bs-border-color);
}

.modal-divider__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.modal-divider__tag {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   Impersonation banner (super-admin view-as)
   ============================================================ */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  margin-bottom: 1.25rem;
  background: #7c2d12;
  color: #fff;
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
}

.impersonation-banner svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 0.25rem;
}

.impersonation-banner strong {
  font-weight: 600;
}

/* ============================================================
   Component gallery (admin/components — living style guide)
   ============================================================ */
.cg-section {
  margin-bottom: 1.25rem;
}

.cg-item {
  padding: 1.25rem 0;
  border-bottom: 1px dashed var(--doc-line);
}

.cg-item:first-child {
  padding-top: 0;
}

.cg-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cg-item__bar {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.cg-name {
  font-family: var(--ff-docket);
  font-size: 0.75rem;
  color: var(--fabric-blue);
  background: rgba(37, 99, 235, 0.08);
  padding: 0.125rem 0.4375rem;
  border-radius: 5px;
}

.cg-note {
  font-size: 0.8125rem;
  color: var(--doc-mute);
}

/* The inset stage each example sits on, so white cards read against it. */
.cg-canvas {
  padding: 1.25rem;
  background: var(--fabric-bg);
  border: 1px solid var(--doc-line);
  border-radius: 8px;
}

.cg-canvas > .page-hero,
.cg-canvas > .stat-strip,
.cg-canvas > .dsec {
  margin-bottom: 0;
}

.cg-canvas > .page-hero + .page-hero {
  margin-top: 1rem;
}

/* Inline specimens (buttons/badges/links) breathe + wrap cleanly. */
.cg-canvas .btn,
.cg-canvas .badge,
.cg-canvas .ai-badge {
  margin: 0.25rem 0.5rem 0.25rem 0;
}

.cg-type {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.cg-swatch__chip {
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 0.4rem 0.5rem;
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
}

.cg-swatch__chip--light {
  color: rgba(255, 255, 255, 0.92);
}

.cg-swatch__chip--dark {
  color: rgba(13, 27, 42, 0.7);
}

.cg-swatch__name {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 0.4rem;
}

.cg-swatch__var {
  font-family: var(--ff-docket);
  font-size: 0.6875rem;
  color: var(--doc-mute);
}

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.empty-state > i {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 1rem;
  opacity: 0.25;
}

.empty-state-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 0.5rem;
}

.empty-state p {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Processing overlay (shown while a form submit is in flight)
   ============================================================ */
.proc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 27, 42, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.proc-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.proc-overlay__card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--bs-card-bg, #fff);
  padding: 1rem 1.5rem;
  border-radius: var(--bs-border-radius, 0.5rem);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(6px);
  transition: transform 0.18s ease;
}

.proc-overlay.is-open .proc-overlay__card {
  transform: translateY(0);
}

.proc-overlay__spinner {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid rgba(37, 99, 235, 0.25);
  border-top-color: var(--fabric-primary, #2563EB);
  border-radius: 50%;
  animation: proc-spin 0.7s linear infinite;
}

.proc-overlay__msg {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bs-body-color, #1e293b);
}

@keyframes proc-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .proc-overlay__spinner {
    animation-duration: 1.6s;
  }
  .proc-overlay, .proc-overlay__card {
    transition: none;
  }
}
/* ============================================================
   AI badge
   ============================================================ */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7c3aed, #2563EB);
  color: #fff;
  letter-spacing: 0.04em;
}

/* ============================================================
   Action list
   ============================================================ */
.action-list {
  padding-left: 1.25rem;
  margin: 0;
}

.action-list li {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.375rem;
}

/* ============================================================
   Skeleton loading
   ============================================================ */
@keyframes skel-shimmer {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.skel-line,
.skel-label,
.skel-input,
.skel-textarea {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  display: block;
}

.skel-line {
  height: 13px;
  margin-bottom: 8px;
  width: 100%;
}

.skel-line.w-75 {
  width: 75%;
}

.skel-line.w-50 {
  width: 50%;
}

.skel-line.w-85 {
  width: 85%;
}

.skel-line.w-60 {
  width: 60%;
}

.skel-form-row {
  margin-bottom: 1rem;
}

.skel-label {
  height: 11px;
  width: 38%;
  margin-bottom: 6px;
}

.skel-label.w-60 {
  width: 60%;
}

.skel-label.w-40 {
  width: 40%;
}

.skel-input {
  height: 36px;
  border-radius: 6px;
}

.skel-textarea {
  height: 80px;
  border-radius: 6px;
}

/* ============================================================
   Modal chrome + self-guided help
   ============================================================ */
/* The modal wears the same "dossier" chrome as .page-hero / .dsec: a burnt-
   orange spine, a warm paper-wash header with a DM Mono kicker over a bold navy
   title, hairline dividers and a tinted footer. Reuses the shared design tokens
   so it stays in lockstep with the rest of the site. */
#app-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(13, 27, 42, 0.45);
}

/* Left spine — clipped to the rounded corners by the overflow:hidden above. */
#app-modal .modal-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--doc-spine, #2563EB);
  z-index: 2;
}

#app-modal .modal-header {
  align-items: flex-start;
  padding: 1rem 1.25rem 0.875rem 1.5rem;
  border-bottom: 1px solid var(--doc-line, rgba(13, 27, 42, 0.09));
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 48%), radial-gradient(90% 130% at 100% 0%, rgba(56, 89, 138, 0.06) 0%, transparent 52%), repeating-linear-gradient(-45deg, rgba(13, 27, 42, 0.015) 0 1px, transparent 1px 7px), var(--doc-paper, #ffffff);
}

#app-modal .app-modal__heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#app-modal .app-modal__kicker {
  font-family: var(--ff-docket, "DM Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--doc-accent, #2563EB);
}

#app-modal .modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--doc-ink, #0D1B2A);
}

#app-modal .modal-header .btn-close {
  margin-top: 0.35rem;
}

#app-modal .modal-body {
  min-height: 120px;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
}

#app-modal .modal-footer {
  padding: 0.875rem 1.25rem 0.875rem 1.5rem;
  border-top: 1px solid var(--doc-line, rgba(13, 27, 42, 0.09));
  background: rgba(13, 27, 42, 0.025);
  gap: 0.5rem;
}

/* Navy, lightly-blurred backdrop to match .att-viewer / .proc-overlay rather
   than Bootstrap's flat black. */
.modal-backdrop {
  --bs-backdrop-bg: #0D1B2A;
  --bs-backdrop-opacity: 0.5;
}

.modal-backdrop.show {
  backdrop-filter: blur(2px);
}

/* Tidy the spacing of the last field so it sits flush above the footer */
#app-modal .modal-body form > .mb-3:last-child,
#app-modal .modal-body form > div:last-child.mb-3 {
  margin-bottom: 0;
}

/* Self-guided info banner (modal_help helper) */
.modal-help {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.75rem 0.875rem;
  margin-bottom: 1.25rem;
  background: #eff6ff;
  border: 1px solid #cfe0fb;
  border-radius: var(--bs-border-radius);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #1e3a5f;
}

.modal-help svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #2563eb;
}

.modal-help strong {
  font-weight: 600;
}

/* Inline field guidance under selects/inputs */
.field-help {
  font-size: 0.78125rem;
  color: var(--bs-secondary-color);
  margin-top: 0.3rem;
  line-height: 1.45;
}

/* ============================================================
   Error pages
   ============================================================ */
.body--error {
  overflow: auto !important;
  height: auto !important;
  background: var(--bs-body-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.error-page {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 480px;
}

.error-code {
  font-size: clamp(5rem, 12vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: #2563EB;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}

.error-message {
  font-size: 1.125rem;
  color: var(--bs-secondary-color);
  margin-bottom: 2rem;
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .app-sidebar, .app-topbar {
    display: none !important;
  }
  .app-body {
    overflow: visible !important;
    padding: 0 !important;
  }
  body {
    overflow: auto !important;
    height: auto !important;
  }
}
/* ============================================================
   Utilities
   ------------------------------------------------------------
   Fabric's own atomic utility layer — spacing, flex, display and
   text helpers. Replaces the equivalent slice of Bootstrap's
   utility API (no Bootstrap dependency). Loaded late in the
   cascade (see user.scss) so these classes win over component
   defaults, same ordering Bootstrap itself uses.
   ============================================================ */
/* ---------- Spacing scale: 0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem ---------- */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.me-0 {
  margin-right: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.gap-0 {
  gap: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.mx-5 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Display ---------- */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

/* ---------- Flex ---------- */
.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-self-center {
  align-self: center !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

/* ---------- Sizing ---------- */
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-85 {
  width: 85% !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

/* ---------- Position ---------- */
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.start-0 {
  left: 0 !important;
}

.end-0 {
  right: 0 !important;
}

/* ---------- Text ---------- */
.text-start {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-end {
  text-align: right !important;
}

.text-danger {
  color: var(--fabric-error) !important;
}

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

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

.text-primary {
  color: var(--fabric-primary) !important;
}

.text-white {
  color: #fff !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fst-italic {
  font-style: italic !important;
}

.small {
  font-size: 0.8125rem;
}

/* ---------- Border / radius / shadow ---------- */
.border {
  border: 1px solid var(--fabric-border) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid var(--fabric-border) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--fabric-border) !important;
}

.rounded {
  border-radius: var(--fabric-radius-md) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.shadow-none {
  box-shadow: none !important;
}

/* ---------- Misc ---------- */
.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

/* Visually hide but keep in the accessibility tree (own version of
   Bootstrap's sr-only pattern). */
.visually-hidden {
  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;
}

/* ============================================================
   Targeted polish - spacing, alignment, hover/focus, responsive
   Keeps the existing dossier visual language; tightens the
   Dashboard, list/table, and form/auth surfaces.
   ============================================================ */
/* --- Forms: brand the native check/radio + switch ----------
   Bootstrap defaults these to its blue (#0d6efd); align them
   with the Fabric orange so they match buttons and the
   custom .flag-tile checkboxes. */
.form-check-input:checked {
  background-color: #2563EB;
  border-color: #2563EB;
}

.form-check-input:focus {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-check-input:focus:not(:checked) {
  border-color: rgba(37, 99, 235, 0.5);
}

/* Consistent label hierarchy - a touch of weight, slightly
   tighter to its field than the Bootstrap default. */
.form-label {
  font-weight: 500;
  margin-bottom: 0.375rem;
}

/* Inputs respond to hover before focus (light surfaces only;
   the auth card keeps its own dark treatment below). */
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: rgba(0, 0, 0, 0.2);
}

.body--auth .form-control:hover:not(:focus),
.body--auth .form-select:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.22);
}

/* --- Badges: coloured dot + label (style guide spec), not a
   filled pill. Each .badge--* variant sets `color` only; this
   base rule renders the dot in currentColor and lays both out
   inline. Background is explicitly cleared so a stray Bootstrap
   .text-bg-* utility class can't reintroduce a filled pill. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent !important;
  padding: 0;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  border-radius: 0;
  vertical-align: middle;
}

.badge::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

/* --- Tables: tabular figures + safe horizontal scroll ------
   Numbers (dates, counts) line up column-to-column, and any
   wide table inside a flush card body (e.g. the management
   action rows, which aren't wrapped in .table-responsive)
   scrolls instead of breaking the card on narrow screens. */
.dsec__body--flush {
  overflow-x: auto;
  border-radius: 0 0 10px 10px;
}

.dsec__body--flush .table > tbody > tr > td {
  font-variant-numeric: tabular-nums;
}

.link-mono {
  font-variant-numeric: tabular-nums;
}

/* --- Dashboard: tabular stats + responsive feedback -------- */
.stat-value {
  font-variant-numeric: tabular-nums;
}

/* Informational stat cards lift gently on hover (shadow only,
   no transform - they aren't links). */
.stat-strip .card {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-strip .card:hover {
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.08), 0 1px 2px rgba(13, 27, 42, 0.06);
  border-color: rgba(37, 99, 235, 0.22);
}

/* --- Keyboard focus rings on interactive rows/links --------
   Mouse hover was already covered; this makes tab-navigation
   visible to match. */
.incident-feed-row:focus-visible,
.sidebar-link:focus-visible,
.profile-subnav__link:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: -2px;
  border-radius: 4px;
}

.sidebar-link:focus-visible {
  outline-color: rgba(96, 165, 250, 0.7);
}

/* --- Incident dossier: sticky sidebar ----------------------
   On a long case file the Actions / Case Summary panel would
   otherwise scroll out of reach. Pin it within the scrolling
   .app-body on the desktop two-column layout; it falls back to
   normal flow once the layout stacks (<= 900px, see the
   .incident-layout breakpoint above). max-height + auto keeps a
   tall sidebar fully reachable rather than clipping it. */
@media (min-width: 901px) {
  .incident-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
  }
}
/* --- Dossier: keyboard focus on action buttons & options ---
   Hover states already existed; surface the same affordance to
   keyboard users. */
.show-action-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: -2px;
}

.show-action-btn--primary:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

.show-action-btn--danger:focus-visible {
  outline-color: rgba(185, 28, 28, 0.6);
}

.triage-option:focus-within {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* --- Reports: two-column panels collapse on narrow screens -
   Was an inline 1fr/1fr grid that stayed two cramped columns on
   mobile (inline styles can't be overridden by a media query). */
.reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .reports-grid {
    grid-template-columns: 1fr;
  }
}
/* --- Severity selector: keyboard-accessible + JS-independent -
   The radios were display:none (unfocusable, and on the Review
   page - which loads no JS - selecting a severity gave no visual
   feedback at all). Make them visually-hidden-but-focusable and
   drive the selected state from :checked so it works with or
   without the create-form JS, plus a focus ring for keyboards. */
.severity-option {
  position: relative;
}

.severity-option input[type=radio] {
  display: inline-block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.severity-option:focus-within {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.severity-option--critical:has(input:checked) {
  background: #fee2e2;
  border-color: #dc2626;
}

.severity-option--high:has(input:checked) {
  background: #ffedd5;
  border-color: #ea580c;
}

.severity-option--medium:has(input:checked) {
  background: #fefce8;
  border-color: #ca8a04;
}

.severity-option--low:has(input:checked) {
  background: #CCFBF1;
  border-color: #14B8A6;
}

/* --- Brand the Bootstrap "primary" so no blue leaks through ---
   --bs-primary was never overridden, so every component that
   reads var(--bs-primary) fell back to Bootstrap blue. Most
   visible: the active tab on the profile/security sub-nav
   (.profile-subnav__link.is-active) and pagination/list-group
   active states. Point the token at the Fabric blue. */
:root {
  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;
}

/* Primary buttons need an explicit focus-ring RGB so tabbing to a
   primary CTA glows Fabric blue, not the generic default. */
.btn-primary,
.btn-outline-primary {
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}

/* ============================================================
   Mobile responsive refinements (app-wide)
   A consolidated pass so every surface is comfortable on
   phones/tablets: fluid viewport height, no horizontal
   overflow, finger-sized tap targets, zoom-free inputs, and
   tightened spacing on the hero / list / form / dossier
   surfaces. Lives last so it layers cleanly over the sections
   above without touching their desktop behaviour.
   ============================================================ */
/* Use the dynamic viewport unit where supported so the fixed app
   shell isn't clipped behind the mobile browser's collapsing
   URL bar (100vh over-counts on iOS/Android). */
@supports (height: 100dvh) {
  html, body {
    height: 100dvh;
  }
  .app-shell {
    height: 100dvh;
  }
  .body--auth,
  .body--error,
  .auth-scene,
  .auth-shell {
    min-height: 100dvh;
  }
}
/* Long unbroken strings - report codes, emails, URLs, tokens -
   must wrap rather than force the whole page wider than the
   viewport (which would otherwise produce a horizontal scroll
   on every page that shows one). */
.app-body {
  overflow-wrap: break-word;
}

.kv-value, .show-info-val, .note-body, .narrative-text,
.timeline-action, .att-name, .attachment-name,
.session-row__meta, .topbar-dropdown-email {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  /* Prevent iOS Safari from auto-zooming on input focus: native
     form controls must render at >=16px to suppress it, and the
     14px root makes 1rem (and the -sm variants) too small. */
  .form-control, .form-select,
  .form-control-sm, .form-select-sm {
    font-size: 16px;
  }
  /* Finger-sized tap targets (~44px) on the primary navigation
     and menu surfaces. */
  .sidebar-link {
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
  }
  .topbar-dropdown .dropdown-item {
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
  }
  .nav-underline .nav-link,
  .nav-pills .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .profile-subnav__link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  /* Tighter chrome so content keeps the width. */
  .app-topbar {
    padding: 0 0.875rem;
    gap: 0.5rem;
  }
  /* Hero surfaces: trim the generous desktop insets. */
  .page-hero__body {
    padding: 1.125rem 1.25rem 1rem;
  }
  .page-hero__meta {
    padding: 0.625rem 1.25rem;
    gap: 0.5rem 1rem;
  }
  .dossier-hero__body {
    padding: 1.25rem 1.25rem 1.125rem 1.5rem;
  }
  .dossier-hero__meta {
    padding: 0.75rem 1.25rem;
    gap: 0.5rem 1rem;
  }
  /* Section / card bodies: a hair less inset on phones. */
  .dsec__body {
    padding: 1rem;
  }
  .card-body {
    padding: 1rem;
  }
  /* Filter toolbars: lay the controls two-up and full-bleed so
     each is easy to tap, instead of a cramped wrapping row of
     width:auto selects. (Overrides the inline width:auto.) */
  .dsec__toolbar {
    padding: 0.75rem 1rem;
  }
  .dsec__toolbar form {
    width: 100%;
  }
  .dsec__toolbar .form-select,
  .dsec__toolbar .form-control {
    width: auto !important;
    flex: 1 1 45%;
    min-width: 0;
  }
  .dsec__toolbar .btn {
    flex: 1 1 auto;
  }
  /* Filter/tab bars scroll sideways rather than wrapping into a
     tall stack that shoves the content down. */
  .nav-underline {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-underline::-webkit-scrollbar {
    display: none;
  }
  .nav-underline {
    scrollbar-width: none;
  }
  .nav-underline .nav-link {
    white-space: nowrap;
  }
  /* Dashboard feed rows: reclaim a little horizontal room. */
  .incident-feed-row {
    padding: 0.65rem 0.875rem;
    gap: 0.5rem;
  }
  /* Modals can exceed the screen on phones (the body doesn't
     scroll by default); cap it and let the body scroll. */
  #app-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
  .modal-dialog {
    margin: 0.5rem;
  }
}
@media (max-width: 480px) {
  .app-body {
    padding: 0.875rem;
  }
  /* The username is redundant beside the avatar on the smallest phones. */
  .topbar-username {
    display: none;
  }
  /* Key/value pairs read better stacked than squeezed two-up in
     a narrow column. */
  .kv-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .kv-grid .kv-label {
    padding-top: 0.625rem;
  }
  .kv-grid .kv-value {
    padding-bottom: 0.125rem;
  }
  .kv-grid > .kv-label:first-child {
    padding-top: 0;
  }
  /* Let crowded headers/footers wrap instead of clipping. */
  .dsec__head {
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
  }
  .wizard-nav {
    flex-wrap: wrap;
  }
  /* Backup codes: a single column is easier to read and copy. */
  .backup-codes {
    grid-template-columns: 1fr;
  }
  /* Stack page-level action clusters under their titles, full width. */
  .page-header-actions,
  .page-hero__actions {
    width: 100%;
  }
}
/* ══ Tables: sortable headers, sticky thead, cell utilities, pagination ══════ */
/* (added during the style/layout/UX pass) */
.th-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.th-sort:hover {
  color: var(--fabric-primary);
}

/* Keep column headers visible while scrolling a long register. */
.dsec__body--flush table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-card-bg);
}

/* Cell utilities (replace ad-hoc inline <td> styles). */
.cell-nowrap {
  white-space: nowrap;
}

.cell-sm {
  font-size: 0.8125rem;
}

.cell-muted {
  color: var(--bs-secondary-color);
}

.cell-truncate {
  max-width: 200px;
}

.cell-truncate > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pagination bar under list tables. */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.pagination-bar__info {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

/* ── Mobile: collapse wide list tables into stacked cards ──────────────────── */
@media (max-width: 767px) {
  .table--stack thead {
    display: none;
  }
  .table--stack tbody tr {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin: 0.5rem;
    padding: 0.25rem 0;
  }
  .table--stack tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.4rem 0.85rem;
    text-align: right;
    max-width: none;
  }
  .table--stack tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-align: left;
    white-space: nowrap;
  }
  .table--stack .cell-truncate > span {
    white-space: normal;
  }
}
/* ══ Icon-size utilities (replace ad-hoc inline width/height on Lucide <i>) ═══ */
.icon-xs {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}

.icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.icon-md {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.icon-lg {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}

/* ══ Responsive display utility (own version of Bootstrap's d-sm-*) ══════════ */
@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
}