/* ══════════════════════════════════════════════════════════════════════════
   Cascadelagen — @layer base, shell, components, page, a11y
   ──────────────────────────────────────────────────────────────────────────
   De volgorde hieronder bepaalt wie wint bij een conflict, ongeacht
   specificiteit en ongeacht de volgorde van de <link>-tags. Daarvóór besliste
   de laadvolgorde, en die staat in de views — niet in de CSS. De lijst staat
   bewust in élk stylesheet: de eerste declaratie bepaalt de volgorde, en geen
   bestand mag erop rekenen dat een ander vóór hem geladen is.

     base        site.css        tokens, reset, typografie, legacy-grammatica
     shell       app-shell.css   topbar, sidebar, dossierkop, rail-grid
     components  co-components.css  de co-*-grammatica
     page        de pagina-stylesheets (wizard, vordering-*, …)
     a11y        forced-colors en reduced-motion — moet alles kunnen overrulen

   Een pagina-stylesheet mag een component dus aanvullen én overschrijven zonder
   specificiteit op te schroeven; omgekeerd kan een component een pagina niet meer
   per ongeluk verslaan door een selector te verlengen. Let op: regels búiten elke
   laag winnen van álle lagen — daarom hoort hier niets ongelaagd te blijven staan,
   en bewaakt CssLaagArchitectureTests dat.
   ══════════════════════════════════════════════════════════════════════════ */
@layer base, shell, components, page, a11y;

