/* /Components/AccountTokens.razor.rz.scp.css */
/* Involved-account codes in mutation overviews: small mono tokens that wrap on narrow screens.
   Credit-side accounts are muted so the debit/credit split reads at a glance; each token's full
   "code — name" lives in its title attribute. */
.rekeningen[b-ziujps6cu5] { display: inline-flex; flex-wrap: wrap; gap: 0.05rem 0.4rem; font-family: var(--mono); font-size: 0.85em; }
.rekeningen .rk-credit[b-ziujps6cu5] { color: var(--fg-muted); }
/* /Components/DashboardChart.razor.rz.scp.css */
/* Diagramcontainer. De min-height is dezelfde als CHART_HEIGHT in site.js: ApexCharts rekent de
   assen en legenda bínnen die hoogte, dus de as wordt niet afgeknipt en de kaart springt niet
   tijdens het tekenen. Zonder JS blijft de div leeg — de voetlink is dan de tabelweergave.
   ::deep: de apexcharts-elementen worden door de library in de container getekend. */
.chart[b-0268dclbu4] { min-height: 260px; }
.chart[b-0268dclbu4]  .apexcharts-tooltip { box-shadow: var(--shadow-2); border: 1px solid var(--hairline); }
/* Elk punt is een drill-down naar de rapportage eronder. */
.chart[b-0268dclbu4]  .apexcharts-bar-area,
.chart[b-0268dclbu4]  .apexcharts-marker { cursor: pointer; }
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* Anonymous account/auth pages (login/register/etc.): center the form both horizontally and
   vertically in the space below the topbar. Overrides the global main layout (site.css), which
   top-aligns content within a max-width. The min-height fills the viewport minus the topbar
   (3rem min-height + 1px bottom border). */
main.account-main[b-8x9jnz9tbb] {
    max-width: none;
    min-height: calc(100vh - 3rem - 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Public landing page chrome. The topbar itself comes from site.css; this only places the two
   auth actions at the far end of the bar, opposite the brand. */
.landing-auth[b-oxa1n6k9lo] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
/* /Components/Pages/Beginbalans/BeginbalansFormPage.razor.rz.scp.css */
/* Beginbalans grid: right-aligned debit/credit amount inputs. */
input.bb-debit[b-gxrffcisow],
input.bb-credit[b-gxrffcisow] {
    width: 8rem;
    text-align: right;
}
/* /Components/Pages/DashboardContent.razor.rz.scp.css */
/* Dashboard-only accents on the shared .card/.dashboard-grid base (site.css). */
/* Attention tile: a non-zero suspense/bridging balance is a thing to act on, not a stat. */
.card-attention[b-9h5b02nz9w] { border-color: var(--warn); }
.stat[b-9h5b02nz9w] { font-family: var(--display); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; margin: 0.25rem 0; }
.stat-warn[b-9h5b02nz9w] { color: var(--warn); }
/* Open-opmerkingen list (base .note-list in site.css): each note is a full-row link with the
   text over a muted meta line. */
.note-list .note-link[b-9h5b02nz9w] { display: block; padding: 0.4rem 0.5rem; border-radius: var(--radius); color: inherit; }
.note-list .note-link:hover[b-9h5b02nz9w] { background: var(--bg); text-decoration: none; }
/* /Components/Pages/Documenten/DocumentPreview.razor.rz.scp.css */
/* Document archive: inline preview of an uploaded blob. The doc-split layout (site.css) overrides
   the height when the preview sits in the side-by-side pane. */
.doc-preview[b-yy29p9918t] { width: 100%; height: 75vh; border: 1px solid var(--hairline); }
.doc-preview-image[b-yy29p9918t] { max-width: 100%; height: auto; border: 1px solid var(--hairline); }
/* /Components/Pages/Documenten/PrefillStatusCell.razor.rz.scp.css */
/* Spinner for the "Automatisch lezen" status cell while the prefill pipeline reads a document
   (the cell HTMX-polls itself until the status is terminal). Scaled to text-line height
   (16px box ≈ 22px rotated diagonal) so the table row doesn't grow.
   The @keyframes are emitted globally by the CSS-isolation bundler — names stay unique. */
.loader[b-0v8hvkxo6p] {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  transform: rotate(45deg);
}
.loader[b-0v8hvkxo6p]::before {
  content: '';
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: -8px;
  animation: animloader-b-0v8hvkxo6p 4s ease infinite;
}
.loader[b-0v8hvkxo6p]::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  animation: animloader2-b-0v8hvkxo6p 2s ease infinite;
}

@keyframes animloader-b-0v8hvkxo6p {
  0% {
    box-shadow: 0 8px rgba(255, 255, 255, 0), 8px 8px rgba(255, 255, 255, 0), 8px 16px rgba(255, 255, 255, 0), 0px 16px rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 0 8px var(--accent), 8px 8px rgba(255, 255, 255, 0), 8px 16px rgba(255, 255, 255, 0), 0px 16px rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 0 8px var(--accent), 8px 8px var(--accent), 8px 16px rgba(255, 255, 255, 0), 0px 16px rgba(255, 255, 255, 0);
  }
  37% {
    box-shadow: 0 8px var(--accent), 8px 8px var(--accent), 8px 16px var(--accent), 0px 16px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 8px var(--accent), 8px 8px var(--accent), 8px 16px var(--accent), 0px 16px var(--accent);
  }
  62% {
    box-shadow: 0 8px rgba(255, 255, 255, 0), 8px 8px var(--accent), 8px 16px var(--accent), 0px 16px var(--accent);
  }
  75% {
    box-shadow: 0 8px rgba(255, 255, 255, 0), 8px 8px rgba(255, 255, 255, 0), 8px 16px var(--accent), 0px 16px var(--accent);
  }
  87% {
    box-shadow: 0 8px rgba(255, 255, 255, 0), 8px 8px rgba(255, 255, 255, 0), 8px 16px rgba(255, 255, 255, 0), 0px 16px var(--accent);
  }
  100% {
    box-shadow: 0 8px rgba(255, 255, 255, 0), 8px 8px rgba(255, 255, 255, 0), 8px 16px rgba(255, 255, 255, 0), 0px 16px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader2-b-0v8hvkxo6p {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0);
  }
  25% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }
  50% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }
  75% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
  100% {
    transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}
