/* ------------------------------------------------------------------
   SPLSGROUP. interne omgeving
   Inter (SIL Open Font License 1.1), lokaal gehost in assets/fonts/.
   ------------------------------------------------------------------ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
    --bg: #ffffff;
    --surface: #fafafa;
    --surface-2: #f4f4f5;
    --fg: #09090b;
    --fg-soft: #52525b;
    --muted: #8b8b95;
    --line: #e7e7ea;
    --line-strong: #d4d4d8;
    /* Huisstijl. Alles wat eerder zwart was, is nu deze teal. */
    --accent: #006877;
    --accent-fg: #ffffff;
    --accent-soft: #e6f0f2;
    --danger: #c62f26;
    --danger-bg: #fdf0ef;
    --ok: #12734a;
    --ok-bg: #eaf6ef;
    --shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 8px 24px -12px rgba(9, 9, 11, 0.14);
    --radius: 12px;
    --radius-sm: 9px;
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Altijd licht, ook als het systeem op donkere modus staat. */
html {
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    font-optical-sizing: auto;
    font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss01' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }

a { color: inherit; }

:where(a, button, input, select, summary):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
    letter-spacing: -0.01em;
}

/* ---------- Logo ---------- */

.brand { display: inline-flex; text-decoration: none; }

.logo { display: block; width: auto; }

.logo--bar  { height: 1.5rem; }
.logo--hero { height: clamp(3rem, 9vw, 5.5rem); }
.logo--lock { height: clamp(2.25rem, 7.5vw, 3.25rem); }

/* ---------- Topbalk ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
}

.topbar nav .who {
    padding: 0 0.6rem 0 0;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.navlink {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--fg-soft);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.navlink:hover { background: var(--surface-2); color: var(--fg); }
.navlink[aria-current='page'] { background: var(--accent-soft); color: var(--accent); }

/* ---------- Layout ---------- */

.center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
}

/* Overzichten met veel kolommen mogen het hele scherm gebruiken. */
.page--full { max-width: none; padding-left: 2rem; padding-right: 2rem; }
/* Ruimer dan de andere pagina's: de gebruikerstabel heeft vijf kolommen, en
   sinds de taalkolom erbij kwam paste dat niet meer op 72rem. */
.page--admin { max-width: 92rem; }

/* ---------- Beheer: menu links, inhoud rechts ---------- */

.adminlayout {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 2.5rem;
    align-items: start;
}

.sidenav {
    display: grid;
    gap: 0.15rem;
    position: sticky;
    top: 5rem;
}

.sidenav a {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--fg-soft);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidenav a:hover { background: var(--surface-2); color: var(--fg); }

.sidenav a[aria-current='page'] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 550;
}

.adminbody { min-width: 0; }

.section-head { margin-bottom: 1.5rem; }
.section-head h2 { font-size: 1.25rem; }
.section-head p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.875rem; }

/* Formuliertje in een tabelcel: veld en knop naast elkaar. */
.pickform { display: flex; align-items: center; gap: 0.4rem; }
.pickform input { min-width: 9rem; }

.crumb { margin: 0 0 0.4rem; font-size: 0.8125rem; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--fg); text-decoration: underline; }

.page-head { margin-bottom: 2rem; }
.center .page-head { margin-bottom: 0; }
.page-head h1 { font-size: 1.5rem; }
.page-head p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.875rem; }

/* ---------- Inlogkaart ---------- */

.login { width: 100%; max-width: 20.5rem; text-align: left; }
.login .logo { margin: 0 auto 2.25rem; }

.login form { display: grid; gap: 0.85rem; }

.field { display: grid; gap: 0.35rem; }

.field > label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg-soft);
}

input, select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder { color: var(--muted); }

input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

select {
    appearance: none;
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.625rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-fg);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 550;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.05s ease;
}

.btn:hover { opacity: 0.88; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--block { width: 100%; margin-top: 0.35rem; }

.btn--ghost {
    padding: 0.3rem 0.6rem;
    border-color: transparent;
    background: transparent;
    color: var(--fg-soft);
    font-size: 0.8125rem;
    border-radius: 7px;
}

.btn--ghost:hover { background: var(--surface-2); color: var(--fg); opacity: 1; }
.btn--danger { color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); color: var(--danger); }

.caption {
    margin: 2.25rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
}

/* ---------- Meldingen ---------- */

.alert {
    margin: 0 0 1.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.alert--ok {
    background: var(--ok-bg);
    border-color: color-mix(in srgb, var(--ok) 25%, transparent);
    color: var(--ok);
}

.alert--error {
    background: var(--danger-bg);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--danger);
}

.alert .secret {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.65rem 0 0;
    padding: 0.55rem 0.7rem;
    border: 1px dashed currentColor;
    border-radius: 7px;
    background: var(--bg);
    color: var(--fg);
    font-size: 0.9375rem;
}

.alert .secret small { color: var(--muted); font-size: 0.75rem; }

/* ---------- Kaarten en tabellen ---------- */

.card {
    margin-bottom: 1.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--line);
}

.card > header h2 { font-size: 0.9375rem; }
.card > header span { color: var(--muted); font-size: 0.8125rem; }

table { width: 100%; border-collapse: collapse; }

th, td {
    padding: 0.7rem 1.15rem;
    text-align: left;
    vertical-align: middle;
}

th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
}

tbody tr + tr td { border-top: 1px solid var(--line); }
tbody tr:hover td { background: var(--surface); }

td.key { font-weight: 550; letter-spacing: -0.01em; }
td.actions { text-align: right; white-space: nowrap; padding-top: 0.45rem; padding-bottom: 0.45rem; }
td.empty { color: var(--muted); }

.inline { display: inline; }

