/* Aanvullingen op app.css (het ontwerp uit het prototype) voor de echte app. */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth__card { width: min(26rem, 100%); padding: 2rem; }
.auth__card .logo { height: 2.5rem; margin-bottom: 1.5rem; }
.auth__card h1 { font-size: 1.75rem; font-weight: 400; margin-bottom: 1rem; }
.auth form, .form { display: grid; gap: 1rem; }
.auth label, .form label { display: block; margin-bottom: .35rem; font-weight: 700; }
.alert { padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--surface-2); }
.alert--bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.alert--ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); }
.qr { display: inline-block; padding: 1rem; background: #fff; border-radius: var(--r); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.5rem; font-family: ui-monospace, Menlo, monospace; }
.linkish-form { display: inline; }
.top__tools form { margin: 0; }
/* Instellingen-menu rechtsboven (zonder JavaScript: details/summary) */
.setdrop { position: relative; }
.setdrop > summary { list-style: none; cursor: pointer; }
.setdrop > summary::-webkit-details-marker { display: none; }
.setdrop > summary::after { content: " ▾"; font-size: .75em; }
.setdrop > summary.is-current, .setdrop[open] > summary { background: var(--panel); }
.setdrop__panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 25; display: grid; min-width: 12rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 1rem 2.5rem rgb(20 23 28 / .18); }
.setdrop__panel a { padding: .55rem .75rem; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); }
.setdrop__panel a:hover { background: var(--surface-2); }
/* Filters in een overzicht: op één regel, niet over de volle breedte */
.toolbar select { width: auto; min-width: 10rem; }
.toolbar .searchbox { flex: 1 1 16rem; }
.modebar { margin: 0 0 1rem; padding: .6rem 1rem; border-radius: var(--r); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); font-size: .9375rem; }
/* Bovenbalk (prototype): instellingen-icoon, initialen, uitloggen in het menu */
.setdrop > summary.iconbtn { display: grid; }
.setdrop > summary.iconbtn::after { content: none; }
.setdrop > summary.iconbtn.is-current { background: var(--ink); color: var(--surface); }
.setdrop__panel form { margin: 0; }
.setdrop__panel button { width: 100%; padding: .55rem .75rem; border: 0; border-top: 1px solid var(--line); border-radius: var(--r-sm); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.setdrop__panel button:hover { background: var(--surface-2); }
.avatar--init { display: grid; place-items: center; background: var(--ink); color: var(--surface); font-weight: 700; font-size: .9375rem; }
.tododrop .count:empty { display: none; }
/* Sorteerbare tabellen: de kop is een knop (shell.js) */
th[data-sortable] button { font: inherit; cursor: pointer; }
/* Dashboard */
.perf__bars i[hidden], .perf__month .perf__pair i[hidden] { display: none; }
/* Tabel die altijd in zijn kolom past: vaste kolommen, lange klantnamen worden ingekort (volledige naam als tooltip) */
.tbl-fit { table-layout: fixed; width: 100%; font-size: .875rem; }
.tbl-fit th, .tbl-fit td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .4rem; padding-right: .4rem; }
.tbl-fit td.wrap { white-space: normal; }
.tbl-fit .c-nr { width: 6rem; } .tbl-fit .c-date { width: 7.5rem; } .tbl-fit .c-status { width: 9rem; } .tbl-fit .c-step { width: 10.5rem; } .tbl-fit .c-amt { width: 8.5rem; } .tbl-fit .c-ref { width: 22%; }
.tbl-fit .chip { font-size: .75rem; }
@media (max-width: 75em) { .tbl-fit .c-opt { display: none; } }
@media (max-width: 40em) { .tbl-fit .c-amt:nth-child(3), .tbl-fit td:nth-child(3) { display: none; } }
.tbl-fit td.r + td:not(.r), .tbl-fit th.r + th:not(.r) { padding-left: 1.5rem; }
/* Hoe presteer je: maanden rustig op 70%, bij hover over het blok lichten ze allemaal op; de huidige maand vet */
.perf .perf__month { transition: opacity .2s ease; }
.perf .perf__month.is-past { opacity: .6; } .perf .perf__month.is-future { opacity: .7; }
.perf:hover .perf__month.perf__month, .perf:focus-within .perf__month.perf__month { opacity: 1; }
.perf__month .is-now, .perf__month .is-now .perf__rest { font-weight: 700; color: var(--ink); }
/* Zoekvelden (kiezer.js): lijst met resultaten onder een invoerveld; gekozen = achtergrondtint */
.kiezer { position: fixed; z-index: 90; overflow-y: auto; padding: .25rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: 0 .75rem 2rem rgb(0 0 0 / .18); }
.kiezer[hidden] { display: none; }
.kiezer__opt { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem .65rem; border-radius: .375rem; cursor: pointer; }
.kiezer__opt > span:first-child { min-width: 0; display: grid; }
.kiezer__opt strong, .kiezer__opt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiezer__opt small { color: var(--muted); font-size: .8125rem; }
.kiezer__opt:hover, .kiezer__opt[aria-selected="true"] { background: var(--surface-2); }
.kiezer__amt { flex: none; display: grid; text-align: right; }
.kiezer__none { margin: 0; padding: .6rem .65rem; color: var(--muted); }

/* ---------- bedragen verbergen (oog in de bovenbalk) ---------- */
.iconbtn .icon--off, .iconbtn[aria-pressed="true"] .icon--on { display: none; }
.iconbtn[aria-pressed="true"] .icon--off { display: block; }
html[data-hide-amounts] .amt, html[data-hide-amounts] [data-f^="eur"], html[data-hide-amounts] .bigval,
html[data-hide-amounts] td.num, html[data-hide-amounts] th.num, html[data-hide-amounts] .kiezer__amt, html[data-hide-amounts] #perftip, html[data-hide-amounts] .tipbox .num,
html[data-hide-amounts] svg line.gridline + text, html[data-hide-amounts] input.num,
html[data-hide-amounts] input[name*="price"], html[data-hide-amounts] input[name*="amount"], html[data-hide-amounts] input[name*="prijs"], html[data-hide-amounts] input[name*="bedrag"],
html[data-hide-amounts] iframe, html[data-hide-amounts] .prevthumb, html[data-hide-amounts] .previewbox { filter: blur(.35em); user-select: none; pointer-events: none; }
html[data-hide-amounts] iframe, html[data-hide-amounts] .prevthumb, html[data-hide-amounts] .previewbox { filter: blur(.5em); }
html[data-hide-amounts] .amt::selection, html[data-hide-amounts] .amt *::selection { background: transparent; }