/* /Components/Pages/Grootboek/GrootboekLijst.razor.rz.scp.css */
/* One table per category, but they must read as one list: fixed layout with shared column
   widths, so Code/Omschrijving/Groep sit at the same x-position in every table instead of each
   table auto-sizing its own columns. The data-colw key is shared too, so a user resize already
   moved them in step — this makes the DEFAULTS line up as well (and is what a double-click
   reset returns to). Omschrijving carries no width and absorbs the rest. */
table[b-rksp8m46mw] { table-layout: fixed; }
th.col-edit[b-rksp8m46mw] { width: 3rem; }
th.col-code[b-rksp8m46mw] { width: 5.5rem; }
th.col-groep[b-rksp8m46mw] { width: 25%; }


.tag[b-rksp8m46mw] { 
	margin-left: 1em;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Skeleton placeholder shown while the dashboard content loads as an htmx fragment (issue #61).
   The grid itself is the shared .dashboard-grid in site.css; this file only paints the shimmer.
   Shapes echo a filled-in dashboard: a title bar, a hint line, then a chart block or table rows. */
.skeleton-line[b-suqv3826s6],
.skeleton-chart[b-suqv3826s6] {
    background: var(--hairline);
    border-radius: 4px;
    animation: skeleton-pulse-b-suqv3826s6 1.4s ease-in-out infinite;
}
.skeleton-line[b-suqv3826s6] { height: 0.9rem; margin: 0.5rem 0; }
.skeleton-title[b-suqv3826s6] { width: 35%; height: 1.05rem; }
.skeleton-hint[b-suqv3826s6] { width: 65%; height: 0.8rem; margin-bottom: 1rem; }
.skeleton-chart[b-suqv3826s6] {
    height: 260px; /* keep equal to .chart min-height in DashboardChart.razor.css */
    border-radius: var(--radius);
}
@keyframes skeleton-pulse-b-suqv3826s6 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-line[b-suqv3826s6], .skeleton-chart[b-suqv3826s6] { animation: none; opacity: 0.45; }
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Landing page (public root). Alles hier is paginaspecifiek — de generieke .card, .btn en .muted
   komen uit site.css. Geen --green: die blijft gereserveerd voor "klopt"-semantiek, dus het
   uitgelichte plan wordt opgetild met inkt en diepte, niet met kleur. */

/* ── Hero ────────────────────────────────────────────────── */
/* De max-width van 46rem zat op .hero zelf; die staat nu op de h1, zodat de sectie de volle
   containerbreedte beslaat en er rechts naast de tekst ruimte overblijft voor de bonnetjes. */
.hero[b-4su7nsphfn] {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 3rem 0 3.5rem;
}
/* Verstrooide bonnetjes als textuur, niet als plaatje: ink op 5–10% dekking, dezelfde vorm als het
   merkteken. Begint pas ná de tekstkolom (left: 47rem), dus hij kan nooit achter een letter komen —
   geen overlay of contrastlaag nodig om de h1 leesbaar te houden. Onder 1100px is er geen ruimte
   meer naast de tekst en verdwijnt hij helemaal; op de telefoon wordt er dus niets extra's geladen. */
.hero[b-4su7nsphfn]::before {
    content: "";
    position: absolute;
    inset: 1.5rem 0 2rem 47rem;
    z-index: -1;
    background: url("hero-bonnetjes.svg") no-repeat right center;
    background-size: contain;
    pointer-events: none;
}
@media (max-width: 1100px) {
    .hero[b-4su7nsphfn]::before { display: none; }
}
.hero h1[b-4su7nsphfn] {
    /* Groter dan de app-h1 (1.75rem): dit is het eerste dat een bezoeker leest. */
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 46rem;
    text-wrap: balance;
}
.hero-lead[b-4su7nsphfn] {
    font-size: 1.15rem;
    line-height: 1.55;
    margin: 0;
    max-width: 38rem;
}
.hero-actions[b-4su7nsphfn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
}
.hero-claim[b-4su7nsphfn] {
    /* De belofte die een beginner over de streep trekt, dus eigen regel — niet weggestopt in de lead. */
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0;
    max-width: 34rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--hairline);
}
.hero-note[b-4su7nsphfn] {
    font-size: 0.85rem;
    margin: 0;
    max-width: 34rem;
}

/* ── Wat je niet meer zelf doet ──────────────────────────── */
.features[b-4su7nsphfn] {
    border-top: 1px solid var(--hairline);
    padding: 2.5rem 0;
}
.features h2[b-4su7nsphfn] {
    margin: 0 0 1.5rem;
}
.feature-grid[b-4su7nsphfn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.75rem 2.5rem;
}
.feature h3[b-4su7nsphfn] {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}
.feature p[b-4su7nsphfn] {
    margin: 0;
    color: var(--fg-muted);
    max-width: 30rem;
}

/* ── Wat je bij anderen niet krijgt ──────────────────────── */
/* Tien punten, dus bewust lichter dan .features: kleinere koppen, minder witruimte, geen kaders.
   Wie scant leest de drie blokken hierboven; wie twijfelt leest hier door. Smallere kolommen dan
   .feature-grid (13rem i.p.v. 15rem), zodat het op een breed scherm vier kolommen worden en de
   sectie niet als een muur leest. Geen carousel: alles moet tegelijk zichtbaar en scanbaar zijn. */
.edges[b-4su7nsphfn] {
    border-top: 1px solid var(--hairline);
    padding: 2.5rem 0;
}
.edges h2[b-4su7nsphfn] {
    margin: 0 0 1.5rem;
}
.edge-grid[b-4su7nsphfn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem 2.5rem;
}
.edge h3[b-4su7nsphfn] {
    font-size: 0.95rem;
    margin: 0 0 0.3rem;
    /* Inline-flex zodat de "Binnenkort"-pil op de baseline meeloopt en netjes wrapt bij lange koppen. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.5rem;
}
.edge p[b-4su7nsphfn] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--fg-muted);
    max-width: 26rem;
}
/* Nog niet gebouwd. Omlijnd en gedempt, zodat het niet concurreert met de gevulde .plan-tag
   ("Meest gekozen") — dat is een aanbeveling, dit is een voorbehoud. */
.soon[b-4su7nsphfn] {
    font-family: var(--display);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

/* ── Prijzen ─────────────────────────────────────────────── */
/* Onderruimte is nodig sinds "Ook fijn" hierónder staat: zonder die 2.5rem plakt de bovenlijn van
   die sectie tegen de tekst onder de knop. */
.plans[b-4su7nsphfn] {
    border-top: 1px solid var(--hairline);
    padding: 2.5rem 0;
}
.plans-head[b-4su7nsphfn] {
    margin-bottom: 1.5rem;
}
.plans-head h2[b-4su7nsphfn] {
    margin: 0 0 0.35rem;
}
.plans-head p[b-4su7nsphfn] {
    margin: 0;
}
.plan-grid[b-4su7nsphfn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
    gap: 1.25rem;
    align-items: start;
}
.plan[b-4su7nsphfn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.4rem 1.5rem 1.6rem;
}
/* Het aanbevolen plan: inkt en diepte, geen kleur. */
.plan-pick[b-4su7nsphfn] {
    border-color: var(--ink);
    box-shadow: var(--shadow-2);
}
.plan-head[b-4su7nsphfn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.plan-head h3[b-4su7nsphfn] {
    font-size: 1.2rem;
    margin: 0;
}
.plan-for[b-4su7nsphfn] {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.85rem;
    color: var(--fg-muted);
}
.plan-tag[b-4su7nsphfn] {
    font-family: var(--display);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}
.plan-price[b-4su7nsphfn] {
    margin: 0.25rem 0 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.plan-amount[b-4su7nsphfn] {
    font-family: var(--display);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}
.plan-year[b-4su7nsphfn] {
    margin: 0;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.plan-specs[b-4su7nsphfn] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.9rem;
}
.plan-specs li[b-4su7nsphfn] {
    /* Streepje in plaats van bolletje: past bij de rest van de app, die nergens bullets gebruikt. */
    padding-left: 0.9rem;
    position: relative;
}
.plan-specs li[b-4su7nsphfn]::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--fg-muted);
}

.plans-cta[b-4su7nsphfn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 2rem 0 0;
}
.plans-cta p[b-4su7nsphfn] {
    margin: 0;
    font-size: 0.85rem;
    max-width: 34rem;
}

/* ── Voet ────────────────────────────────────────────────── */
.landing-foot[b-4su7nsphfn] {
    border-top: 1px solid var(--hairline);
    margin-top: 3rem;
    padding: 1.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.landing-foot p[b-4su7nsphfn] {
    margin: 0;
    font-size: 0.85rem;
}
/* Intro links, inloglink rechts: zo vult de voet de hele containerbreedte in plaats van één smalle
   kolom links. De 44rem blijft op de lopende tekst staan — dat is een leesmaat, geen layoutmaat. */
.foot-top[b-4su7nsphfn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem 2.5rem;
}
.foot-top p:first-child[b-4su7nsphfn] {
    max-width: 44rem;
}
.foot-login[b-4su7nsphfn] {
    white-space: nowrap;
}
/* Standaardzaken (back-up, opzegbaar, geen advertenties). Bewust klein en gedempt: ze nemen een
   bezwaar weg, ze verkopen niets. Géén streepjes-per-item zoals .plan-specs: op één rij lezen die
   als losse liggende streepjes. Het is hier één doorlopende regel met puntscheiders, dus de items
   staan inline (geen flex) — dan wrapt hij als tekst en blijft een scheider aan zijn linkerbuur
   plakken in plaats van aan het begin van de volgende regel te belanden. Links uitgelijnd, net als
   de rest van de pagina; de labels zijn kort genoeg om op breed scherm op één regel te passen. */
.foot-facts[b-4su7nsphfn] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--fg-muted);
}
.foot-facts li[b-4su7nsphfn] {
    display: inline;
}
.foot-facts li:not(:last-child)[b-4su7nsphfn]::after {
    content: "·";
    margin: 0 0.5rem 0 0.6rem;
    color: color-mix(in srgb, var(--ink) 30%, var(--paper));
}
/* /Components/Pages/Mutaties/LinesView.razor.rz.scp.css */
/* Booking-lines editor (this component's #lines-container instance of .line-grid; the shared
   .line-grid base lives in site.css — other tables reuse it with different columns).

   The columns are addressed by lg-* classes carried on the thead th (here) and on the row cells
   (MutatieLine.razor), never by position: a column swap in the markup then re-lays itself out
   correctly instead of silently putting widths and labels on the wrong cells. */

/* The container the layout responds to. inline-size containment: the restack below switches on
   the width of THIS box, not the viewport — the form column can be dragged narrow in the
   doc-split view on a wide screen, and equally be wide enough on a tablet. */
#lines-container[b-j7apr5n0ch] { container: lines / inline-size; }

/* Incl/excl btw toggle above the lines. */
.in-ex[b-j7apr5n0ch] {
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--bg);
    border-radius: var(--radius);
    gap: 1.5rem;
}
.in-ex label[b-j7apr5n0ch] { cursor: pointer; }
.in-ex input[type="radio"][b-j7apr5n0ch] { margin-right: 0.25rem; }

/* Column widths. table-layout: fixed sizes columns from the FIRST row — the thead — so widths
   sit on the thead th. Numeric columns stay compact; Tegenrekening (no width) absorbs the rest
   so the account combobox gets the room. */
th.lg-num[b-j7apr5n0ch] { width: 2.5rem; }
th.lg-amount[b-j7apr5n0ch] { width: 8rem; }
th.lg-vatcode[b-j7apr5n0ch] { width: 11rem; }
th.lg-vat[b-j7apr5n0ch] { width: 6rem; }
th.lg-remove[b-j7apr5n0ch] { width: 2.5rem; }

/* Narrow container: the five fixed columns sum to ~30rem — below ~38rem the Tegenrekening
   combobox starves, so restack each line as a small card: line number + remove button on top,
   then the fields full-width. The hidden column headers come back as ::before labels, read from
   the cells' data-label attribute (MutatieLine.razor), on the cells whose control isn't
   self-describing. The row cells are rendered by MutatieLine (::deep). */
@container lines (max-width: 38rem) {
    .line-grid[b-j7apr5n0ch],
    .line-grid tbody[b-j7apr5n0ch],
    .line-grid tfoot[b-j7apr5n0ch] { display: block; }
    .line-grid thead[b-j7apr5n0ch] { display: none; }
    .line-grid tbody[b-j7apr5n0ch]  tr.line-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "num     remove"
            "amount  vat"
            "vatcode vatcode"
            "ledger  ledger";
        gap: 0.5rem 0.75rem;
        padding: 0.6rem 0.5rem;
        border-bottom: 1px solid var(--hairline);
    }
    .line-grid tbody[b-j7apr5n0ch]  tr.line-row td {
        display: block;
        width: auto;
        padding: 0;
        border: none;
    }
    .line-grid tbody[b-j7apr5n0ch]  td.lg-num { grid-area: num; align-self: center; text-align: left; }
    .line-grid tbody[b-j7apr5n0ch]  td.lg-amount { grid-area: amount; }
    .line-grid tbody[b-j7apr5n0ch]  td.lg-vatcode { grid-area: vatcode; }
    .line-grid tbody[b-j7apr5n0ch]  td.lg-vat { grid-area: vat; }
    .line-grid tbody[b-j7apr5n0ch]  td.lg-ledger { grid-area: ledger; }
    .line-grid tbody[b-j7apr5n0ch]  td.lg-remove { grid-area: remove; justify-self: end; }
    .line-grid tbody[b-j7apr5n0ch]  td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.78rem;
        color: var(--fg-muted);
        margin-bottom: 0.25rem;
    }
    /* Totals become label/value pairs; the desktop table's filler cells disappear. */
    .line-grid tfoot tr[b-j7apr5n0ch] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.4rem 0.5rem;
    }
    .line-grid tfoot th[b-j7apr5n0ch] { padding: 0; border: none; }
    .line-grid tfoot th:empty[b-j7apr5n0ch] { display: none; }
}
/* /Components/Pages/Mutaties/MutatieDetail.razor.rz.scp.css */
/* Count badge in a collapsible-panel summary: signals the panel holds N items while it's closed. */
.count-badge[b-7klxwemd2z] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    min-width: 1.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    letter-spacing: normal;
    text-transform: none;
}