/* ---------- Rechten aanvinken in het beheerscherm ---------- */

.rights { display: grid; gap: 0.35rem; justify-items: start; }
.rights .btn { margin-top: 0.35rem; }

.check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.check input {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    accent-color: var(--accent);
}

/* Getalkolommen rechts uitlijnen, dan lopen de bedragen onder elkaar. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Een rij die ergens heen leidt: hele regel klikbaar, het nummer als echte link. */
tbody tr.rowlink { cursor: pointer; }
tbody tr.rowlink a { color: var(--accent); text-decoration: none; }
tbody tr.rowlink:hover a { text-decoration: underline; }

tfoot td {
    border-top: 1px solid var(--line-strong);
    background: var(--surface);
    font-weight: 550;
    font-size: 0.8125rem;
}

/* ---------- Menubalkje binnen een module ---------- */

.modnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: -0.9rem 0 1.75rem;
}

.modnav a {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--fg-soft);
    font-size: 0.8125rem;
    font-weight: 550;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.modnav a:hover { background: var(--surface-2); color: var(--fg); }

.modnav a[aria-current='page'] {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}

/* ---------- Kerncijfers bovenaan een module ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.stat {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}

.stat b {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat span { color: var(--muted); font-size: 0.8125rem; }

/* ---------- Inklapbare blokken voor wat je zelden nodig hebt ---------- */

details.fold {
    margin-bottom: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}

details.fold > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.15rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

details.fold > summary::-webkit-details-marker { display: none; }

details.fold > summary::after {
    content: '\203A';
    margin-left: auto;
    color: var(--muted);
    font-size: 1.1rem;
    transition: transform 0.15s ease;
}

details.fold[open] > summary { border-bottom: 1px solid var(--line); }
details.fold[open] > summary::after { transform: rotate(90deg); }

details.fold > .fold-body { padding: 1rem 1.15rem; font-size: 0.875rem; }
details.fold > .table-scroll { padding: 0; }

/* Klein inklapblok onderaan een kaart, voor de uitzonderingsknop. */
.card > details.sub > summary {
    list-style: none;
    padding: 0.8rem 1.15rem;
    border-top: 1px solid var(--line);
    cursor: pointer;
    color: var(--fg-soft);
    font-size: 0.8125rem;
    font-weight: 550;
}

.card > details.sub > summary::-webkit-details-marker { display: none; }
.card > details.sub > summary:hover { color: var(--fg); }
.card > details.sub > .compose,
.card > details.sub > form > .compose { border-top: 0; padding-top: 0.35rem; }

/* Details van een melding, ingeklapt zodat de balk zelf rustig blijft. */
.alert details { margin-top: 0.45rem; font-size: 0.8125rem; }
.alert details summary { cursor: pointer; font-weight: 550; }
.alert details ul.lines { margin-top: 0.4rem; }

.note { color: var(--muted); font-weight: 400; font-size: 0.8125rem; }
.note.block { display: block; margin-top: 0.1rem; }

/* Brede tabel schuift binnen de kaart, de pagina zelf blijft staan. */
.table-scroll { overflow-x: auto; }

/* Elke regel blijft één regel; past het niet, dan schuift de tabel. */
.table-scroll th,
.table-scroll td { white-space: nowrap; }

.lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.lines li { font-size: 0.875rem; line-height: 1.4; }

.pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fg-soft);
}

.pill--accent {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-fg);
}

/* Fase in de keten: groen als het klaar is, rood als het strandde. */
.pill--ok {
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
    background: var(--ok-bg);
    color: var(--ok);
}

.pill--stop {
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    background: var(--danger-bg);
    color: var(--danger);
}

.pill--muted { border-style: dashed; color: var(--muted); }

/* ---------- Toevoegformulier onderaan een kaart ---------- */

.card > .compose,
.card > form > .compose,
.card > details.sub > form > .compose {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: end;
    padding: 1.05rem 1.15rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.compose .field { flex: 1 1 11rem; }
.compose .field--narrow { flex: 0 1 9.5rem; }
.compose .btn { flex: 0 0 auto; }

/* Gewoon binnenwerk van een kaart: tekst, feiten, een lijstje. */
.cardbody {
    padding: 1.15rem 1.25rem;
    display: grid;
    gap: 0.9rem;
}
.cardbody > *:first-child { margin-top: 0; }
.cardbody > *:last-child { margin-bottom: 0; }
.cardbody .facts { font-size: 0.9375rem; gap: 0.55rem 1.5rem; }

.card > .hint {
    margin: 0;
    padding: 0.7rem 1.15rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8125rem;
}

/* ---------- Toolblokken op het dashboard ---------- */

.tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
}

.tool {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tool:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05), 0 14px 30px -14px rgba(9, 9, 11, 0.22);
}

.tool:active { transform: translateY(0); }

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.35rem;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.tool-icon svg { width: 1.125rem; height: 1.125rem; }

/* Een merklogo als icoon: liggend, dus het blokje wordt wat breder. */
.tool-icon:has(img) { width: auto; padding: 0 0.55rem; background: var(--accent-soft); }
.tool-icon img { display: block; height: 1.05rem; width: auto; }

/* Icoon links, afdelingslabel rechts. */
.tool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.tool-head .tool-icon { margin-bottom: 0; }
.tool-head .pill { font-size: 0.6875rem; }

.tool h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.tool h2 .arrow {
    color: var(--muted);
    transition: transform 0.15s ease, color 0.15s ease;
}

.tool:hover h2 .arrow { color: var(--accent); transform: translateX(2px); }

.tool p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ---------- Lege tool, nog in te richten ---------- */

.placeholder {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
}

/* ---------- Schermvullende stappenflow ---------- */

.flow {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.flow-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 3px;
    background: var(--surface-2);
}