@layer base {

/* ==========================================================================
   Crediteur.Online Design System - Banktrace-derived (redesign 2026)
   --------------------------------------------------------------------------
   Token layer from the 2026-06 redesign. Self-hosted Manrope (sans) +
   JetBrains Mono (mono). See Docs/ui-design.md.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations'),
       url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('/fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   CSS Variables (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* ---------- Brand (navy + blue accent) ---------- */
  --brand-dark: #1D2547;            /* primary navy — login hero, buttons, headings */
  --brand-navy-hover: #2A335E;
  --brand-navy-press: #161C39;
  --brand-accent: #3B5BDB;          /* links, focus, single data highlight */
  --brand-accent-hover: #4C6EF5;
  --brand-accent-light: rgba(76, 110, 245, 0.12);
  --accent-soft: #EEF2FF;           /* tinted bg for selected rows etc. */
  --table-header: #D5DDF5;          /* table header fill — a step darker than accent-soft */
  --focus-ring: rgba(76, 110, 245, 0.35);

  /* ---------- Surfaces ---------- */
  --surface: #FAFAFB;               /* page canvas */
  --surface-secondary: #F4F5F8;     /* hover on white, zebra */
  --surface-pressed: #ECEEF3;       /* pressed neutral */
  --surface-elevated: #FFFFFF;      /* card, modal, primary content */
  --chrome: #FFFFFF;                /* topbar / sidebar */
  --chrome-border: rgba(31, 41, 70, 0.10);

  /* ---------- Foreground (text ramp) ---------- */
  --text: #0F1530;                  /* primary body text */
  --text-light: #FFFFFF;
  --muted: #6B7494;                 /* tertiary / placeholder */
  --fg-1: #0F1530;
  --fg-2: #3D4666;                  /* secondary text, captions */
  --fg-3: #6B7494;                  /* tertiary, helper */
  --fg-4: #9AA1B8;                  /* disabled */
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: #C7CCDD;
  --fg-on-dark-3: #8B93B0;

  /* ---------- Borders / hairlines ---------- */
  --border: #E6E8EE;                /* default hairline */
  --border-1: #E6E8EE;
  --border-2: #D4D8E1;              /* input border, hover hairline */
  --border-3: #B7BDCC;              /* emphasised border */
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ---------- Semantic — desaturated, supportive ---------- */
  --success: #14B8A6;
  --success-light: rgba(20, 184, 166, 0.10);
  --success-fg: #0F766E;
  --warning: #F59E0B;
  --warning-light: rgba(245, 158, 11, 0.10);
  --warning-fg: #92400E;
  --error: #F43F5E;
  --error-light: rgba(244, 63, 94, 0.10);
  --error-fg: #9F1239;
  --info: #8B5CF6;
  --info-light: rgba(139, 92, 246, 0.10);
  --info-fg: #5B21B6;

  /* Statuspil (co-status) — een gevuld tekstvlak, dus een eigen, lichtere
     achtergrond en een donkerder voorgrond dan de ramp hierboven; die is voor
     iconen en randen. Apart genoemd omdat de pil op 4.5:1 moet uitkomen. */
  --status-success-bg: #E8F5EF;
  --status-success-fg: #1F6A4A;
  --status-warning-bg: #FBF1DD;
  --status-warning-fg: #8A5C12;
  --status-danger-bg: #FCEBEA;
  --status-danger-fg: #AA3333;

  /* ---------- Spacing — 8px grid ---------- */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ---------- Border Radius ---------- */
  --radius-sm: 4px;                 /* chips, pills */
  --radius-md: 8px;                 /* inputs, buttons */
  --radius-lg: 10px;                /* cards, modals */
  --radius-full: 9999px;

  /* ---------- Shadows — borderless, very subtle ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 21, 48, 0.06),
               0 2px 4px rgba(15, 21, 48, 0.06);
  --shadow:    0 1px 2px rgba(15, 21, 48, 0.07),
               0 3px 8px rgba(15, 21, 48, 0.08);
  --shadow-lg: 0 1px 3px rgba(15, 21, 48, 0.06),
               0 6px 16px rgba(15, 21, 48, 0.09);
  --shadow-modal: 0 8px 32px rgba(15, 21, 48, 0.08);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* ---------- Typography ---------- */
  --font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --line-height-base: 1.6;

  /* ---------- Density (tables, dense forms) ---------- */
  --row-h: 36px;
  --row-h-compact: 30px;
  --field-h: 34px;
  --card-pad: 20px;
  --card-pad-tight: 14px;

  /* ---------- Layout ---------- */
  --nav-height: 64px;               /* legacy public top-nav */
  --topbar-h: 56px;                 /* app shell topbar */
  --sidebar-w: 280px;               /* app shell sidebar (expanded) */
  --sidebar-w-collapsed: 72px;      /* app shell sidebar (collapsed) */
  /* Horizontale correctie voor trigger-gebonden popups. JavaScript zet alleen een waarde
     wanneer de popup anders buiten de viewport valt; 0 houdt de standaard-uitlijning intact. */
  --co-popup-shift-x: 0px;

  /* Right rail — ONE width for every rail page (feature-014, meeting 1-sep-2026).
     --rail-w is the intrinsic width of the rail itself and never changes.
     --rail-col is the width of the grid column that holds it; the collapsed
     state (html.co-rail-collapsed) drives it to 0 so the grid, the gap and the
     toggle handle all animate from a single source of truth. */
  --rail-w: 280px;
  --rail-col: var(--rail-w);
  /* Width of the seam column between content and rail. Wide enough to be a
     comfortable click target and to hold the grip, narrow enough to read as a
     divider rather than a gutter. */
  --rail-divider-w: 24px;
  /* Width of an amount box (bedragregel, subtotal, total) in the vordering cards.
     One token because a total only lines up under its amounts when both share it. */
  --amount-w: 140px;
  /* Hover-tint for the collapse seams (rail + sidebar). A soft dark rather than the
     brand-accent blue: the seam is a resting affordance in a tool people stare at for
     hours, so it should emphasise on hover without shouting. #0f1530 = the same navy the
     shadows are built on. */
  --seam-accent: rgba(15, 21, 48, 0.30);
  /* Height of the sticky breadcrumb bar: 2 * 10px padding-block + a 14px/1.6 line
     box + the 1px bottom border. app-shell.js overwrites this with the MEASURED
     height (the breadcrumb can wrap); this default only has to carry first paint
     and pages that render no dossier header at all — but keep it in step with
     .app-dossier-header in app-shell.css, or the rail starts the page misplaced. */
  --dossier-h: 43px;

  /* Padding inside the app shell's content column — and NOT only there.

     --content-pad-x is the shell's LEFT RAIL: every band stacked in that column
     shares it so their text lines up vertically — .app-content, the sticky
     breadcrumb bar (.app-dossier-header) and the topbar's right zone
     (.app-topbar__right), all in app-shell.css. Never hard-code a number in one
     of them; that is exactly how the breadcrumb ended up 8px right of the
     content when this padding went 32px -> 24px.

     --content-pad-y is ALSO the rail's sticky offset: the rail's natural position
     is exactly this far below the breadcrumb bar, so if the two numbers differ the
     rail visibly drifts by the difference before it locks (it did — 24px padding
     against a 20px sticky top gave a 4px slide). One token, no drift.

     Narrow screens retune all three at once via .app-shell in app-shell.css's
     900px block — override the tokens there, not the individual rules. */
  --content-pad-y: 16px;
  --content-pad-x: 24px;
  /* Right padding of .app-content. 0 on desktop: the rail (or the page's own
     max-width) is the right edge, extra padding there is dead space. Up to 1100px,
     where the rail stacks under the content, app-shell.css sets it back to
     --content-pad-x. */
  --content-pad-end: 0px;
  --content-pad-bottom: 40px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro: 120ms;
  --dur-page: 200ms;
  --dur-modal: 320ms;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--text);
  background-color: var(--surface);
  line-height: var(--line-height-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent scrolling when mobile nav is open without breaking sticky */
body.nav-open {
  overflow: clip;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--brand-dark);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.3;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

p { margin: 0 0 var(--spacing-md) 0; }

a {
  color: var(--brand-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.text-muted { color: var(--muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* --------------------------------------------------------------------------
   Public header logo (used by _Layout public chrome — ook in de wizard, die
   sinds 23-09-2026 een geneste layout binnen _Layout is).
   Het woordmerk is --brand-dark, net als .app-logo__text in de app-shell. Hier
   stond --text-light (#FFF) op een witte header: het woordmerk renderde wél,
   maar onzichtbaar — alleen het ronde icoon bleef over.
   -------------------------------------------------------------------------- */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: var(--font-size-lg);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo:hover {
  text-decoration: none;
  color: var(--brand-dark);
}

.nav-logo-img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.nav-logo-img:hover {
  transform: scale(1.12) rotate(-3deg);
  filter: brightness(1.1);
}

.nav-logo-text {
  transition: opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   Main Content
   -------------------------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-top: 15px;
}

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--spacing-xl);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border);
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: var(--font-size-base);
  min-width: 0;
  word-break: break-word;
}

.card-body,
.card > :not(.card-header):not(.card-footer):not(table):not(.table-responsive) {
  padding: var(--spacing-lg);
}

.card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   Content Grids (responsive two-column layouts)
   -------------------------------------------------------------------------- */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Stat Cards
   -------------------------------------------------------------------------- */
.stat-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.stat-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stat-tag.tag-geopend .stat-tag-dot { background: var(--success); }
.stat-tag.tag-in-afwikkeling .stat-tag-dot { background: var(--warning); }
.stat-tag.tag-aangemaakt .stat-tag-dot { background: var(--info); }
.stat-tag.tag-afgesloten .stat-tag-dot { background: var(--muted); }
.stat-tag.tag-ingediend .stat-tag-dot { background: var(--brand-accent); }
.stat-tag.tag-in-beoordeling .stat-tag-dot { background: var(--warning); }
.stat-tag.tag-goedgekeurd .stat-tag-dot { background: var(--success); }
.stat-tag.tag-afgewezen .stat-tag-dot { background: var(--error); }
.stat-tag.tag-concept .stat-tag-dot { background: var(--muted); }
.stat-tag.tag-gedeeltelijk .stat-tag-dot { background: var(--warning); }
.stat-tag.tag-ingetrokken .stat-tag-dot { background: var(--muted); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table th,
.table td {
  padding: 0 var(--spacing-md);
  height: var(--row-h);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.table th {
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  background: var(--table-header);
  white-space: nowrap;
}

/* Round table header corners at cell level (survives overflow: visible) */
.table thead tr:first-child th:first-child {
  border-top-left-radius: var(--radius-md);
}

.table thead tr:first-child th:last-child {
  border-top-right-radius: var(--radius-md);
}

.table td {
  font-size: var(--font-size-sm);
  color: var(--text);
}

.table tbody tr {
  transition: background-color 0.15s ease;
  background: white;
}

.table tbody tr:nth-child(even) {
  background: var(--surface-secondary);
}

.table tbody tr:hover {
  background: var(--accent-soft);
}

.table-interactive tbody tr {
  cursor: pointer;
}

.table-interactive tbody tr:active {
  background: var(--surface-secondary);
}

/* Sortable column headers; the click handler is Table.makeSortable in site.js. */
.table-sortable th[data-sortable] {
  cursor: pointer;
}

/* Table inside any card — the card provides rounding + shadow, so flatten the
   table (no own radius/shadow, no rounded header corners). Descendant combinator
   so it works through an optional .table-responsive wrapper and any card type. */
:is(.card, .card-body, .co-card, .co-card__body) .table {
  border-radius: 0;
  box-shadow: none;
}

:is(.card, .card-body, .co-card, .co-card__body) .table thead tr:first-child th:first-child {
  border-top-left-radius: 0;
}

:is(.card, .card-body, .co-card, .co-card__body) .table thead tr:first-child th:last-child {
  border-top-right-radius: 0;
}

/* card-body wrapping a table: strip padding so table fills the card edge-to-edge */
.card-body:has(> .table-responsive),
.card-body:has(> .table) {
  padding: 0;
}

/* Responsive table wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card > .table-responsive {
  border-radius: 0;
}

/* Sticky table headers inside scrollable containers */
.table-responsive .table {
  margin-bottom: 0;
  min-width: 600px;
  overflow: visible;
}

.table-responsive .table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-header);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  .table th {
    font-size: 10px;
  }
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--brand-accent);
  color: var(--text-light);
}

.btn-primary:hover {
  background: var(--brand-accent-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--surface);
}

.btn-outline-primary {
  background: transparent;
  color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
}

.btn-outline-primary:hover {
  background: var(--brand-accent);
  color: var(--text-light);
}

.btn-danger {
  background: var(--error);
  color: var(--text-light);
}

.btn-danger:hover {
  background: #b43e3e;
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
}

.btn-xs {
  padding: 2px var(--spacing-xs);
  font-size: 11px;
  gap: 3px;
}

/* --------------------------------------------------------------------------
   Bericht status icons (inline per-crediteur in table)
   -------------------------------------------------------------------------- */
.bericht-icons {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.bericht-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  cursor: default;
  position: relative;
  border: none;
  padding: 0;
}

.bericht-icon-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.bericht-icon--clickable {
  cursor: pointer;
}

.bericht-icon--sent {
  background: var(--success-light);
  color: var(--success);
}

.bericht-icon--sent:hover {
  background: rgba(47, 163, 107, 0.2);
  transform: scale(1.1);
}

.bericht-icon--pending {
  background: var(--surface);
  color: var(--muted);
}

.bericht-icon--pending:hover {
  background: var(--surface-secondary);
  transform: scale(1.1);
}

.bericht-icon--clickable:hover {
  background: var(--brand-accent-light);
  color: var(--brand-accent);
  transform: scale(1.15);
}

/* Native tooltip enhancement via title attr — no extra CSS needed */

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  font-weight: 500;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  color: var(--text);
}

.form-group label.required::after {
  content: ' *';
  color: var(--error);
}

.form-control,
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-accent-light);
}