/* Notes on the mutation detail page reuse .note-list (site.css), but each item is a static block
   (not a link) with a meta line of chips and an inline resolve form. */
.note-list .note-item[b-7klxwemd2z] { padding: 0.5rem 0; border-bottom: 1px solid var(--hairline); }
.note-list .note-item:last-child[b-7klxwemd2z] { border-bottom: none; }
.note-item .note-meta[b-7klxwemd2z] { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.15rem; }
.note-item form[b-7klxwemd2z] { margin-top: 0.4rem; }
.note-add[b-7klxwemd2z] { margin-top: 0.75rem; max-width: 40rem; }

/* /Components/Pages/Mutaties/MutatieFields.razor.rz.scp.css */
/* Invoice header fields (Datum / Factuurnummer / Relatie). Narrow: two columns with the relatie
   on its own full-width row below (current layout). Wide: a single row with the relatie placed
   between datum and factuurnummer via explicit grid columns (independent of DOM order). */
.invoice-fields[b-k771bw41wj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
/* ::deep — the relatie controls are rendered by RelationPicker (and Tom Select rebuilds them). */
.invoice-fields[b-k771bw41wj]  input, .invoice-fields[b-k771bw41wj]  select { min-width: 0; width: 100%; }
.invoice-fields .field-relatie[b-k771bw41wj] { grid-column: 1 / -1; }

@media (min-width: 720px) {
    /* Relatie (middle) gets twice the room of Datum/Factuurnummer: it carries name + IBAN
       and must stay usable in the narrow doc-split form column. */
    .invoice-fields.has-relation[b-k771bw41wj] { grid-template-columns: 1fr 2fr 1fr; }
    /* Pin all three to row 1 with explicit columns. Without grid-row, sparse auto-placement keeps
       Relatie (DOM-ordered after Factuurnummer) from backfilling row 1 col 2 and drops it to row 2. */
    .invoice-fields.has-relation .field-datum[b-k771bw41wj] { grid-column: 1; grid-row: 1; }
    .invoice-fields.has-relation .field-relatie[b-k771bw41wj] { grid-column: 2; grid-row: 1; }
    .invoice-fields.has-relation .field-factuur[b-k771bw41wj] { grid-column: 3; grid-row: 1; }
}
/* /Components/Pages/Mutaties/MutatieFormPage.razor.rz.scp.css */
/* Callout for LLM-prefilled booking forms: noticeable enough that the bookkeeper reads it,
   calm enough not to suggest an error. */
.prefill-hint[b-zr8a67r62f] {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt));
    font-size: 0.9rem;
}
/* /Components/Pages/Mutaties/MutatieHistorie.razor.rz.scp.css */
/* Event-history payload: expandable full event JSON in the audit list. */
.event-detail > summary[b-61q6gyc3sb] { cursor: pointer; color: var(--fg-muted); }
.event-json[b-61q6gyc3sb] {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 48rem;
    max-height: 24rem;
    overflow: auto;
}
/* /Components/Pages/Mutaties/MutatiesPage.razor.rz.scp.css */
/* Mutaties overview: fixed layout so the 8 columns fill the content width exactly instead of
   auto-sizing wide (Relatie/Factuur were ballooning and pushing Rekeningen + Bedrag off-screen).
   The free-text columns (Factuur, Relatie, Omschrijving) carry .ellipsis so they truncate to
   their column with the full value on hover; Omschrijving has no fixed width and soaks up the
   remaining space. These are the defaults the user-resizable columns (site.js, data-colw) start
   from and reset to on double-click. */