.flow-bar span {
    display: block;
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
}

.flow-count {
    flex: 1 1 auto;
    color: var(--muted);
    font-size: 0.8125rem;
}

.flow-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--muted);
    font-size: 1.375rem;
    line-height: 1;
    text-decoration: none;
}

.flow-close:hover { background: var(--surface-2); color: var(--fg); }

.flow-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.flow-inner { width: 100%; max-width: 32rem; }

.flow-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.9rem;
    margin: 0 0 1.15rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.flow-context b { color: var(--fg-soft); font-weight: 550; }

.flow-q {
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    line-height: 1.25;
    text-wrap: balance;
}

.flow-q--long { font-size: clamp(1.1rem, 3.2vw, 1.4rem); line-height: 1.35; }

.flow-sub { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.9375rem; }

.flow-body { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.flow-body p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.flow-body .rowbtns { margin-top: 0.5rem; }

.flow-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.15rem;
    border-radius: 999px;
}

.flow-mark svg { width: 1.375rem; height: 1.375rem; }
.flow-mark--ok { background: var(--ok-bg); color: var(--ok); }
.flow-mark--stop { background: var(--danger-bg); color: var(--danger); }

.flow-ref {
    margin: 0.5rem 0 0;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.flow-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.5rem 2.25rem;
}

.flow-spacer { flex: 1 1 auto; }

/* ---------- Keuzeknoppen in de flow ---------- */

.pick {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
    color: var(--fg);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pick:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05), 0 14px 30px -14px rgba(9, 9, 11, 0.22);
}

.pick:active { transform: translateY(0); }

.pick-text { flex: 1 1 auto; }

.pick small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.pick-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--fg-soft);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pick-arrow svg { width: 1rem; height: 1rem; }

.pick:hover .pick-arrow {
    background: var(--accent);
    color: var(--accent-fg);
    transform: translateX(2px);
}

/* Nog niet beschikbaar: wel zichtbaar, maar duidelijk niet de weg vooruit. */
.pick--soon { border-style: dashed; box-shadow: none; color: var(--muted); }
.pick--soon:hover { border-color: var(--line-strong); transform: none; box-shadow: none; }
.pick--soon:hover .pick-arrow { background: var(--surface-2); color: var(--muted); transform: none; }

/* Het antwoord dat de flow stopzet. */
.pick--no:hover { border-color: var(--danger); }
.pick--no:hover .pick-arrow { background: var(--danger); }

/* ---------- Navigatieknoppen onderaan ---------- */

.navbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
}

.navbtn:hover { background: var(--surface-2); color: var(--fg); }
.navbtn svg { width: 1rem; height: 1rem; }
.navbtn--off { opacity: 0.35; cursor: default; }
.navbtn--off:hover { background: none; color: var(--muted); }

/* ---------- Dagkiezer ---------- */

.daybar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.dayform { display: flex; align-items: center; gap: 0.5rem; }
.dayform select { min-width: 16rem; }

/* ---------- Blok om over te nemen ---------- */

.copyblock { display: grid; gap: 0.4rem; padding: 1.15rem; }
.copyblock label { color: var(--muted); font-size: 0.8125rem; }
.copyblock label + textarea { margin-bottom: 0.6rem; }

textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    resize: vertical;
}

textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--go { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn--go svg { width: 1rem; height: 1rem; }

/* Groter invoerveld, want dit is het enige veld op het scherm. */
.field--big > label { font-size: 0.8125rem; }
.field--big input { padding: 0.8rem 0.9rem; font-size: 1.0625rem; }

/* ---------- Gegevens in twee kolommen ---------- */

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.rowbtns { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (max-width: 46rem) {
    th, td { padding-left: 0.9rem; padding-right: 0.9rem; }
    .card > .compose,
    .card > form > .compose,
    .card > details.sub > form > .compose { flex-direction: column; align-items: stretch; }
    .compose .field--narrow { flex: 1 1 auto; }
    .topbar { padding: 0.8rem 1rem; }
    .tools { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .facts dd + dt { margin-top: 0.5rem; }

    .flow-top { padding: 0.9rem 1.15rem; }
    .flow-main { padding: 1.15rem; align-items: flex-start; padding-top: 2rem; }
    .flow-foot { padding: 1rem 1.15rem 1.75rem; }
    .flow-foot .btn--go { flex: 0 0 auto; }

    .page--full { padding-left: 1rem; padding-right: 1rem; }

    .adminlayout { grid-template-columns: 1fr; gap: 1.25rem; }
    .sidenav {
        position: static;
        grid-auto-flow: column;
        justify-content: start;
        gap: 0.25rem;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }
    .sidenav a { white-space: nowrap; }
}

/* ==================================================================
   Schil: menu links, werkgebied rechts
   ================================================================== */

:root {
    --app-bg: #f4f7f7;
    --panel: #ffffff;
}

body { background: var(--app-bg); }

.shell { flex: 1; display: grid; grid-template-columns: 15rem 1fr; align-items: start; }

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.15rem 0.85rem;
    border-right: 1px solid var(--line);
    background: var(--panel);
}

.sidebar-brand { display: block; padding: 0.4rem 0.65rem 0; }

/* Het beheermenu plakt bewust vast; het hoofdmenu zit al in een vaste zijbalk. */
.sidenav--main { position: static; top: auto; gap: 0.2rem; }

.sidenav--main a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: var(--fg-soft);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.sidenav--main a:hover { background: var(--surface-2); color: var(--fg); }

.sidenav--main a[aria-current='page'] {
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 600;
}

.navicon { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.navicon svg { width: 1.15rem; height: 1.15rem; }
.navicon img { width: 1.25rem; height: auto; object-fit: contain; }
.sidenav--main a[aria-current='page'] .navicon img { filter: brightness(0) invert(1); }

.shell-main { min-width: 0; display: flex; flex-direction: column; }

/* ---------- Balk bovenin ---------- */

.shell-main > .topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 2rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    backdrop-filter: none;
}

.search { position: relative; flex: 0 1 26rem; }

.search input {
    padding-left: 2.4rem;
    background: var(--app-bg);
    border-color: transparent;
}

.search input:focus { background: var(--panel); }

.search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--muted);
    pointer-events: none;
}

