:root {
  --bg: #fff8d6;
  --card: #ffffff;
  --text: #22272e;
  --muted: #6b7380;
  --line: #e6dfc0;
  --accent: #0a7fd9;
  --accent-dark: #0864ab;
  --hover: #eef6fd;
  --btn-hover: #e4e6ea;
  --ok: #2f7d4a;
  --ok-bg: #e3f2e7;
  --no: #a33a2c;
  --no-bg: #f7e4e1;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 20px; padding-bottom: 40px; }

header.top { background: var(--accent); color: #fff; }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
header.top a { color: #fff; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 17px; }
.logo { display: inline-flex; background: #fff; border-radius: 8px; padding: 4px 8px; }
.logo img { display: block; height: 64px; width: auto; }
@media (max-width: 500px) { .logo img { height: 44px; } }
.ingelogd { display: flex; align-items: center; gap: 10px; margin-left: auto; background: rgba(255,255,255,.15); padding: 5px 14px 5px 6px; border-radius: 22px; line-height: 1.2; }
.ingelogd small { display: block; opacity: .85; font-size: 12px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--accent); font-weight: 700; }
/* Menu: twee lijnen; .menulijn breekt af voor Giften, Verkopen, Kasboek en Bankboek
   (op smallere schermen worden de knoppen kleiner) */
nav .menulijn { flex-basis: 100%; height: 0; }
nav { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; order: 5; padding-top: 4px; }
nav a, header.top a.afmelden { padding: 6px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 6px; background: rgba(255,255,255,.12);
         font-weight: 600; font-size: 14px; white-space: nowrap; }
header.top nav a:hover, header.top a.afmelden:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--text); }
header.top nav a.actief { background: #fff; border-color: #fff; color: var(--accent-dark); }
@media (min-width: 641px) and (max-width: 1180px) {
  nav { gap: 4px; }
  nav a { padding: 5px 8px; font-size: 13px; }
}

h1 { font-size: 24px; margin: 0 0 12px; }
h2 { font-size: 18px; margin: 0 0 10px; }
h1 small, h2 small { color: var(--muted); font-weight: 400; font-size: 60%; }
.titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.titlebar h1, .titlebar h2 { margin: 0; }
.titlebar > div { display: flex; flex-wrap: wrap; gap: 6px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.narrow { max-width: 420px; margin: 40px auto; }
.narrow-wide { max-width: 760px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 14px; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-weight: 400; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[disabled] { background: var(--bg); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
label.check input { width: auto; margin: 0; }
.row { display: flex; gap: 10px; }
.row > label { flex: 1; }
.row > label:has(.short) { flex: 0 0 120px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 4px; margin: 0; min-width: 0; }
fieldset.plain { border: 0; padding: 0; }
fieldset[disabled] input, fieldset[disabled] textarea { background: var(--bg); color: var(--text); }
legend { font-weight: 700; color: var(--accent); padding: 0 6px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
.actions { margin-top: 6px; }

.btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { color: var(--no); border-color: var(--no); }
/* Alle knoppen krijgen dezelfde lichtgrijze achtergrond bij hover */
.btn:hover, .btn.primary:hover { background: var(--btn-hover); border-color: #c9cdd3; color: var(--text); }
.btn.danger:hover { background: var(--btn-hover); color: var(--no); }
.btn.small { padding: 4px 8px; font-size: 13px; }
form.inline { display: inline; }
.ontvangers { max-height: 460px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 8px; }
.ontvangers label.check { margin-bottom: 4px; align-items: flex-start; }
.ontvangers label.check input { margin-top: 4px; }
.titlebar label.check { margin: 0; }
.exportbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px; }
.exportgroep { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.samenvatting summary { cursor: pointer; margin-bottom: 8px; }
.samenvatting tr.actief td { background: var(--hover); }
th.num, td.num { text-align: right; width: 90px; }
tr.heeft-detail td { border-bottom: 0; }
tr.detailrij td { padding-top: 0; font-size: 14px; }
table.list tbody tr.detailrij { cursor: default; }
table.list tbody tr.detailrij:hover { background: transparent; }
.klein { font-size: 12px; margin-top: 4px; }
label.inline-check { display: inline-flex; margin: 0; font-size: 13px; color: var(--muted); }
select.compact { width: auto; margin: 0; padding: 4px 8px; }
fieldset.beelden { margin: 8px 0 14px; padding-bottom: 6px; }
.galerij { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.galerij figure { margin: 0; width: 72px; }
.galerij img { display: block; width: 72px; height: 54px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); cursor: zoom-in; }
.galerij a:hover img { border-color: var(--accent); }
.galerij figcaption { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; font-size: 13px; }
.galerij figcaption a { text-decoration: none; padding: 0 4px; }
.galerij.klein { margin: 6px 0 4px; gap: 6px; }
.galerij.klein img { width: 48px; height: 36px; }
ul.wachtrij li { background: var(--hover); padding: 4px 6px; border-radius: 4px; margin-bottom: 4px; border: 0; }
ul.wachtrij img.voorbeeld { width: 36px; height: 27px; object-fit: cover; border-radius: 3px; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(20, 24, 30, .85); padding: 16px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; text-align: center; max-width: calc(100% - 110px); }
.lightbox img { max-width: 100%; max-height: calc(100vh - 90px); border-radius: 6px; background: #fff; box-shadow: 0 6px 30px rgba(0,0,0,.4); }
.lightbox figcaption { color: #fff; margin-top: 8px; font-size: 14px; }
.lb-knop { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 26px; line-height: 1; cursor: pointer; flex: none; }
.lb-knop:hover { background: rgba(255,255,255,.3); }
.lb-sluit { position: absolute; top: 14px; right: 14px; font-size: 20px; }
.wisknop { background: #fff; color: var(--no); border: 1px solid #ecc4be; border-radius: 4px; padding: 0 6px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.6; cursor: pointer; white-space: nowrap; }
.wisknop:hover { background: var(--no-bg); border-color: var(--no); }
ul.bijlagen { list-style: none; padding: 0; margin: 6px 0 10px; }
ul.bijlagen li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
ul.bijlagen li a { flex: 0 1 auto; overflow-wrap: anywhere; }
ul.bijlagen .wisknop { margin-left: auto; }
ul.bijlagen.klein li { border: 0; padding: 1px 0; font-size: 13px; }
.icoon { display: inline-block; min-width: 30px; padding: 1px 4px; border-radius: 3px; font-size: 10px; font-weight: 700; text-align: center; color: #fff; background: #6b7380; }
.icoon-pdf { background: #c62828; }
.icoon-w { background: #2b579a; }
.icoon-x { background: #217346; }
.icoon-p { background: #c43e1c; }
.fototal { color: var(--muted); font-size: 13px; white-space: nowrap; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filters input[type=search] { flex: 1 1 260px; width: auto; margin: 0; }
.filters label { margin: 0; }
.filters select { width: auto; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover { background: var(--hover); }
tr.done td { color: var(--muted); }
td.late { color: var(--no); font-weight: 700; }
td.empty { text-align: center; color: var(--muted); cursor: default; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* Giften: invultabel met artikelregels */
table.artikels tbody tr { cursor: default; }
table.artikels tbody tr:hover { background: none; }
table.artikels td { padding: 4px 4px; vertical-align: middle; }
table.artikels input, table.artikels select { margin: 0; }
table.artikels td:first-child { min-width: 220px; }
table.artikels input.getal { width: 80px; text-align: right; }
table.artikels input.doos { width: 80px; }
#nieuwartikel, #nieuwelijn { margin-top: 8px; }

/* Verkopen, kasboek en bankboek */
span.label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.row.keuzes { gap: 18px; margin-bottom: 10px; }
.row.keuzes > label { flex: 0 0 auto; margin: 0; }
table.artikels input.artnr { min-width: 90px; }
table.artikels tfoot th { font-size: 15px; color: var(--text); border-bottom: 0; }
td.lijntotaal { font-weight: 600; }
table.artikellijst td { vertical-align: middle; padding: 4px 6px; }
table.artikellijst input { margin: 0; }
table.artikellijst input.getal { width: 100px; text-align: right; }
table.artikellijst tbody tr { cursor: default; }
dialog { max-width: 440px; width: calc(100% - 32px); border: 1px solid var(--line); }
dialog.card { margin: auto; }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
/* Totaal IN, Totaal UIT en saldo samen op één lijn */
.saldi { display: flex; padding: 0; margin-bottom: 14px; }
.saldi .saldo { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 12px 16px; min-width: 0; }
.saldi .saldo + .saldo { border-left: 1px solid var(--line); }
.saldi .saldo span { color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.saldi .saldo strong { font-size: 20px; white-space: nowrap; }
.bedrag-in { color: var(--ok); }
.bedrag-uit { color: var(--no); }
table.list tfoot th { color: var(--text); font-size: 15px; border-top: 2px solid var(--line); }

/* Projecten */
.voortgang { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: var(--line); vertical-align: middle; overflow: hidden; }
.voortgang span { display: block; height: 100%; background: var(--ok); }
table.takenrooster select.uitvoerder { min-width: 170px; }
table.takenrooster select[name$="[type]"] { min-width: 115px; }
table.takenrooster input[name$="[onderwerp]"] { min-width: 190px; }
table.takenrooster input.datum { width: 105px; }
table.takenrooster textarea { min-width: 180px; margin: 0; resize: vertical; field-sizing: content; max-height: 140px; }
table.takenrooster td.midden { text-align: center; }
table.takenrooster td.midden input { width: auto; }
table.takenrooster tr.done td { color: inherit; }
.projectkop dl.meta { margin: 0; }

/* Takenlijst per gebruiker */
table.list tr.groepkop th { background: var(--bg); color: var(--accent-dark); font-size: 15px; padding-top: 12px; cursor: default; }
table.list tbody.groep tr.groepkop:hover { background: none; }

/* Verkoopdagboek */
table.dagboek td { border-bottom: 0; padding-top: 3px; padding-bottom: 3px; }
table.dagboek tr.nieuweverkoop td { border-top: 1px solid var(--line); padding-top: 7px; }
table.dagboek tr.periodekop th { background: var(--bg); color: var(--accent-dark); font-size: 14px; padding-top: 10px; }
table.dagboek tr.verkooptotaal td { color: var(--muted); font-style: italic; }
table.dagboek tr.subtotaal th, table.dagboek tfoot th { color: var(--text); font-size: 14px; border-top: 1px solid var(--text); }
table.dagboek tr.eindtotaal th { font-size: 16px; border-top: 2px solid var(--text); }

.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.badge.ja { background: var(--ok-bg); color: var(--ok); }
.badge.nee { background: var(--no-bg); color: var(--no); }
.badge.in { background: #e3effa; color: var(--accent-dark); }
.badge.uit { background: #fff1d6; color: #8a5a00; }
.badge.type { background: #eef1f4; color: #3d4a5c; }
.koppeling { border-left: 4px solid var(--accent); }
.koppeling p { margin: 0 0 8px; }
label.check[hidden] { display: none; }
.rolinfo { display: block; font-size: 12px; color: var(--muted); }
tr.mail-verwijderd td { color: var(--muted); }
tr.mail-verwijderd td a { text-decoration: line-through; color: var(--muted); }
.verwijderd-melding { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--muted); }

.flash { background: var(--ok-bg); color: var(--ok); border: 1px solid #bfe0c9; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.error { background: var(--no-bg); color: var(--no); border: 1px solid #ecc4be; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.danger-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }

dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 14px; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; }
pre.mailbody { white-space: pre-wrap; font: inherit; background: var(--bg); padding: 14px; border-radius: 8px; margin: 0; }

.menuknop { display: none; }

@media (max-width: 760px) {
  .grid2, .form-grid { grid-template-columns: 1fr; }
  .row { flex-direction: column; gap: 0; }
  .row > label:has(.short) { flex: 1; }
}

/* --- Gsm --------------------------------------------------------------- */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; } /* anders zoomt de iPhone in bij het typen */
  main.wrap { padding-top: 14px; }
  h1 { font-size: 21px; }
  .card { padding: 14px; }
  .titlebar { flex-direction: column; align-items: stretch; }
  .btn { padding: 9px 14px; }

  /* Compacte balk: logo, menuknop, wie aangemeld is; het menu klapt open onder de balk */
  header.top .wrap { gap: 8px 10px; padding-top: 8px; padding-bottom: 8px; }
  .logo img { height: 40px; }
  .appnaam { display: none; }
  .menuknop { display: inline-block; order: 2; margin-left: auto; padding: 8px 14px; border: 1px solid rgba(255,255,255,.6);
              border-radius: 6px; background: rgba(255,255,255,.15); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  .ingelogd { order: 3; flex-basis: 100%; margin: 0; padding: 0; background: none; }
  .ingelogd .avatar { width: 26px; height: 26px; font-size: 13px; }
  nav { order: 4; display: none; flex-direction: column; gap: 6px; padding-top: 2px; }
  header.menu-open nav { display: flex; }
  nav a { padding: 11px 14px; font-size: 15px; }
  nav .menulijn { display: block; flex-basis: auto; height: 1px; margin: 2px 0; background: rgba(255,255,255,.4); }
  header.top a.afmelden { order: 5; display: none; flex-basis: 100%; padding: 11px 14px; font-size: 15px; }
  header.menu-open a.afmelden { display: block; }

  /* Lijsten als kaartjes: elke rij een kaartje, elke cel met de kolomnaam ervoor (data-label) */
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list tbody tr { margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
  table.list tbody tr:hover { background: var(--hover); }
  table.list td { position: relative; padding: 4px 0 4px 38%; border: 0; min-height: 26px; }
  table.list td:not([data-label]) { padding-left: 0; }
  table.list td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 4px; width: 35%;
                                      color: var(--muted); font-size: 13px; font-weight: 600; }
  table.list td:empty { display: none; }
  table.list td.right { text-align: left; }
  table.list td.empty { padding: 8px 0; text-align: center; }
  table.list td input[type=checkbox] { width: auto; margin: 0; }
  .card.table-wrap { padding: 0; border: 0; background: none; }
  table.list tr.heeft-detail { margin-bottom: 0; border-bottom: 0; border-radius: 8px 8px 0 0; }
  table.list tr.detailrij { border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; }
  .exportbar { padding: 12px 14px; }
  table.artikels td { padding: 4px 0 4px 38%; }
  table.artikels td:first-child { min-width: 0; }
  table.artikels input.getal, table.artikels input.doos { width: 100%; text-align: left; }
  table.list tfoot, table.list tfoot tr { display: block; }
  table.list tfoot th { display: inline-block; border: 0; padding: 4px 8px 4px 0; }
  table.list tfoot th:empty { display: none; }
  table.artikellijst td { padding: 4px 0 4px 38%; }
  table.artikellijst input.getal { width: 100%; text-align: left; }
  .saldi .saldo { flex-direction: column; align-items: center; gap: 0; padding: 8px 4px; }
  .saldi .saldo span { font-size: 12px; }
  .saldi .saldo strong { font-size: 15px; }
}

/* --- Afdrukken ------------------------------------------------------------
   Alleen de lijst zelf op papier: geen menu, filters, knoppen of vakjes.
   .printinfo (zie afdruk_info()) vermeldt de selectie en wanneer er afgedrukt werd. */
.printinfo, .alleenprint { display: none; }
@media print {
  @page { size: A4; margin: 12mm 10mm; }
  body { background: #fff; color: #000; font-size: 10pt; }
  header.top, .filters, .exportbar, .danger-zone, .flash, .titlebar > div, details.samenvatting, .geenprint,
  .btn, .wisknop, .menuknop, .lightbox { display: none !important; }
  main.wrap { max-width: none; padding: 0; }
  .printinfo { display: block; margin: 0 0 8px; font-size: 8.5pt; color: #444; }
  .alleenprint { display: inline; }
  h1 { font-size: 15pt; margin: 0 0 2px; }
  .titlebar { margin-bottom: 2px; }
  .card, .card.table-wrap { border: 0; padding: 0; margin: 0 0 8px; background: none; }
  .table-wrap { overflow: visible; }
  a { color: inherit; text-decoration: none; }
  table { font-size: 9pt; }
  th, td { padding: 3px 5px; border-bottom: 1px solid #ccc; }
  thead { display: table-header-group; }          /* kolomtitels bovenaan elke pagina */
  tr { break-inside: avoid; }
  table.list tbody tr:hover { background: none; }
  .badge { background: none !important; color: #000 !important; border: 1px solid #999; padding: 0 5px; }
  .bedrag-in, .bedrag-uit, td.late { color: #000 !important; }
  td.late { font-weight: 700; }
  select { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; background: none; font: inherit; color: #000; }
  .saldi { border: 1px solid #999; margin-bottom: 8px; }
  .saldi .saldo { padding: 4px 8px; }
  .saldi .saldo strong { font-size: 12pt; }
  .galerij img { max-height: 60px; }
  table.dagboek td { border-bottom: 0; }
  table.dagboek tr.nieuweverkoop td { border-top: 1px solid #ccc; }
  table.dagboek tr.periodekop th { background: none; color: #000; border-bottom: 1px solid #000; }
  table.dagboek tbody { break-inside: auto; }
  .nietafdrukken { display: none !important; }
  .voortgang { border: 1px solid #999; }
  .projectkop { border: 1px solid #bbb !important; padding: 6px 8px !important; }
  /* Fiches (bv. een gift): invulvelden als gewone tekst */
  input, textarea, select { border: 0 !important; background: none !important; padding: 0 !important; margin-top: 0 !important;
                            color: #000 !important; font-size: 10pt; box-shadow: none; outline: 0; }
  textarea { resize: none; field-sizing: content; min-height: 0; }
  ::placeholder { color: transparent !important; }
  fieldset { border: 1px solid #bbb; padding: 4px 8px 2px; break-inside: avoid; }
  legend { color: #000; }
  label { font-size: 8pt; color: #555; margin-bottom: 4px; }
  .form-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
  .row { flex-direction: row; gap: 8px; }
  .row > label:has(.short) { flex: 0 0 25%; }
  table.artikels td { padding: 2px 4px; }
  table.artikels select, table.artikels input { width: auto; min-width: 0; field-sizing: content; }
  table.artikels td:first-child { min-width: 0; }
  table.list tr.groepkop th { background: none; color: #000; border-bottom: 1px solid #000; }
  body.afdruk-perblad tbody.groep + tbody.groep { break-before: page; }   /* elke gebruiker op een eigen blad */
}