table.mutaties-overview[b-8k2nd7l6rd] { table-layout: fixed; }
table.mutaties-overview th:nth-child(1)[b-8k2nd7l6rd] { width: 5.25rem; }    /* Nr (+ speech bubble) */
table.mutaties-overview th:nth-child(2)[b-8k2nd7l6rd] { width: 6.75rem; }   /* Datum */
table.mutaties-overview th:nth-child(3)[b-8k2nd7l6rd] { width: 10rem; }     /* Type */
table.mutaties-overview th:nth-child(4)[b-8k2nd7l6rd] { width: 8rem; }      /* Factuur */
table.mutaties-overview th:nth-child(5)[b-8k2nd7l6rd] { width: 10.5rem; }   /* Relatie */
table.mutaties-overview th:nth-child(7)[b-8k2nd7l6rd] { width: 7.5rem; }    /* Rekeningen */
table.mutaties-overview th:nth-child(8)[b-8k2nd7l6rd] { width: 6.5rem; }    /* Bedrag */
/* /Components/Pages/Mutaties/MutationForm.razor.rz.scp.css */
/* Template picker (Nieuwe mutatie): grouped pill-shaped radio buttons. */
.template-picker[b-4rrgiq4f1c] {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 0.75rem 1rem 1rem;
    background: var(--bg-alt);
}
.template-picker legend[b-4rrgiq4f1c] {
    padding: 0 0.4rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
    letter-spacing: 0.04em;
}
.template-groups[b-4rrgiq4f1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.template-group[b-4rrgiq4f1c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 10rem;
}
.template-group h3[b-4rrgiq4f1c] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fg-muted);
    letter-spacing: 0.01em;
}
.template-btn[b-4rrgiq4f1c] {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--bg);
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
/* Hide the actual radio; keep it accessible and tabbable. */
.template-btn input[type="radio"][b-4rrgiq4f1c] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.template-btn:hover[b-4rrgiq4f1c] {
    background: var(--bg-alt);
    border-color: var(--fg-muted);
}
.template-btn:has(input:checked)[b-4rrgiq4f1c] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 500;
}
.template-btn:has(input:focus-visible)[b-4rrgiq4f1c] {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--ring);
}
/* /Components/Pages/Mutaties/RelationPicker.razor.rz.scp.css */
/* Tom Select wrapper doesn't inherit the select's inline flex:1 — restate it so the relatie
   combobox fills the row next to the compact +/× toggle button. ::deep: the .ts-wrapper is
   created by Tom Select at runtime, so it carries no scope attribute. */