.search-icon svg { width: 1rem; height: 1rem; }

.whoami { display: flex; align-items: center; gap: 0.7rem; }

.avatar {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 600;
    font-size: 0.875rem;
}

.whoami-text { display: flex; flex-direction: column; line-height: 1.25; }
.whoami-text b { font-size: 0.875rem; font-weight: 600; }
.whoami-text small { color: var(--muted); font-size: 0.75rem; }

/* ---------- Cijferkaarten ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
}

.stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.stat-icon svg { width: 1.15rem; height: 1.15rem; }
.stat-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.stat-label { color: var(--muted); font-size: 0.8125rem; }
.stat-number { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.stat-note, .stat-hint { font-size: 0.75rem; color: var(--muted); }

.delta { font-size: 0.75rem; font-weight: 550; }
.delta--op { color: var(--ok); }
.delta--af { color: var(--danger); }
.delta--vlak { color: var(--muted); font-weight: 400; }

.spark { position: absolute; right: 0; bottom: 0; width: 6.5rem; height: 2.4rem; opacity: 0.9; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-fill { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: none; }

/* ---------- Raster met zijkolom ---------- */

.dashgrid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.75rem; align-items: start; }
.dashmain { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.dashside { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 5.5rem; }
.dashside .card { margin-bottom: 0; }

.block { display: flex; flex-direction: column; gap: 0.9rem; }
.block-head { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Processtappen ---------- */

.pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.phase {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}

a.phase:hover { border-color: var(--line-strong); background: var(--surface); }

.phase-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--muted);
}

.phase-icon svg { width: 0.95rem; height: 0.95rem; }
.phase--vol .phase-icon { border-color: transparent; background: var(--accent-soft); color: var(--accent); }

.phase-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.phase-text b { font-size: 0.8125rem; font-weight: 600; }
.phase-text small { color: var(--muted); font-size: 0.6875rem; }

.phase-count {
    margin-left: auto;
    min-width: 1.65rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--fg-soft);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.phase--vol .phase-count { background: var(--accent); color: var(--accent-fg); }

/* ---------- Werklijst in de zijkolom ---------- */

.worklist { margin: 0; padding: 0; list-style: none; }
.worklist li + li { border-top: 1px solid var(--line-soft, var(--line)); }

.worklist a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.875rem;
    text-decoration: none;
}

.worklist a:hover { background: var(--surface); }
.worklist-leeg { padding: 1.15rem; color: var(--muted); font-size: 0.875rem; }

/* ---------- Staafjes per dag ---------- */

.daybars { display: flex; align-items: flex-end; gap: 3px; height: 4.5rem; padding: 1.15rem 1.15rem 0; }
.daybar { flex: 1; display: flex; align-items: flex-end; height: 100%; }

.daybar > span {
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.daybar:last-child > span { background: var(--accent); }

/* ---------- Kaarten op de nieuwe ondergrond ---------- */

.card, .tool { background: var(--panel); }
.page--wide { max-width: 82rem; }

@media (max-width: 68rem) {
    .dashgrid { grid-template-columns: 1fr; }
    .dashside { position: static; }
}

@media (max-width: 52rem) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .sidenav--main { grid-auto-flow: column; gap: 0.25rem; }
    .sidenav--main a { white-space: nowrap; }
    .shell-main > .topbar { padding: 0.75rem 1.15rem; }
    .whoami-text { display: none; }
}

/* ---------- Artikelen aanvinken in de retourflow ---------- */

.picklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }

.picklist label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.picklist label:hover { border-color: var(--accent); }
.picklist input { width: 1.1rem; height: 1.1rem; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.picklist label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.picklist-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.picklist-text b { font-size: 0.9375rem; font-weight: 600; }
.picklist-text small { color: var(--muted); font-size: 0.8125rem; }
.picklist-amount { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Al eerder retour gemeld: zichtbaar, maar niet meer te kiezen. */
.picklist--uit label { border-style: dashed; background: var(--surface); cursor: not-allowed; opacity: 0.65; }
.picklist--uit label:hover { border-color: var(--line-strong); }

/* ---------- Terugbetaalscherm ---------- */

.payout { max-width: 46rem; }

.payout-body {
    display: grid;
    gap: 1px;
    padding: 0;
    background: var(--line);
}

.payout-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem 1.25rem;
    background: var(--panel);
}

.payout-label { color: var(--muted); font-size: 0.875rem; }
.payout-order { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; }
.payout-amount { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.payout-method { font-size: 1.0625rem; font-weight: 600; }
.payout-extra { padding: 1.15rem 1.25rem; border-top: 1px solid var(--line); }

/* Neutrale toelichting, geen fout en geen bevestiging. */
.alert--info {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
}

/* ---------- Genummerde werkinstructie in een bakje ---------- */

.steplist { margin: 0.75rem 0 0; padding-left: 1.35rem; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.steplist li { padding-left: 0.15rem; }
.steplist b { font-weight: 600; }

/* Teller en afdeling naast elkaar rechtsboven op een tegel. */
.tool-tags { display: flex; align-items: center; gap: 0.35rem; }
.tool-tags .pill { font-size: 0.6875rem; }
.tool-tags .pill--accent { font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: center; }

/* Link naar de betaling bij de betaaldienst. */
.paylink { gap: 0.5rem; font-size: 0.875rem; }
.paylink svg { width: 0.9rem; height: 0.9rem; }
.paylink .mono { color: var(--muted); font-size: 0.75rem; }
.paylink:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- Veel keuzes naast elkaar ---------- */

.flow-inner--breed { max-width: 44rem; }

.picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0.55rem;
}

.pick--klein {
    padding: 0.7rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 550;
    box-shadow: none;
}

.pick--klein:hover { transform: none; box-shadow: var(--shadow); }

/* Gegroepeerde keuzes, met een kopje per groep. */
.pickgroup { display: grid; gap: 0.5rem; }

.pickgroup-head {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Uitklapbare werkinstructie in een flow-stap. Standaard dicht, zodat het
   invulveld bovenaan blijft staan voor wie de stappen al kent. */
.uitleg {
    margin-top: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.uitleg > summary {
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent);
    list-style: none;
}
.uitleg > summary::-webkit-details-marker { display: none; }
.uitleg > summary::before {
    content: "›";
    display: inline-block;
    width: 1rem;
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.uitleg[open] > summary::before { transform: rotate(90deg); }
.uitleg[open] > summary { border-bottom: 1px solid var(--line); }
.uitleg > *:not(summary) { margin-left: 0.9rem; margin-right: 0.9rem; }
.uitleg > *:last-child { margin-bottom: 0.9rem; }
.uitleg .block-head { margin-top: 1rem; }

/* Rechterkant van een uitbetaalregel: het bedrag met eventueel een toelichting
   eronder, bijvoorbeeld wat er in euro's binnenkwam bij een order in kronen. */
.payout-waarde { text-align: right; }
.payout-waarde .note.block { margin-top: 0.15rem; }

/* Kleine knop binnen een tabelrij, zodat hij de regelhoogte niet oprekt. */
.btn--sm {
    padding: 0.28rem 0.7rem;
    font-size: 0.8125rem;
    margin-top: 0.35rem;
}

/* ---------- Gebruikerstabel in het beheer ---------- */

/* Een keuzelijst in een tabelcel krimpt mee met de kolom, en dan blijft er van
   "Klantenservice" niet meer over dan "Klar". Laat hem zich naar zijn inhoud
   voegen; de tabel schuift desnoods, dat is beter dan afgeknipte tekst. */
.pickform select {
    width: auto;
    min-width: 7rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* De drie knoppen achteraan naast elkaar, en compact: samen maakten ze de
   tabel breder dan het scherm. */
td.actions {
    text-align: right;
    padding-left: 0.5rem;
    white-space: nowrap;
}
td.actions form { display: inline-block; margin-left: 0.35rem; }
td.actions form:first-child { margin-left: 0; }
td.actions .btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.8125rem;
}

/* Wat lucht eruit, zodat er meer kolommen naast elkaar passen. */
.table-scroll th,
.table-scroll td { padding-left: 0.8rem; padding-right: 0.8rem; }

/* ============================================================
   Herontwerp, naar de schetsen van het ontwerpbureau.
   Ronder, rustiger, meer lucht. Alles hieronder overschrijft
   bewust wat erboven staat; de klassenamen blijven gelijk zodat
   er geen enkel sjabloon aangepast hoeft te worden.
   ============================================================ */

:root {
    --app-bg:      #f6f8f9;
    --panel:       #ffffff;
    --line:        #e7edef;
    --line-strong: #d5dee1;
    --fg:          #0d1c21;
    --fg-soft:     #45585f;
    --muted:       #7b8f97;
    --accent-soft: #e4f0f1;
    --radius:      14px;
    --radius-sm:   10px;
    --shadow:      0 1px 2px rgba(13, 28, 33, 0.03);
    --shadow-lift: 0 6px 20px -10px rgba(13, 28, 33, 0.18);
}

/* ---------- Schil ---------- */

.shell { grid-template-columns: 16.5rem 1fr; }

.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 1.5rem 1rem;
    gap: 1.75rem;
}

.sidebar-brand { padding: 0.25rem 0.5rem 0; }

.sidenav--main { gap: 0.25rem; }

.sidenav--main a {
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    font-weight: 500;
    color: var(--fg-soft);
}

.sidenav--main a .navicon { color: var(--muted); transition: color 0.15s ease; }
.sidenav--main a:hover { background: var(--accent-soft); color: var(--accent); }
.sidenav--main a:hover .navicon { color: var(--accent); }

.sidenav--main a[aria-current="page"] {
    background: var(--accent);
    color: var(--accent-fg);
    box-shadow: var(--shadow-lift);
}
.sidenav--main a[aria-current="page"] .navicon { color: var(--accent-fg); }

/* ---------- Balk bovenin ---------- */

.shell-main > .topbar {
    padding: 1rem 2rem;
    background: var(--panel);
    backdrop-filter: none;
}

.search { max-width: 32rem; width: 100%; }

.search input {
    border-radius: 12px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    background: var(--panel);
    border-color: var(--line-strong);
}

/* Toetscombinatie rechts in het zoekveld. */
.search { position: relative; }
.search kbd {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--muted);
    font: 500 0.75rem/1 inherit;
    pointer-events: none;
}
.search input { padding-right: 3.4rem; }

.whoami { gap: 0.65rem; }
.avatar { width: 2.4rem; height: 2.4rem; font-size: 0.9375rem; }
.whoami-text b { font-size: 0.9375rem; }
.whoami-text small { color: var(--muted); }

/* ---------- Paginakop met actieknop ---------- */

.page-head { margin-bottom: 1.75rem; }
.page-head h1 { font-size: 1.75rem; letter-spacing: -0.025em; }
.page-head > p:last-of-type { color: var(--muted); margin-top: 0.35rem; }

/* Alleen een kop met een actieknop wordt een rij. De rest blijft zoals hij was,
   anders zouden kruimels en titel op alle andere pagina's naast elkaar komen. */
.page-head--action {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
}
.page-head--action > div { min-width: 0; }
.page-head--action .btn { flex: 0 0 auto; }

.crumb { font-size: 0.8125rem; }

/* ---------- Tegels ---------- */

.tools { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

.tool {
    gap: 0.65rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}
.tool:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lift);
    transform: none;
}

.tool-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
}
.tool-icon svg { width: 1.25rem; height: 1.25rem; }