.form-control::placeholder {
  color: var(--muted);
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input-group-text {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Remove native spinner arrows from number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: var(--spacing-xs);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.form-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding-top: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: normal;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-accent);
}

/* --------------------------------------------------------------------------
   Form Validation (jQuery Unobtrusive Validation)
   -------------------------------------------------------------------------- */
.text-danger {
  color: var(--error);
}

.field-validation-error {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--error);
  margin-top: var(--spacing-xs);
}

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

/* Not on a borderless control inside a field box (.co-field__control, .co-repeat-amount): the box
   takes the red border itself (co-components.css, vordering.css). There this !important rule drew
   a second, inner frame and focus ring inside the box (feature-003, E4). */
.input-validation-error:not(:is(.co-field__control, .co-repeat-amount) > *) {
  border-color: var(--error) !important;
}

.input-validation-error:not(:is(.co-field__control, .co-repeat-amount) > *):focus {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px var(--error-light) !important;
}

.validation-summary-errors {
  background: var(--error-light);
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.validation-summary-errors ul {
  margin: var(--spacing-xs) 0 0 0;
  padding-left: var(--spacing-lg);
}

.validation-summary-errors ul li {
  margin-bottom: var(--spacing-xxs);
}

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

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-success {
  background: var(--success-light);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-light);
  color: var(--warning);
}