.row[b-yihwnsx43s]  .ts-wrapper.relation-select { flex: 1; min-width: 0; }
/* /Components/Pages/Mutaties/StockLinesView.razor.rz.scp.css */
/* Stock cross-reference grid reuses .line-grid cell styling (site.css) but has its own columns:
   the first column is the product (not a narrow line number), so undo .line-grid's fixed 2.5rem
   first-col. */
.stock-grid[b-w27bjinv43] { table-layout: auto; }
.stock-grid tbody td:first-child[b-w27bjinv43] { width: 40%; }
.stock-grid select[b-w27bjinv43] { width: 100%; }
.stock-grid .qty[b-w27bjinv43] { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.stock-grid .qty input[b-w27bjinv43] { width: 6rem; }
.stock-grid .qty .unit[b-w27bjinv43] { color: var(--fg-muted); font-size: 0.9rem; }
/* /Components/Pages/Rapportages/BalansPage.razor.rz.scp.css */
/* Balans: Activa and Passiva side-by-side like the classic T-form (activa left, passiva right);
   stacked again on narrow screens. */
.balans-grid[b-jqee6rusch] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    align-items: start;
}
@media (max-width: 900px) {
    .balans-grid[b-jqee6rusch] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Rapportages/GrootboekDetail.razor.rz.scp.css */
/* Saldo summary as a leading table row — aligned to the detail columns, above the fold.
   Override row-link's zeroed tbody padding (higher specificity) and the last-child border reset. */
table.row-link tbody.ledger-summary td[b-h7xuw1babr] {
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    background: var(--bg);
    border-bottom: 2px solid var(--hairline);
}
tbody.ledger-summary strong[b-h7xuw1babr] { font-variant-numeric: tabular-nums; }
/* /Components/Pages/Rapportages/GrootboekrekeningenPage.razor.rz.scp.css */
/* The Omschrijving cell is capped with max-width so a long name truncates to one line instead of
   ballooning the table; the full name stays in the title attribute. Auto table-layout (not fixed)
   so the cap is an upper bound — the column still shrinks on small screens rather than starving
   to zero width. */
td.naam[b-m6umed7xek], td.naam > a[b-m6umed7xek] { max-width: 24rem; }
td.naam .naam-primary[b-m6umed7xek],
td.naam .naam-sub[b-m6umed7xek] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.naam .naam-sub[b-m6umed7xek] { font-size: 0.8rem; color: var(--fg-muted); }

/* Group placement is width-dependent: wide screens get a dedicated Groep column and the naam
   subline is hidden; below 900px the Groep column folds away and the group reappears as the muted
   subline under the name, keeping the table narrow enough to read. */
td.naam .naam-sub[b-m6umed7xek] { display: none; }
@media (max-width: 900px) {
    .groep-col[b-m6umed7xek] { display: none; }
    td.naam .naam-sub[b-m6umed7xek] { display: block; }
}
/* /Components/Pages/Rapportages/OpmerkingenPage.razor.rz.scp.css */
/* Opmerkingen report: the note text is the point of the page, so its column takes the remaining
   width and wraps (keeping the note's own line breaks); the context columns are fixed and truncate. */
table[b-959sr9ddyx] { table-layout: fixed; width: 100%; }
th:nth-child(1)[b-959sr9ddyx] { width: 10rem; }    /* Geplaatst (date + time) */
th:nth-child(2)[b-959sr9ddyx] { width: 8rem; }     /* Door */
th:nth-child(3)[b-959sr9ddyx] { width: 3.5rem; }   /* Nr */
th:nth-child(4)[b-959sr9ddyx] { width: 10rem; }    /* Relatie */
th:nth-child(5)[b-959sr9ddyx] { width: 12rem; }    /* Mutatie */
th:nth-child(7)[b-959sr9ddyx] { width: 9rem; }     /* Opvolging */
td.note-cell > a[b-959sr9ddyx] { white-space: pre-line; }
/* /Components/Pages/Search/SearchPage.razor.rz.scp.css */
/* Result groups — this component renders both the dropdown fragment (HTMX, into MainLayout's
   .search-dropdown) and the full /zoeken page, so the scoped styles travel with the markup. */
.search-results[b-vkjgzmd9dt] { display: flex; flex-direction: column; gap: 1rem; }
main .search-results[b-vkjgzmd9dt] { max-width: 48rem; }
.search-group-head[b-vkjgzmd9dt] { margin-bottom: 0.25rem; }
.search-hits[b-vkjgzmd9dt] { list-style: none; margin: 0; padding: 0; }
.search-hits li[b-vkjgzmd9dt] { border-top: 1px solid var(--hairline); }
.search-hits li:first-child[b-vkjgzmd9dt] { border-top: none; }
.search-hits a[b-vkjgzmd9dt] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius);
    color: var(--fg);
}
.search-hits a:hover[b-vkjgzmd9dt] { background: var(--bg); text-decoration: none; }
/* Keyboard target: Tab (native DOM order) walks the hits; :focus-visible gives the active
   one a strong accent fill — clearly beyond the subtle mouse :hover — so it reads as "Enter
   opens this". Fill is the focus indicator (an accent outline would vanish on the fill). */
