/* =====================================================================
   KMO COCKPIT — MICROSITE TABLE STYLE
   Drop into Kentico microsite global CSS.
   Markup contract for the migrated JSON content:
     <table class="kmo-table journaalpost">      D/C journal entry
     <table class="kmo-table reference">         text-heavy reference
     <tr class="debet">                          debit row
     <tr class="credit">                         credit row
     <td class="num">10.664,50</td>              right-aligned numeric
     <td data-label="Rekening">495</td>          mobile card-stack label
   The migration script wraps every page body in <div class="kmo-content">,
   which scopes typography and acts as the container-query host.
   ---------------------------------------------------------------------
   FONT SWAP HOOK
   System stack is the default. To swap in BDO's brand font once it's
   loaded by the microsite, override --font-body on :root, e.g.:
     :root { --font-body: "Proxima Nova", system-ui, sans-serif; }
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --color-primary: #e81f2e; /* BDO red — accent only, never fills */
  --color-text: #15192a; /* deep slate, body copy */
  --color-text-muted: #5c6473; /* secondary labels, captions */
  --color-border: #e2e5ea; /* hairline row dividers */
  --color-rule-strong: #15192a; /* table top/bottom rules */
  --color-surface: #ffffff;
  --color-surface-alt: #f7f8fa; /* thead, reference table fill */
  --color-credit: #3b4252; /* graphite — credit chip / accent */

  /*--font-body:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;*/

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
}

/* ---------- Content scope ----------
   Every migrated page body is wrapped in <div class="kmo-content"> so
   these rules don't leak to the rest of the microsite. Also acts as
   the container-query host for responsive table behavior. */
.kmo-content {
  /*font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  max-width: 760px;*/
  container-type: inline-size;
  container-name: kmo;
}

/* ---------- Heading hierarchy (h2 / h3) ----------
   The cleaner enforces h2 → h3 (no h4 jumps). h2 is a section anchor
   with a strong slate rule below; h3 is a sub-heading with a small red
   prefix bar so it reads as "next level down" without a font-size war. */
.kmo-content h2 {
  margin: var(--space-7) 0 var(--space-3);
  padding-bottom: var(--space-2);
}
.kmo-content h2:first-child {
  margin-top: 0;
}
.kmo-content h3 {
  margin: var(--space-6) 0 var(--space-3);
}
.kmo-content h3::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--color-primary);
  vertical-align: middle;
  margin-right: var(--space-3);
  transform: translateY(-3px);
}

/* ---------- Body prose ---------- */
.kmo-content p,
.kmo-content ul,
.kmo-content ol {
  margin: 0 0 var(--space-4);
}
.kmo-content ul,
.kmo-content ol {
  padding-left: 1.25rem;
}
.kmo-content li {
  margin-bottom: var(--space-2);
}
.kmo-content strong {
  font-weight: 600;
}

/* ---------- Base table (.kmo-table) ----------
   Shared rules for ALL migrated tables. Printed-register feel:
   thick rules above and below, hairline rows, no zebra by default. */
.kmo-table {
  width: 100%;
  border-collapse: collapse !important;
  margin: var(--space-5) 0 var(--space-6) !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text) !important;
  border-top: 2px solid var(--color-rule-strong) !important;
  border-bottom: 2px solid var(--color-rule-strong) !important;
}
.kmo-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-alt);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border) !important;
  white-space: nowrap;
}
.kmo-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: top;
}
.kmo-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Numeric cells ----------
   Apply <td class="num"> AND <th class="num"> on amount columns.
   Tabular figures keep columns aligned at any width. */
.kmo-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ---------- Journaalpost variant (.kmo-table.journaalpost) ----------
   Layout: D/C chip | account # | description | debet | credit
   The first cell holds plain text "D" or "C" in the JSON markup.
   We hide that text and render a colored circular chip via ::after,
   keyed off the row class. Markup stays semantic; presentation lives
   entirely in CSS. */
.kmo-table.journaalpost tbody td:first-child {
  width: 1%; /* shrink-wrap the chip column */
  padding-right: var(--space-3);
  text-align: center;
  font-size: 0; /* hides the literal "D"/"C" text */
}
.kmo-table.journaalpost tbody tr.debet td:first-child::after,
.kmo-table.journaalpost tbody tr.credit td:first-child::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}
.kmo-table.journaalpost tbody tr.debet td:first-child::after {
  content: "D";
  background: var(--color-primary);
}
.kmo-table.journaalpost tbody tr.credit td:first-child::after {
  content: "C";
  background: var(--color-credit);
}

/* Subtle row hover for on-screen scanning */
.kmo-table.journaalpost tbody tr:hover {
  background: var(--color-surface-alt);
}

/* Separator row — single cell with colspan, used between alternative
   journaalposten ("Of" / "en"). Italic centered text, no chip. */
.kmo-table.journaalpost tbody tr.separator td {
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
}
.kmo-table.journaalpost tbody tr.separator td::after {
  content: none; /* override the chip ::after rule */
}

/* ---------- Reference variant (.kmo-table.reference) ----------
   Text-heavy comparison tables (e.g. autokosten aftrekbaarheid).
   Dark header band, alternating row tint, generous padding. */
.kmo-table.reference thead th {
  background: var(--color-rule-strong);
  color: #fff;
  letter-spacing: 0.08em;
}
.kmo-table.reference tbody td {
  padding: var(--space-4);
}
.kmo-table.reference tbody tr:nth-child(even) td {
  background: var(--color-surface-alt);
}
.kmo-table.reference tbody td:first-child {
  font-weight: 600;
  white-space: nowrap;
}
.kmo-table.reference ul {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
}
.kmo-table.reference li {
  margin-bottom: var(--space-1);
}

/* ---------- Responsive: journaalpost cards under 640px CONTAINER ----------
   Container queries (not viewport) so the same rules trigger inside
   narrow Kentico widget areas as well as on real mobile. Each row
   becomes a labeled card with the D/C chip pinned left. The cleaner
   adds data-label="…" on each <td> matching its <th> to drive the
   inline labels here. */
@container kmo (max-width: 640px) {
  .kmo-table.journaalpost {
    border: 0;
  }
  .kmo-table.journaalpost thead {
    /* visually hidden, kept for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .kmo-table.journaalpost tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border) !important;
  }
  .kmo-table.journaalpost tbody tr:first-child {
    border-top: 2px solid var(--color-rule-strong) !important;
  }
  .kmo-table.journaalpost tbody tr:last-child {
    border-bottom: 2px solid var(--color-rule-strong) !important;
  }
  .kmo-table.journaalpost tbody td {
    border: 0;
    padding: 0;
  }
  .kmo-table.journaalpost tbody td:first-child {
    grid-row: 1 / span 4;
    grid-column: 1;
    padding: var(--space-1) 0 0;
  }
  .kmo-table.journaalpost tbody td:not(:first-child) {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .kmo-table.journaalpost tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    flex: 0 0 auto;
  }
  .kmo-table.journaalpost tbody td.num {
    text-align: right;
  }
  /* Separator rows: stay as a single centered band even in card mode */
  .kmo-table.journaalpost tbody tr.separator {
    display: block;
    grid-template-columns: none;
    border: 0;
    padding: 0;
  }
  .kmo-table.journaalpost tbody tr.separator td {
    display: block;
    width: 100%;
  }

  /* Reference tables don't card-stack cleanly — let them scroll */
  .kmo-table.reference {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}