.badge-error,
.badge-danger {
  background: var(--error-light);
  color: var(--error);
}

.badge-info {
  background: var(--info-light);
  color: var(--info);
}

.badge-muted {
  background: var(--surface);
  color: var(--muted);
}

.badge-accent {
  background: var(--brand-accent-light);
  color: var(--brand-accent);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.alert-success {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success);
}

.alert-warning {
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.alert-error {
  background: var(--error-light);
  color: var(--error);
  border: 1px solid var(--error);
}

.alert-info {
  background: var(--info-light);
  color: var(--info);
  border: 1px solid var(--info);
}

/* Old .breadcrumb rules removed — migrated to .breadcrumbs / .breadcrumb-item / .breadcrumb-separator */

/* --------------------------------------------------------------------------
   Filter Form
   -------------------------------------------------------------------------- */
.filter-form {
  padding: var(--spacing-md);
}

.filter-row {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-row .form-group {
  margin-bottom: 0;
  min-width: 200px;
}

.filter-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Activity Timeline
   -------------------------------------------------------------------------- */
.activity-icon.accent {
  background: var(--brand-accent-light);
  color: var(--brand-accent);
}

.activity-icon.info {
  background: #e8f2fc;
  color: var(--info);
}

.activity-icon.success {
  background: #d4f5e4;
  color: var(--success);
}

.activity-icon.warning {
  background: #fef3cd;
  color: var(--warning);
}

.activity-icon.error {
  background: #fde8e8;
  color: var(--error);
}

.activity-icon.muted {
  background: var(--surface);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Public Layout (Unauthenticated)
   -------------------------------------------------------------------------- */
.public-header {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Eigen typografie, niet die van de pagina. De header staat ook boven de wizard, en
     body.wizard-body zet 16px / 1.5 i.p.v. 15px / 1.6; overgeërfd schoof het woordmerk
     daar een fractie van een pixel, wat na het afronden op het pixelraster zichtbaar
     versprong t.o.v. de publieke pagina. */
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* De hoogte van de .btn rechts: één regel --font-size-sm plus 2 × --spacing-sm padding
     (38,4px). De wizard toont als gefocuste flow géén knop; zonder deze ondergrens kromp de
     header daar en versprong hij bij de overgang vanaf de publieke faillissementspagina.
     Bewust dezelfde formule als de knop en geen afgeronde 38px: ook 0,4px is na het
     afronden op het pixelraster te zien. */
  min-height: calc(var(--font-size-sm) * var(--line-height-base) + 2 * var(--spacing-sm));
}

.public-nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.public-nav-links .nav-link {
  color: var(--text);
  padding: var(--spacing-sm) var(--spacing-md);
}

.public-nav-links .nav-link:hover {
  color: var(--brand-accent);
  background: transparent;
}

.public-main {
  flex: 1;
  overflow-x: hidden;
}

.public-footer {
  background: var(--brand-dark);
  color: var(--text-light);
  padding: var(--spacing-xl) 0 var(--spacing-md);
  margin-top: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand strong {
  font-size: var(--font-size-lg);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

.footer-links {
  display: flex;
  gap: var(--spacing-lg);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
  color: var(--text-light);
  text-decoration: none;
}

.footer-bottom {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   App Footer (Authenticated)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--spacing-2xl) 0;
  margin-top:15px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, #3a4a7a 100%);
  color: var(--text-light);
  overflow: hidden;
}

.hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}

.hero-content {
  flex: 1;
  max-width: 560px;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-xl);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.hero-actions .btn {
  padding: var(--spacing-md) var(--spacing-xl);
}

.hero-actions .btn-secondary {
  background: transparent;
  border: 2px solid var(--text-light);
  color: var(--text-light);
}

.hero-actions .btn-secondary:hover {
  background: var(--text-light);
  color: var(--brand-dark);
}

.hero-illustration {
  flex-shrink: 0;
}

/* Faillissement Search Section (Homepage) */
.faillissement-search {
  padding: var(--spacing-2xl) 0;
  background: var(--surface);
}

.faillissement-search h2 {
  text-align: center;
  margin-bottom: var(--spacing-xs);
}

.faillissement-search > .container > .text-muted {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.search-form {
  max-width: 640px;
  margin: 0 auto;
}

.search-input-group {
  display: flex;
  gap: var(--spacing-sm);
}

.search-input-group .form-control {
  flex: 1;
}

.search-results {
  margin-top: var(--spacing-xl);
}

.search-results .table-wrapper {
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.text-center, .table th.text-center, .table td.text-center { text-align: center; }
.text-right, .table th.text-right, .table td.text-right { text-align: right; }

.currency {
  font-variant-numeric: tabular-nums;
}

/* Currency table cell: € left-aligned, amount right-aligned, digits vertically aligned */
td.currency {
  text-align: right;
  white-space: nowrap;
}

td.currency .currency-cell {
  display: inline-flex;
  gap: var(--spacing-xs);
  width: 100%;
  justify-content: flex-end;
}

td.currency .currency-symbol {
  flex-shrink: 0;
  text-align: left;
  color: var(--muted);
}

td.currency .currency-amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

th.text-right + td.currency,
td.currency {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .hero .container {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-illustration {
    display: none;
  }

  .cta-form-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--brand-dark);
    flex-direction: column;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.25s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-links.active {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
  }

  .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .nav-link.active {
    background: var(--brand-accent);
  }

  .nav-logo-text {
    display: none;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .page-header > :first-child {
    flex: 1;
    min-width: 0;
  }

  .page-header .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
  }

  .page-header .btn svg {
    width: 14px;
    height: 14px;
  }

  .page-title {
    font-size: var(--font-size-xl);
    padding-bottom: 10px;
  }

  .content-grid,
  .footer-content {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .footer-links {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-row .form-group {
    min-width: 100%;
  }

  /* Breadcrumbs responsive */
  .breadcrumbs {
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm) 0;
  }

}

@media (max-width: 576px) {
  .hero h1 {
    font-size: 1.75rem;
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

}

/* --------------------------------------------------------------------------
   Focus & Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .top-nav,
  .app-footer,
  .breadcrumbs,
  .btn,
  .no-print {
    display: none !important;
  }

  .main-content {
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(29, 37, 71, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
  animation: modalFadeIn 0.15s ease forwards;
}

.modal-overlay.modal-closing {
  animation: modalFadeOut 0.15s ease forwards;
}

.modal-dialog {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 480px;
  margin: var(--spacing-lg);
  animation: modalSlideIn 0.2s ease;
}

.modal-closing .modal-dialog {
  animation: modalSlideOut 0.15s ease forwards;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  flex: 1;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  padding: var(--spacing-xs);
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.modal-close:hover {
  color: var(--text);
  background: var(--surface);
}

.modal-body {
  padding: var(--spacing-lg) var(--spacing-xl);
}

.modal-body p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg);
  border-top: 1px solid var(--border);
}

/* Modal icon */
.modal-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-icon-info {
  background: var(--info-light);
  color: var(--info);
}

.modal-icon-success {
  background: var(--success-light);
  color: var(--success);
}

.modal-icon-warning {
  background: var(--warning-light);
  color: var(--warning);
}

.modal-icon-danger {
  background: var(--error-light);
  color: var(--error);
}

/* Modal animations */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modalSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

/* Modal responsive */
@media (max-width: 576px) {
  .modal-dialog {
    max-width: calc(100% - var(--spacing-md) * 2);
    margin: var(--spacing-md);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: calc(var(--nav-height) + var(--spacing-md));
  right: var(--spacing-lg);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 420px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid var(--border);
  animation: toastIn 0.3s ease;
  font-size: var(--font-size-sm);
}

.toast-success {
  border-left-color: var(--success);
}

.toast-error {
  border-left-color: var(--error);
}

.toast-warning {
  border-left-color: var(--warning);
}

.toast-info {
  border-left-color: var(--info);
}

.toast-message {
  flex: 1;
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.toast-close:hover {
  color: var(--text);
}

.toast-out {
  animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   Action Group (inline action buttons)
   -------------------------------------------------------------------------- */
.action-group {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.btn-xs {
  padding: 2px 8px;
  font-size: var(--font-size-xs);
}

/* --------------------------------------------------------------------------
    Pagination
    -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  flex-wrap: wrap;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--muted);
  white-space: nowrap;
}

.pagination-page-number {
  font-weight: 600;
  color: var(--text);
}

.pagination-separator {
  color: var(--border);
  margin: 0 var(--spacing-xs);
}

.pagination-total {
  color: var(--muted);
}

.pagination .btn-prev,
.pagination .btn-next {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  transition: all 0.2s ease;
  min-width: auto;
}

.pagination .btn-prev:disabled,
.pagination .btn-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn-text {
  display: inline;
}

/* Mobile: Hide button text, make buttons icon-only and compact */
@media (max-width: 640px) {
  .pagination {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .pagination-btn-text {
    display: none;
  }

  .pagination .btn-prev,
  .pagination .btn-next {
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    min-width: 40px;
    height: 36px;
  }

  .pagination .btn-prev::before {
    content: '←';
  }

  .pagination .btn-next::after {
    content: '→';
  }

  .pagination-info {
    font-size: var(--font-size-xs);
    gap: 2px;
    padding: 0 var(--spacing-sm);
  }

  .pagination-separator {
    margin: 0 2px;
  }
}

/* --------------------------------------------------------------------------
    Form Check Group
    -------------------------------------------------------------------------- */
.form-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

/* A form-check whose label is a title plus an explanation, for settings where the consequence of
   the vinkje is not obvious from three words (kantoor → rechten en toegang). */
.form-check__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--fg-1);
}
.form-check__code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--fg-3);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.form-check__text {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--fg-3);
  line-height: 1.45;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Row States
   -------------------------------------------------------------------------- */
.row-muted {
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Detail Grid (side-by-side cards)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .toast-container {
    right: var(--spacing-sm);
    left: var(--spacing-sm);
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Lifecycle action bar
   -------------------------------------------------------------------------- */
.lifecycle-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .lifecycle-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .lifecycle-bar::-webkit-scrollbar {
    display: none;
  }

  .lifecycle-bar form {
    flex-shrink: 0;
  }

  .lifecycle-bar .btn {
    white-space: nowrap;
  }
}

.btn-warning {
  background: var(--warning);
  color: #fff;
}

.btn-warning:hover {
  background: #c49435;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Detail List (key-value pairs)
   -------------------------------------------------------------------------- */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0;
}

.detail-list.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.detail-list.horizontal .detail-item {
  min-width: 200px;
  flex: 1;
}

.detail-item {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.detail-item dt {
  font-weight: 500;
  color: var(--muted);
  min-width: 120px;
  flex-shrink: 0;
}

.detail-item dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 576px) {
  .detail-item {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .detail-item dt {
    min-width: auto;
  }

  .detail-list.horizontal {
    flex-direction: column;
  }

  .detail-list.horizontal .detail-item {
    min-width: auto;
  }
}

/* --------------------------------------------------------------------------
   Page Badges (inline badge group)
   -------------------------------------------------------------------------- */
.page-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   Compare Grid (side-by-side comparison)
   -------------------------------------------------------------------------- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  align-items: stretch;
}

.compare-grid > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Compare Form (input row)
   -------------------------------------------------------------------------- */
.compare-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: flex-end;
}

.compare-form .form-group {
  flex: 1;
  min-width: 180px;
  margin: 0;
}

.compare-arrow {
  font-size: 24px;
  color: var(--muted);
  padding-bottom: 8px;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .compare-form {
    flex-direction: column;
  }

  .compare-form .form-group {
    min-width: 100%;
  }

  .compare-arrow {
    display: none;
  }

  .compare-form .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Company Compare Card
   -------------------------------------------------------------------------- */
.company-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-top: 4px solid var(--success);
}

.company-card.inactive {
  border-top-color: var(--muted);
}

.company-card-footer {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .company-card-header .btn {
    width: 100%;
  }

  .company-card-footer {
    flex-direction: column;
  }

  .company-card-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Vestigingen Tag List
   -------------------------------------------------------------------------- */
.vestigingen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Allow badges with long text to wrap */
.vestigingen-tags .badge {
  white-space: normal;
  word-break: break-word;
  text-align: left;
}

/* --------------------------------------------------------------------------
   SBI List (activiteiten)
   -------------------------------------------------------------------------- */
.sbi-list {
  margin: 0;
  padding-left: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.sbi-list code {
  font-size: var(--font-size-xs);
}

@media (max-width: 576px) {
  /* Nested stat grids in cards */
  .card-body .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .card-body .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Button Text Hide on Mobile (only in page header)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .page-header .btn .btn-text {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Detail List Grid Variant (dt/dd pairs in 2-column grid)
   -------------------------------------------------------------------------- */
.detail-list-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-xxs) var(--spacing-md);
  font-size: var(--font-size-sm);
  margin: 0;
}

.detail-list-grid dt {
  color: var(--muted);
  font-weight: 500;
}

.detail-list-grid dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Detail Row (inline dt/dd pair)
   -------------------------------------------------------------------------- */
.detail-row {
  display: flex;
  gap: var(--spacing-lg);
}

.detail-row dt {
  font-weight: 500;
  color: var(--muted);
  min-width: 140px;
  max-width: 140px;
  flex-shrink: 0;
  overflow-wrap: break-word;
}

.detail-row dd {
  margin: 0;
  flex: 1;
}

/* --------------------------------------------------------------------------
   Detail Label/Value (stacked label + value)
   -------------------------------------------------------------------------- */
.detail-label {
  font-size: var(--font-size-sm);
  color: var(--muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Content Wrapper (centered prose content)
   -------------------------------------------------------------------------- */
.page-section {
  padding: var(--spacing-2xl) 0;
}

.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.content-wrapper h1 {
  margin-bottom: var(--spacing-md);
}

.content-wrapper .lead {
  font-size: var(--font-size-lg);
  color: var(--muted);
  margin-bottom: var(--spacing-lg);
}

.content-wrapper h2 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-xl);
}

.content-wrapper ul {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.content-wrapper li {
  margin-bottom: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   Card Variants
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.d-flex { display: flex; }
.align-center { align-items: center; }

/* Flex alignment */
.align-items-center  { align-items: center; }
.align-items-start   { align-items: flex-start; }
.align-items-end     { align-items: flex-end; }
.align-self-center   { align-self: center; }
.align-self-start    { align-self: flex-start; }
.align-self-end      { align-self: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-center  { justify-content: center; }
.justify-content-start   { justify-content: flex-start; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1   { flex-grow: 1; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }

/* Typography */
.fw-medium  { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold    { font-weight: 700; }
.small      { font-size: var(--font-size-xs); }

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.text-preserve-whitespace { white-space: pre-wrap; }

/* --------------------------------------------------------------------------
   Spinner Animation
   -------------------------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  border: 3px solid var(--border);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner--button {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-width: 2px;
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

/* --------------------------------------------------------------------------   
   Autocomplete / Crediteur Suggesties
   -------------------------------------------------------------------------- */
.autocomplete-results {
    position: absolute;
    /* Without an explicit offset an absolute child of a flex column (.co-field) takes its static
       position at the start of the container, so the list covered the label and the input. */
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface-elevated);
    border: 1px solid var(--border-1);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-1);
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--surface-secondary);
}

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

/* --------------------------------------------------------------------------   
   Document Upload (standalone — for Create forms without _DocumentUpload partial)
   -------------------------------------------------------------------------- */
.document-upload .upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    background: var(--surface);
}

.document-upload .upload-area:hover,
.document-upload .upload-area.drag-over {
    border-color: var(--brand-accent);
    background: var(--brand-accent-light);
}

.document-upload .upload-input {
    display: none;
}

.document-upload .upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--muted);
}

.document-upload .upload-prompt svg {
    color: var(--brand-accent);
}

.document-upload .upload-prompt p {
    margin: 0;
}

.document-upload .uploaded-files {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.document-upload .uploaded-file {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.document-upload .file-icon {
    flex-shrink: 0;
    color: var(--muted);
}

.document-upload .file-info {
    flex: 1;
    min-width: 0;
}

.document-upload .file-name {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-upload .file-meta {
    font-size: var(--font-size-sm);
    color: var(--muted);
}

.document-upload .file-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.document-upload {
    margin-bottom: var(--spacing-md);
}

.document-upload .upload-progress {
    padding: var(--spacing-md);
}

.document-upload .progress-bar {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.document-upload .progress-fill {
    height: 100%;
    background: var(--brand-accent);
    width: 50%;
    animation: progress-pulse 1.5s infinite;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.document-upload.upload-disabled {
    position: relative;
}

.document-upload.upload-disabled .upload-area {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.document-upload .upload-disabled-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--muted);
}

.document-upload .upload-disabled-overlay svg {
    color: var(--muted);
}

.document-upload .upload-disabled-overlay p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Right-rail collapsed state (feature-014). Set on <html> by the no-flash
   restore in _AppShell and toggled by app-shell.js, so every rail grid, the
   column gap and the toggle handle move together from one declaration.
   -------------------------------------------------------------------------- */
html.co-rail-collapsed {
  --rail-col: 0px;
}

/* --------------------------------------------------------------------------
   Screen-reader-only — content that must be announced but not shown.
   Used by the search suggestions to publish the result count to a live region
   (wwwroot/js/app-zoek.js).
   -------------------------------------------------------------------------- */
.co-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   Skip-link — "Naar de inhoud" (WCAG 2.4.1, Bypass Blocks, niveau A)
   --------------------------------------------------------------------------
   Het eerste focusbare element van beide layouts. Zonder deze link moet een
   toetsenbordgebruiker op élke paginaweergave eerst door de complete sidebar
   tabben voordat hij bij de inhoud is — in het dossiermenu zijn dat een stuk
   of vijftien items, op elke pagina opnieuw.

   Buiten beeld met transform en niet met display:none of visibility:hidden:
   die twee halen het element uit de tabvolgorde, en dan is er niets meer om
   te focussen. `position: fixed` in plaats van absolute, zodat de link niet
   afhangt van welke voorouder toevallig gepositioneerd is.

   Bewust `:focus` en niet `:focus-visible`: de link is alleen met het
   toetsenbord te bereiken, en bij :focus-visible zou een muisklik erop hem
   midden in de interactie laten verdwijnen.
   -------------------------------------------------------------------------- */
.co-skiplink {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 2100;              /* boven de modal-overlay (2000) */
  padding: 10px 16px;
  background: var(--surface-elevated);
  color: var(--brand-accent);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--dur-micro) var(--ease-standard);
}

.co-skiplink:focus {
  transform: translateY(0);
}

/* <main> krijgt tabindex="-1" zodat de focus er echt heen springt; die
   tabindex geeft in sommige browsers een eigen focusring op een blok dat
   nooit zelf focusbaar hoort te zijn. */
main:focus {
  outline: none;
}

}

/* ══════════════════════════════════════════════════════════════════════════
   Toegankelijkheidslaag — @layer a11y
   ──────────────────────────────────────────────────────────────────────────
   Elk stylesheet dat correcties nodig heeft, sluit af met zo'n blok. De a11y-laag
   staat als laatste in de laagvolgorde en wint daarmee van álles, ongeacht
   specificiteit — dát is de reden dat hier geen enkele !important staat. Zonder
   lagen zou `.form-control:focus { outline: none }` (0,2,0) de focusring van
   `:focus-visible` (0,1,0) blijven verslaan.

   Bewust per bestand en niet één centraal blok: een selector hoort in het
   stylesheet waar zijn component woont, anders beslist de laadvolgorde weer mee
   (zie CssDuplicateSelectorArchitectureTests). Dit blok bevat dus alleen de
   globale regels en de componenten uit site.css zelf.

   Twee dingen die in deze modus stuk gaan en die de hele applicatie raken:
     • `box-shadow` wordt in forced-colors volledig onderdrukt. Elke focusring
       hier is een box-shadow (`--shadow-focus`), en `.form-control:focus` zet
       `outline: none` — samen betekende dat: géén zichtbare focus. WCAG 2.4.7.
     • kaarten, pillen en badges worden onderscheiden door hun achtergrondkleur;
       die wordt geforceerd, dus die vlakken vielen samen met de pagina.

   De kleuren hieronder zijn systeemsleutelwoorden (Highlight, CanvasText,
   GrayText). Alleen die dragen in deze modus nog betekenis.
   ══════════════════════════════════════════════════════════════════════════ */
@layer a11y {

  /* ── Verminderde beweging (WCAG 2.3.3) ──────────────────────────────────
     Eén regel voor de hele applicatie in plaats van per animatie. Bewust een
     zeer korte duur en geen `animation: none`: een animatie die van opacity 0
     naar 1 loopt zou bij `none` op 0 blijven staan en het element onzichtbaar
     maken. 1ms laat hem meteen zijn eindstand innemen. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 1ms;
      animation-iteration-count: 1;
      transition-duration: 1ms;
      scroll-behavior: auto;
    }
  }

  @media (forced-colors: active) {
    /* De outline overleeft forced colors, de box-shadow niet. */
    :focus-visible {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }

    /* Vlakken die alleen aan hun achtergrond te herkennen zijn. */
    .card,
    .autocomplete-results,
    .toast {
      border: 1px solid CanvasText;
    }

    /* Een badge is een gekleurd vlak met tekst; zonder vlak blijft losse
       tekst over, dus de vorm moet uit een rand komen. */
    .badge {
      border: 1px solid currentColor;
    }
  }
}