.search-hits a:focus-visible[b-vkjgzmd9dt] {
    background: var(--accent);
    color: #fff;
    outline: none;
    text-decoration: none;
}
.search-hits a:focus-visible .search-hit-sub[b-vkjgzmd9dt] { color: rgba(255, 255, 255, 0.85); }
.search-hit-title[b-vkjgzmd9dt] { font-size: 0.92rem; }
.search-hit-sub[b-vkjgzmd9dt] { font-size: 0.8rem; color: var(--fg-muted); }

/* Active state for the recency scope toggle on the full page. */
.btn.secondary.active[b-vkjgzmd9dt] {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--fg);
}

/* Search tips — a footer inside the combobox dropdown, below any results. */
.search-tips[b-vkjgzmd9dt] {
    font-size: 0.78rem;
    color: var(--fg-muted);
}
/* Separator only when tips follow a result list. */
.search-results + .search-tips[b-vkjgzmd9dt] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--hairline);
}
.search-tips ul[b-vkjgzmd9dt] { margin: 0; padding-left: 1.1rem; }
.search-tips li[b-vkjgzmd9dt] { margin: 0.1rem 0; }
.search-tips code[b-vkjgzmd9dt] {
    font-family: var(--mono);
    background: var(--bg);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    color: var(--fg);
}
/* /Components/PeriodFilterBar.razor.rz.scp.css */
/* Toggle switch rendered as an <a role="switch"> (cumulatief-filter). */
.switch[b-61n9x5e4i8] {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.45rem 0.85rem; border: 1px solid var(--hairline); border-radius: 10px;
    color: var(--fg); font-size: 0.9rem; text-decoration: none; background: var(--bg-alt);
}
.switch .knob[b-61n9x5e4i8] {
    width: 30px; height: 17px; border-radius: 999px; position: relative; flex: none;
    background: color-mix(in srgb, var(--ink) 22%, var(--paper));
}
.switch .knob[b-61n9x5e4i8]::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
    border-radius: 50%; background: var(--bg-alt); box-shadow: var(--shadow-1); transition: left .12s ease;
}
.switch.on[b-61n9x5e4i8] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); font-weight: 500; }
.switch.on .knob[b-61n9x5e4i8] { background: var(--accent); }
.switch.on .knob[b-61n9x5e4i8]::after { left: 15px; }
a.switch:hover[b-61n9x5e4i8] { border-color: var(--accent); }
a.switch:focus-visible[b-61n9x5e4i8] { outline: none; box-shadow: var(--ring); }