.tool-head { margin-bottom: 0.5rem; }

.tool h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.tool h2 .arrow { color: var(--muted); font-size: 1.25rem; line-height: 1; }
.tool:hover h2 .arrow { color: var(--accent); }
.tool p { color: var(--muted); font-size: 0.875rem; line-height: 1.55; }

.pill {
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--fg-soft);
}
.pill--accent {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
    font-weight: 600;
}

/* ---------- Strook met kengetallen onder de tegels ---------- */

.summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.5rem;
    margin-top: 1.5rem;
    padding: 1.35rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.summary-lead {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    padding-right: 1.5rem;
    border-right: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.summary-lead .tool-icon { background: var(--panel); }

.summary-figure { display: flex; flex-direction: column; line-height: 1.3; }
.summary-figure b {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.summary-figure span { font-size: 0.8125rem; color: var(--fg-soft); }
.summary-figure span.who { color: var(--muted); }

.summary .btn { margin-left: auto; }

/* ---------- Knoppen ---------- */

.btn {
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.05rem;
    font-weight: 600;
}
.btn--go { box-shadow: var(--shadow-lift); }
.btn--ghost { background: var(--panel); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* ---------- Kaarten, tabellen, velden ---------- */

.card {
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}
.card > header { padding: 1.1rem 1.4rem; }
.card > header h2 { font-size: 1rem; }

.table-scroll th, .table-scroll td { padding-top: 0.8rem; padding-bottom: 0.8rem; }
thead th { background: var(--surface-2); }

input, select { border-radius: var(--radius-sm); }
input:focus, select:focus { border-color: var(--accent); }

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

@media (max-width: 68rem) {
    .shell { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
    .shell-main > .topbar { padding: 0.85rem 1.25rem; }
    .summary-lead { border-right: 0; padding-right: 0; }
    .summary .btn { margin-left: 0; }
}

/* Aantalveld naast een aangevinkt artikel. De regel wordt een rij: aanvinken en
   omschrijving links, het aantal rechts. */
.picklist li { display: flex; align-items: center; gap: 1rem; }
.picklist li > label { flex: 1 1 auto; min-width: 0; }

.picklist-qty {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
}
.picklist-qty label {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.picklist-qty input {
    width: 5.5rem;
    height: auto;
    flex: 0 0 auto;
    padding: 0.4rem 0.55rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.picklist-qty small { font-size: 0.75rem; color: var(--muted); }

@media (max-width: 40rem) {
    .picklist li { flex-wrap: wrap; }
    .picklist-qty { align-items: flex-start; text-align: left; }
}

/* ---------- Prijsupdater ---------- */

/* De twee importbestanden aan het eind van de wizard. */
.downloads {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin: 1.25rem 0;
}

.download {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.download:hover { border-color: var(--accent); transform: translateY(-1px); }

.download-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}

.download-icon svg { width: 1.25rem; height: 1.25rem; }

.download-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.download-body b { font-weight: 600; }
.download-body .mono { font-size: 0.8125rem; color: var(--accent); overflow-wrap: anywhere; }
.download-body small { font-size: 0.8125rem; color: var(--muted); }

/* De telling boven de controlestap. */
.samenvatting {
    display: grid;
    gap: 1rem 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 1.25rem;
}

.samenvatting-figure { display: flex; flex-direction: column; line-height: 1.3; }
.samenvatting-figure b {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.samenvatting-figure--breed b { font-size: 1rem; line-height: 1.35; }
.samenvatting-figure span { font-size: 0.8125rem; color: var(--fg-soft); }

/* De vraag die het werkboek in een pop-up stelde. */
.keuze {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
    cursor: pointer;
    font-weight: 550;
}

.keuze input { margin-top: 0.2rem; flex: none; }

.foutlijst { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.foutlijst li { font-size: 0.8125rem; line-height: 1.6; }

/* Het btw-percentage per land. */
input.tarief {
    width: 4.5rem;
    padding: 0.35rem 0.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
}

input.tarief:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.tarief--prijs { width: 6.5rem; }
.prijspaar { display: flex; gap: 1rem; flex-wrap: wrap; }
.prijspaar label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8125rem; color: var(--fg-soft); }
.prijspaar input { width: 8rem; padding: 0.5rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: var(--bg); color: inherit; }
.prijspaar input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
td.marge--onder { color: var(--danger); font-weight: 600; }
.field .label { display: block; font-weight: 550; margin-bottom: 0.35rem; }

/* Het snelformulier op de prijzenpagina: sku, prijs, knop, naast elkaar. */
.snelvorm {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.snelvorm .field { flex: 1 1 12rem; margin: 0; }
.snelvorm .btn { flex: none; }

@media (max-width: 46rem) {
    .snelvorm { flex-direction: column; align-items: stretch; }
}

/* De prijstabel heeft tien kolommen; die krijgt de volle breedte en
   iets compactere cellen, zodat alles zonder scrollen in beeld staat. */
.flow-inner--vol { max-width: 88rem; }

.flow-inner--vol .table-scroll th,
.flow-inner--vol .table-scroll td {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.9375rem;
}

/* Tien kolommen naast elkaar. De tabel mag nooit breder worden dan zijn
   kader: cellen mogen afbreken (een kop als "Nieuwe prijs" wordt dan twee
   regels), zodat de laatste kolom nooit buiten beeld valt. Bedragen breken
   nergens, want daar zit geen spatie in. */
.prijstabel table { table-layout: auto; }

.prijstabel th,
.prijstabel td {
    padding: 0.45rem 0.5rem;
    font-size: 0.875rem;
    white-space: normal;
}

/* Kopteksten blijven op één regel; de datacellen mogen wel schikken.
   De koppen zijn kort genoeg om nooit voor overloop te zorgen. */
.prijstabel th { white-space: nowrap; }

/* De productnaam onder de sku: één regel, netjes afgekapt als hij lang is. */
.prijstabel-naam {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}

/* De waarschuwende variant van een melding: geel, tussen ok en fout in. */
.alert--warn {
    background: #fdf6e8;
    border-color: color-mix(in srgb, #b07d18 28%, transparent);
    color: #8a5f10;
}

/* De "bedoelde je"-knopjes na een tikfout in het artikelnummer. */
.suggesties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.suggesties .btn { font-weight: 500; }
.suggesties .mono { margin-right: 0.45rem; }

/* De twee zijpaadjes van de prijzenpagina: klein en op één regel. */
.zijlinks {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--muted);
}

.zijlinks a { color: var(--fg-soft); text-decoration: none; }
.zijlinks a:hover { color: var(--accent); text-decoration: underline; }

/* De resetknop tussen de zijlinks: oogt als de links ernaast. */
.zijlinks button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--fg-soft);
    cursor: pointer;
}

.zijlinks button:hover { color: var(--accent); text-decoration: underline; }

/* De waarschuwing in de uitbetaalkaart loopt mee als gewone regel in het
   raster, in plaats van als los kader ertussen. */
.payout-melding {
    padding: 0.9rem 1.25rem;
    background: #fdf6e8;
    color: #8a5f10;
    font-size: 0.875rem;
    line-height: 1.55;
}

/* ---------- Prijsupdater: tweekoloms opzet met zijbalk ---------- */

/* De tabel krijgt altijd de volle breedte; de drie kaarten met samenvatting,
   volgende stap en uitleg staan als rij eronder. */
.prijsgrid { display: block; }

/* Het icoontje voor de kaartkop van het invulformulier. */
.kaarticoon {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    vertical-align: -0.5rem;
    margin-right: 0.55rem;
}

.kaarticoon svg { width: 1rem; height: 1rem; }

/* Het groene strookje onder het formulier: artikel gevonden. */
.strookje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.15rem;
    border-top: 1px solid var(--line);
    background: var(--ok-bg);
    color: var(--ok);
    font-size: 0.8125rem;
    font-weight: 550;
}

.strookje svg { width: 1rem; height: 1rem; flex: none; }

/* De strip met drie statusblokken boven de NL-tabel. */
.statusstrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

.statusblok {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1.15rem;
    background: var(--bg);
}

.statusblok b { display: block; font-size: 0.8125rem; }
.statusblok small { color: var(--muted); font-size: 0.75rem; }

.statusicoon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
}

.statusicoon svg { width: 1.05rem; height: 1.05rem; }
.statusicoon--ok { background: var(--ok-bg); color: var(--ok); }
.statusicoon--warn { background: #fdf6e8; color: #8a5f10; }
.statusicoon--stop { background: var(--danger-bg); color: var(--danger); }
.statusicoon--accent { background: var(--accent-soft); color: var(--accent); }

/* De vinkjesrij op de volledige tabel. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill--warn { background: #fdf6e8; color: #8a5f10; }

/* Groepskop per variant in de volledige tabel. */
.groepkop td {
    background: var(--surface);
    font-weight: 600;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.groepkop .pill { margin-left: 0.6rem; }

/* De statuskolom: één oogopslag per regel. */
th.center, td.center { text-align: center; }

.stip {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
}

.stip svg { width: 0.85rem; height: 0.85rem; }
.stip--ok { background: var(--ok-bg); color: var(--ok); }
.stip--warn { background: #fdf6e8; color: #8a5f10; }
.stip--stop { background: var(--danger-bg); color: var(--danger); }

/* De rij met samenvatting, volgende stap en uitleg onder de tabel. */
.prijsside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.prijsside .card { margin-bottom: 0; }

.zijlijst { list-style: none; margin: 0; padding: 0.4rem 0; }

.zijlijst li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.15rem;
}

.zijlijst b { display: block; font-size: 0.8125rem; }
.zijlijst small { color: var(--muted); font-size: 0.75rem; }

.zijstap { display: grid; gap: 0.6rem; padding: 1rem 1.15rem; }
.zijstap p { margin: 0; }
.zijstap .btn { width: 100%; justify-content: center; }

/* De prijsupdater krijgt de ruimte van het scherm, want de tabel is breed;
   op een groot scherm staat er anders lucht naast een schuifbalk. */
.page--prijs { max-width: 110rem; }

/* Het NL-overzicht leest als een spreadsheet: elke rij één regel hoog,
   en de tabel blijft binnen de kaart. De naam is de enige rekbare kolom;
   een uitzonderlijk lange naam wordt afgekapt met puntjes en staat dan
   volledig in de title-tooltip. */
.nltabel th,
.nltabel td {
    white-space: nowrap;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.nltabel td.naam {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nltabel .tarief--prijs { width: 5.5rem; text-align: left; }

/* Alles links uitgelijnd, zoals in het werkblad. */
.nltabel th.num,
.nltabel td.num { text-align: left; }

/* De storekeuze onder het formulier: inklapbaar, raster van vinkjes. */
.storekeuze { flex-basis: 100%; }

.storekeuze summary {
    list-style: none;
    cursor: pointer;
    color: var(--fg-soft);
    font-size: 0.8125rem;
    font-weight: 550;
    padding-top: 0.25rem;
}

.storekeuze summary::-webkit-details-marker { display: none; }
.storekeuze summary:hover { color: var(--fg); }

.storekeuze-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.3rem 1.25rem;
    padding: 0.75rem 0 0.25rem;
}

/* Eén nette regel per winkel: vinkje en tekst, meer niet. */
.storekeuze-grid label.storeoptie {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--fg);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
}

.storekeuze-grid label.storeoptie:hover { background: var(--surface); }

/* De algemene formulierregel geeft elk input-veld 100% breedte; voor deze
   checkboxes moet dat uit, anders duwt het brede veld de tekst het label uit. */
.storekeuze-grid input {
    flex: none;
    width: auto;
    margin: 0;
}

/* De twee knopjes boven de storekeuze: klein, als tekstlinks. */
.storekeuze-knoppen {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.storekeuze-knoppen button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}

.storekeuze-knoppen button:hover { text-decoration: underline; }

/* Bij een lange prijstabel blijft de kopregel in beeld, netjes onder de
   plakkende topbalk. Sticky werkt niet binnen een scrollend kader, dus op
   brede schermen (waar de tabel toch al past) gaat de horizontale scroll
   eraf; op smalle schermen blijft scrollen het vangnet en plakt er niets. */
@media (min-width: 80rem) {
    .table-scroll.prijstabel { overflow-x: visible; }

    /* De kaart knipt normaal zijn inhoud af voor de ronde hoeken, maar elke
       afknippende voorouder breekt position: sticky. Voor kaarten met een
       prijstabel gaat dat dus uit. */
    .card:has(.prijstabel) { overflow: visible; }

    .prijstabel thead th {
        position: sticky;
        top: 4.35rem;
        z-index: 5;
    }
}

/* Het afrondingsscherm: vinkje met kop, daaronder de twee bestanden. */
.klaarkop {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem 0.4rem;
}

.klaarkop h2 { font-size: 1.05rem; margin: 0; }
.klaarkop .note { margin: 0.15rem 0 0; }
.klaarkaart .downloads { padding: 0.9rem 1.25rem; margin: 0; }

/* De storekeuze als dropdown: oogt als een select, klapt open met vinkjes. */
.field--stores { flex: 0 1 13rem; position: relative; }

/* De kaart knipt zijn inhoud af voor de ronde hoeken; het uitklappaneel
   moet daar juist overheen kunnen vallen. */
.card:has(.storedrop) { overflow: visible; }

.storedrop summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 0.6rem 0.85rem;
    font-size: 0.9375rem;
}

.storedrop summary::-webkit-details-marker { display: none; }
.storedrop summary::after { content: "\25be"; color: var(--muted); }
.storedrop[open] summary { border-color: var(--accent); }

.storedrop-paneel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 17rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
}

.storedrop-paneel .storekeuze-knoppen { margin: 0 0 0.5rem; }
.storedrop-paneel .note { margin: 0.5rem 0 0; }

.storedrop-lijst {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 1rem;
    max-height: 16rem;
    overflow-y: auto;
}

.storedrop-lijst label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.8125rem;
    padding: 0.15rem 0.2rem;
    border-radius: var(--radius-sm);
}

.storedrop-lijst label:hover { background: var(--surface); }
.storedrop-lijst input { flex: none; width: auto; margin: 0; }

/* De drie stappen van de prijsupdater: ophalen, prijsbepaling, importoverzicht. */
.stappen {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.stappen li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--muted);
}

.stapnr {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    font-variant-numeric: tabular-nums;
}

.stapnr svg { width: 0.9rem; height: 0.9rem; }

.stappen .stap--actief { color: var(--fg); }
.stappen .stap--actief .stapnr { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.stappen .stap--klaar { color: var(--ok); }
.stappen .stap--klaar .stapnr { background: var(--ok-bg); border-color: transparent; color: var(--ok); }

/* De twee kolommen waar je echt iets invult springen eruit: een licht
   accentvlak over de hele hoogte en een potloodje in de kop. */
.nltabel th.wijzig {
    background: var(--accent-soft);
    color: var(--accent);
}

.nltabel th.wijzig svg {
    width: 0.8rem;
    height: 0.8rem;
    vertical-align: -0.1rem;
    margin-right: 0.3rem;
}

.nltabel td.wijzig { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.nltabel tbody tr:hover td.wijzig { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }

/* De bulkregel bovenin de prijstabel: vult alle regels in één keer. */
.bulkrij td {
    background: var(--surface);
    font-weight: 550;
    font-size: 0.8125rem;
}

.bulkrij td svg {
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -0.15rem;
    margin-right: 0.35rem;
    color: var(--accent);
}

.bulkrij td.note { font-weight: 400; white-space: normal; }
.bulkrij td.wijzig { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }

/* ---------- Tweede inlogstap (authenticator) ---------- */

.login-kop { font-size: 1.15rem; margin: 0 0 0.35rem; }
.login-uitleg { color: var(--muted, #64748b); font-size: 0.875rem; margin: 0 0 0.75rem; line-height: 1.5; }
.sleutelblok {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    background: var(--chip, #f1f5f9);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    margin: 0 0 0.75rem;
    text-align: center;
    word-break: break-all;
    user-select: all;
}
.vertrouw { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.vertrouw input { width: auto; margin: 0; }
.terugvorm { margin-top: 0.6rem; }
.qrblok {
    display: flex;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 0 0 0.85rem;
}
.qrblok svg { display: block; width: 13.75rem; height: 13.75rem; }