/** * PBFv2 Beheer — nieuwe organisator-beheerpagina. * Design-handoff 2026-07-30. Klassenprefix `pbf-`, BEM. */ /* ---------- tokens ---------- */ /* De overlay hangt aan , dus buiten .pbf-manage: zonder deze tweede selector erven de modals geen enkele kleur en valt bv. witte knoptekst weg op een doorzichtige achtergrond. */ .pbf-manage, .pbf-overlay{ --pbf-teal: var(--pbfv2-teal, #0f7a76); --pbf-line: var(--pbfv2-line, #e4ebe7); --pbf-ink: #123330; --pbf-ink-2: #4a5956; --pbf-ink-3: #7b8a86; --pbf-surface: #ffffff; --pbf-surface-2: #fafcfb; --pbf-page: #f4f7f5; --pbf-teal-soft: #e9f4f2; --pbf-teal-line: #d3e8e4; --pbf-amber: #e08c3c; --pbf-amber-soft: #fdf6e3; --pbf-amber-line: #f0dcae; --pbf-amber-ink: #7a5b12; --pbf-warn-soft: #fdf1e6; --pbf-warn-line: #f0c8a0; --pbf-warn-ink: #8a4a10; --pbf-danger: #b3261e; --pbf-accent: #f6d878; --pbf-r-sm: 8px; --pbf-r-md: 10px; --pbf-r-lg: 14px; --pbf-r-xl: 18px; --pbf-sh-1: 0 1px 2px rgba(18,51,48,.06); --pbf-sh-2: 0 12px 30px rgba(18,51,48,.16); --pbf-sh-3: 0 24px 60px rgba(18,51,48,.30); --pbf-gap: 14px; --pbf-row-pad: 14px; } .pbf-manage{ max-width: 1300px; margin: 0 auto; padding: 26px 24px 80px; color: var(--pbf-ink-2); font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--pbf-page); box-sizing: border-box; } .pbf-manage *, .pbf-manage *::before, .pbf-manage *::after { box-sizing: border-box; } .pbf-manage[data-density="compact"]{ --pbf-row-pad: 9px; } .pbf-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---------- 1. paginakop ---------- */ .pbf-head{ margin-bottom: 20px; } .pbf-head__back{ display:inline-block; margin-bottom:14px; color:var(--pbf-ink-3); font-size:13px; text-decoration:none; } .pbf-head__back:hover{ color:var(--pbf-teal); } .pbf-head__row{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; } .pbf-head__title-group{ flex:1; min-width:0; } .pbf-head__meta{ margin:0 0 6px; font-size:13px; color:var(--pbf-ink-3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pbf-head__title{ margin:0; font-family:"Barlow Condensed", sans-serif; font-size:40px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--pbf-ink); line-height:1; } .pbf-head__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pbf-pill{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .pbf-pill--published{ color:#0f5c59; background:var(--pbf-teal-soft); border:1px solid var(--pbf-teal-line); } .pbf-pill--draft{ color:var(--pbf-ink-2); background:#f2f5f3; border:1px solid var(--pbf-line); } .pbf-pill--full{ color:var(--pbf-amber-ink); background:var(--pbf-amber-soft); border:1px solid var(--pbf-amber-line); } /* ---------- 2. stat-tiles ---------- */ .pbf-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--pbf-gap); margin-bottom:16px; } .pbf-stat{ display:block; width:100%; text-align:left; padding:16px 18px; background:#fff; border:1px solid var(--pbf-line); border-radius:var(--pbf-r-lg); box-shadow:var(--pbf-sh-1); cursor:pointer; font:inherit; color:inherit; } .pbf-stat:hover{ transform:translateY(-1px); } .pbf-stat--attention{ background:var(--pbf-amber-soft); border-color:var(--pbf-amber-line); } .pbf-stat__label{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7b8a86; margin-bottom:8px; } .pbf-stat__value{ display:flex; align-items:baseline; gap:7px; font-family:"Barlow Condensed", sans-serif; font-size:38px; font-weight:700; line-height:.9; color:var(--pbf-ink); } .pbf-stat__suffix{ font-size:12.5px; font-weight:500; color:#6d7c78; } .pbf-stat__sub{ display:block; margin-top:6px; font-size:12.5px; color:#6d7c78; } /* ---------- 3. actiepaneel ---------- */ .pbf-actionpanel{ margin:0 0 16px; background:#fff; border:1px solid var(--pbf-amber-line); border-radius:var(--pbf-r-lg); overflow:hidden; } .pbf-actionpanel__head{ display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--pbf-amber-soft); border-bottom:1px solid #f2e3bb; } .pbf-actionpanel__title{ margin:0; font-family:"Barlow Condensed", sans-serif; font-size:19px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--pbf-amber-ink); } .pbf-count{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 8px; border-radius:999px; background:#f6d878; color:#3d2f05; font-weight:700; font-size:12.5px; } .pbf-actionpanel__hint{ margin:0 0 0 auto; font-size:12px; color:var(--pbf-amber-ink); } .pbf-actionpanel__list{ list-style:none; margin:0; padding:0; } .pbf-actionitem{ display:flex; align-items:center; gap:var(--pbf-gap); padding:13px 18px; border-bottom:1px solid #f2f5f3; } .pbf-actionitem:last-child{ border-bottom:0; } .pbf-actionitem__body{ flex:1; min-width:0; } .pbf-actionitem__title{ margin:0; font-size:14px; font-weight:600; color:var(--pbf-ink); } .pbf-actionitem__sub{ margin:2px 0 0; font-size:12.5px; color:#6d7c78; } .pbf-tag{ display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:0 0 106px; padding:5px 8px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .pbf-tag--swap, .pbf-tag--dupr{ background:var(--pbf-warn-soft); color:var(--pbf-warn-ink); } .pbf-tag--expiring{ background:var(--pbf-amber-soft); color:var(--pbf-amber-ink); } .pbf-tag--waitlist{ background:#f2f5f3; color:var(--pbf-ink-2); } .pbf-tag--refund{ background:#fdecec; color:#8a2b2b; } .pbf-actionitem__bedrag{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; font-size:13px; font-weight:600; color:var(--pbf-ink); } .pbf-actionitem__bedrag input{ width:82px; padding:7px 8px; border:1px solid #dbe6e2; border-radius:8px; background:#fff; font:inherit; font-size:13px; color:var(--pbf-ink); } .pbf-actionitem__bedrag input:focus{ outline:none; border-color:var(--pbf-teal); box-shadow:0 0 0 3px rgba(15,122,118,.12); } /* ---------- 4. filterbalk ---------- */ .pbf-filterbar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; } .pbf-search{ flex:1; min-width:220px; } .pbf-search__input{ width:100%; padding:11px 14px; border:1px solid #dbe6e2; border-radius:999px; background:#fff; font-size:13.5px; color:var(--pbf-ink); font-family:inherit; } .pbf-search__input:focus{ outline:none; border-color:var(--pbf-teal); box-shadow:0 0 0 3px rgba(15,122,118,.12); } .pbf-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .pbf-chip{ display:flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid #dbe6e2; border-radius:999px; background:#fff; font-size:13px; font-weight:600; color:#3f4d4a; cursor:pointer; font-family:inherit; } .pbf-chip b{ font-size:11.5px; opacity:.72; font-weight:600; } .pbf-chip.is-active{ background:var(--pbf-ink); border-color:var(--pbf-ink); color:#fff; } .pbf-chip.is-active b{ opacity:.9; } /* ---------- 5. bulkbalk ---------- */ .pbf-bulkbar{ position:sticky; top:10px; z-index:30; display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 16px; margin-bottom:14px; background:var(--pbf-ink); color:#fff; border-radius:12px; box-shadow:0 8px 22px rgba(18,51,48,.22); } /* Het thema kleurt losse spans donker; op deze zwarte balk viel het cijfer daardoor weg. */ .pbf-bulkbar__count, .pbf-bulkbar__count span{ font-size:13px; color:#fff; } .pbf-bulkbar__names{ font-size:12.5px; color:rgba(255,255,255,.72); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pbf-bulkbar__actions{ display:flex; gap:8px; flex-wrap:wrap; } /* ---------- 6. categoriekaart ---------- */ .pbf-cat{ background:var(--pbf-surface); border:1px solid var(--pbf-line); border-radius:16px; box-shadow:var(--pbf-sh-1); margin-bottom:18px; overflow:hidden; } .pbf-cat__head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pbf-gap); padding:16px 18px; border-bottom:1px solid var(--pbf-line); } .pbf-cat[data-open="false"] .pbf-cat__head{ border-bottom-color:transparent; } .pbf-cat[data-open="false"] .pbf-cat__body{ display:none; } .pbf-cat[data-open="false"] .pbf-cat__caret{ transform:rotate(-90deg); } .pbf-cat__caret{ width:28px; height:28px; border:1px solid #dbe6e2; border-radius:var(--pbf-r-sm); background:var(--pbf-surface-2); color:var(--pbf-teal); cursor:pointer; font-size:14px; line-height:1; transition:transform .12s ease; } .pbf-cat__id{ flex:1; min-width:200px; } .pbf-cat__name{ margin:0; font-family:"Barlow Condensed", sans-serif; font-size:22px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--pbf-ink); } .pbf-cat__meta{ margin:2px 0 0; font-size:12.5px; color:#6d7c78; } .pbf-cat__right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pbf-capacity{ display:flex; align-items:center; gap:8px; } .pbf-capacity__bar{ width:118px; height:8px; border-radius:999px; background:#eef3f1; overflow:hidden; } .pbf-capacity__bar i{ display:block; height:100%; width:var(--pbf-fill, 0); background:var(--pbf-teal); border-radius:999px; transition:width .3s ease; } .pbf-cat[data-full="true"] .pbf-capacity__bar i{ background:var(--pbf-amber); } .pbf-capacity__label{ font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--pbf-ink-3); } .pbf-cat__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pbf-gap); padding:14px 18px; background:#f3f9f8; border-top:1px solid var(--pbf-teal-line); } .pbf-cat__foot-title{ margin:0; font-size:14px; font-weight:600; color:var(--pbf-ink); } .pbf-cat__foot-sub{ margin:2px 0 0; font-size:12.5px; color:#6d7c78; } .pbf-empty{ padding:22px 18px; margin:0; text-align:center; color:var(--pbf-ink-3); font-size:13.5px; } /* ---------- 7. tabel ---------- */ .pbf-table{ width:100%; border-collapse:collapse; } /* In de rijen enkel horizontale lijnen. Het thema zet een rand rondom elke cel; die hakt de rij in stukken terwijl je ze net als één geheel moet lezen. De kolomkoppen houden hun verticale scheiding wél: daar wijst ze aan waar een kolom begint. */ .pbf-table td{ border-left:0; border-right:0; border-top:0; } .pbf-table thead th + th{ border-left:1px solid #eef3f1; } .pbf-table thead th{ padding:10px 18px; background:var(--pbf-surface-2); border-bottom:1px solid #eef3f1; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pbf-ink-3); text-align:left; } .pbf-table__check{ width:34px; text-align:center; } .pbf-table__actions{ width:300px; } /* Speler en Partner blijven links: dat is tekst die je afleest. De rest zijn korte waarden per rij, die staan rustiger onder elkaar als ze in de kolom gecentreerd zijn. De kop moet de cel volgen, vandaar de klasse mét thead ervoor — anders wint de text-align:left van de algemene th-regel hierboven. */ .pbf-table thead th.pbf-table__dupr, .pbf-table thead th.pbf-table__status, .pbf-table thead th.pbf-table__paid, .pbf-table thead th.pbf-table__actions{ text-align:center; } .pbf-row > td{ padding:var(--pbf-row-pad) 12px var(--pbf-row-pad) 0; border-bottom:1px solid #f2f5f3; vertical-align:middle; } .pbf-row > td:first-child{ padding-left:18px; } .pbf-row > td:last-child{ padding-right:18px; } .pbf-row--attention > td:first-child{ box-shadow:inset 3px 0 0 var(--pbf-amber); } .pbf-row:hover{ background:#fbfdfc; } .pbf-row.is-marked{ background:var(--pbf-teal-soft); } .pbf-row.is-hidden{ display:none !important; } .pbf-row__name{ display:block; font-size:14px; font-weight:600; color:var(--pbf-ink); } .pbf-row__email{ display:block; max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#8a9995; text-decoration:none; } .pbf-row__email:hover{ color:var(--pbf-teal); text-decoration:underline; } .pbf-row__email--none{ color:#b7c1be; font-style:italic; } .pbf-row__partner-name{ display:block; font-size:13.5px; color:var(--pbf-ink-2); } .pbf-row__partner-none{ font-size:13.5px; color:#8a9995; font-style:italic; } .pbf-row__partner-sub{ display:block; font-size:11.5px; color:#8a9995; } .pbf-row__partner-sub--pending{ color:#a1691f; } .pbf-row__actions-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px; position:relative; } .pbf-row__timer{ display:block; margin-top:4px; font-size:11.5px; color:var(--pbf-amber-ink); } .pbf-row__status{ min-width:150px; text-align:center; } /* Betaalcel */ .pbf-table__paid{ width:130px; text-align:center; } .pbf-row__paid{ min-width:120px; text-align:center; } .pbf-paid{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; } .pbf-paid input{ width:17px; height:17px; accent-color:var(--pbf-teal); cursor:pointer; } .pbf-paid input:disabled{ cursor:wait; } .pbf-paid__bedrag{ font-family:"IBM Plex Mono", monospace; font-size:13px; color:#8a9995; } .pbf-paid.is-paid .pbf-paid__bedrag{ color:var(--pbf-teal); font-weight:600; } .pbf-paid__op{ display:block; margin-top:2px; font-size:11.5px; color:#8a9995; } /* DUPR-cel */ .pbf-dupr{ min-width:110px; text-align:center; } .pbf-dupr__rating{ font-family:"IBM Plex Mono", monospace; font-size:13.5px; color:var(--pbf-ink); } .pbf-dupr__rating--none{ color:#b7c1be; } .pbf-dupr__stamp{ display:block; margin-top:2px; padding:0; border:0; background:none; font-size:11.5px; color:#8a9995; cursor:pointer; text-align:inherit; font-family:inherit; } .pbf-dupr__stamp:hover{ color:var(--pbf-teal); text-decoration:underline; } .pbf-dupr--conflict .pbf-dupr__rating{ color:var(--pbf-warn-ink); } .pbf-dupr__flag{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:3px 6px; border:1px solid var(--pbf-warn-line); border-radius:6px; background:var(--pbf-warn-soft); font-size:10.5px; font-weight:700; color:var(--pbf-warn-ink); cursor:pointer; line-height:1; font-family:inherit; } .pbf-dupr__flag:hover{ background:#f8e3cf; } .pbf-warn{ width:12px; height:11px; } .pbf-warn path{ fill:var(--pbf-amber); } .pbf-warn rect{ fill:#fff; } /* Datumstempel-leeftijd — 3-6 mnd amber, >6 mnd rood. */ .pbf-dupr--stale .pbf-dupr__stamp{ color:var(--pbf-amber-ink); font-weight:600; } .pbf-dupr--outdated .pbf-dupr__stamp{ color:var(--pbf-danger); font-weight:600; } .pbf-dupr__stamp--gast{ display:block; margin-top:2px; font-size:11.5px; color:#b7c1be; font-style:italic; } /* Niet vastgelegd bij de inschrijving, maar van het profiel geplukt. */ .pbf-dupr__stamp--profiel{ display:block; margin-top:2px; font-size:11.5px; color:#8a9995; font-style:italic; cursor:help; } /* Geen DUPR-nummer terwijl de activiteit er wel op indeelt. */ .pbf-dupr__ontbreekt{ display:block; margin-top:2px; font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-weight:600; color:var(--pbf-danger); text-decoration:line-through; cursor:help; } /* Sterkte buiten de grenzen van de reeks — geen fout, wel het bekijken waard. */ .pbf-dupr__buiten{ display:inline-block; margin-left:6px; padding:2px 7px; border:1px solid var(--pbf-amber-line, #e8d4b8); border-radius:999px; background:var(--pbf-amber-soft, #fdf5ea); font-size:10.5px; font-weight:700; color:var(--pbf-amber-ink); line-height:1.4; cursor:help; } .pbf-dupr--buiten .pbf-dupr__rating{ font-weight:700; } /* Doorklikken naar het scherm van de speler bij DUPR. */ .pbf-dupr__link{ display:block; margin-top:2px; font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--pbf-teal); text-decoration:none; } .pbf-dupr__link:hover, .pbf-dupr__link:focus-visible{ text-decoration:underline; } .pbf-dupr__link::after{ content:" \2197"; } /* De grenzen van de reeks, klein achter de kolomkop DUPR. */ .pbf-table__grens{ display:block; margin-top:1px; font-size:10.5px; font-weight:400; text-transform:none; letter-spacing:0; color:#8a9995; } /* ---------- badges ---------- */ .pbf-badge{ display:inline-block; padding:5px 10px; border-radius:999px; border:1px solid; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; } .pbf-badge--ingeschreven{ color:#0f5c59; background:var(--pbf-teal-soft); border-color:var(--pbf-teal-line); } .pbf-badge--zoekt { color:#0f5c59; background:#f1f7f6; border-color:#dbe9e6; } .pbf-badge--wacht { color:var(--pbf-amber-ink); background:var(--pbf-amber-soft); border-color:var(--pbf-amber-line); } .pbf-badge--wachtlijst { color:var(--pbf-ink-2); background:#f2f5f3; border-color:var(--pbf-line); } .pbf-badge--wissel { color:var(--pbf-warn-ink); background:var(--pbf-warn-soft); border-color:var(--pbf-warn-line); } /* ---------- knoppen ---------- */ .pbf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:var(--pbf-r-md); padding:11px 16px; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; font-family:inherit; text-decoration:none; line-height:1.2; } .pbf-btn--sm{ padding:9px 13px; font-size:12.5px; } .pbf-btn--block{ width:100%; } .pbf-btn--primary{ background:var(--pbf-teal); color:#fff; } .pbf-btn--primary:hover{ background:#0d6a67; } .pbf-btn--soft{ background:#f1f7f6; color:#0f5c59; } .pbf-btn--warn{ background:var(--pbf-amber); color:#fff; } .pbf-btn--accent{ background:var(--pbf-accent); color:#3d2f05; font-weight:700; } .pbf-btn--ghost{ background:#fff; border:1px solid #cfe2df; color:var(--pbf-ink); } .pbf-btn--ghost:hover{ background:var(--pbf-surface-2); } .pbf-btn--outline{ background:#fff; border:1px solid var(--pbf-teal); color:var(--pbf-teal); font-weight:700; } .pbf-btn--danger-ghost{ background:#fff; border:1px solid #e6bdb9; color:var(--pbf-danger); } .pbf-btn--onDark{ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; } .pbf-btn--linkDark{ background:transparent; border:0; color:rgba(255,255,255,.72); font-weight:500; padding:9px 6px; } .pbf-btn--icon{ background:#fff; border:1px solid #cfe2df; color:var(--pbf-ink); padding:7px 12px; font-size:14px; font-weight:700; } .pbf-btn:focus-visible, .pbf-chip:focus-visible, .pbf-stat:focus-visible, .pbf-solo:focus-visible{ outline:2px solid var(--pbf-teal); outline-offset:2px; } .pbf-btn[disabled]{ opacity:.55; cursor:not-allowed; } /* ---------- menu ---------- */ .pbf-menu{ position:relative; display:inline-block; } .pbf-menu__list{ position:absolute; right:0; top:44px; z-index:35; width:238px; padding:6px; background:#fff; border:1px solid var(--pbf-line); border-radius:12px; box-shadow:var(--pbf-sh-2); } /* Bij de onderste rij van een kaart hangt het menu buiten de kaartrand. Die kaart heeft overflow:hidden nodig voor haar afgeronde hoeken, dus we heffen dat enkel op zolang er ergens binnenin een menu openstaat. */ .pbf-cat:has(.pbf-menu__list:not([hidden])), .pbf-actionpanel:has(.pbf-menu__list:not([hidden])){ overflow:visible; } .pbf-menu__list--up{ top:auto; bottom:44px; } .pbf-menu__item{ display:block; width:100%; text-align:left; padding:9px 10px; border:0; border-radius:var(--pbf-r-sm); background:none; font-size:13px; color:#1d2624; cursor:pointer; font-family:inherit; text-decoration:none; } .pbf-menu__item:hover{ background:var(--pbf-surface-2); color:var(--pbf-ink); } .pbf-menu__item--danger{ color:var(--pbf-danger); font-weight:600; } .pbf-menu__sep{ border:0; border-top:1px solid var(--pbf-line); margin:4px 0; } /* ---------- modal ---------- */ /* Hoger dan de vaste sitebalk (z-index 1000), anders schuift die over de kop van het venster en is de titel plus de sluitknop onbereikbaar. */ .pbf-overlay{ position:fixed; inset:0; z-index:100000; background:rgba(18,51,48,.42); display:flex; justify-content:center; overflow:auto; padding:48px 18px; animation:pbf-fade .12s ease; } .pbf-modal{ width:100%; background:#fff; border-radius:var(--pbf-r-xl); box-shadow:var(--pbf-sh-3); animation:pbf-in .16s ease; color:var(--pbf-ink-2); font-family:"Poppins", sans-serif; } .pbf-modal *, .pbf-modal *::before, .pbf-modal *::after{ box-sizing:border-box; } .pbf-modal--dialog{ max-width:460px; padding:24px; align-self:center; } .pbf-modal--form{ max-width:620px; align-self:flex-start; } .pbf-modal--worksheet{ max-width:1000px; align-self:flex-start; } .pbf-modal__head{ display:flex; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid #eef3f1; } .pbf-modal__title{ margin:0; font-family:"Barlow Condensed", sans-serif; font-size:24px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--pbf-ink); } .pbf-modal__sub{ margin:0 0 12px; font-size:13px; color:var(--pbf-ink-3); } .pbf-modal__close{ margin-left:auto; width:32px; height:32px; border:1px solid var(--pbf-line); border-radius:var(--pbf-r-sm); background:#fff; color:#5b6a66; cursor:pointer; font-size:18px; line-height:1; } .pbf-modal__body{ padding:20px 24px; } .pbf-modal__text{ font-size:13.5px; color:var(--pbf-ink-2); } .pbf-modal__foot{ display:flex; align-items:center; gap:12px; padding:16px 24px; border-top:1px solid #eef3f1; background:var(--pbf-surface-2); border-radius:0 0 var(--pbf-r-xl) var(--pbf-r-xl); } .pbf-modal__foot--split .pbf-btn{ flex:1; } .pbf-modal__foot .pbf-btn--primary{ margin-left:auto; } .pbf-modal__foot--split .pbf-btn--primary{ margin-left:0; } .pbf-modal__note{ margin:0; margin-right:auto; font-size:12.5px; color:var(--pbf-ink-3); } @keyframes pbf-fade{ from{opacity:0} to{opacity:1} } @keyframes pbf-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} } /* form-onderdelen in modal */ /* Een eigen display-waarde wint van de browserregel achter `hidden`. Zonder deze regel toont een verborgen veld — bv. de prijs bij een activiteit zonder geldbeheer — zich alsnog. */ .pbf-overlay [hidden]{ display:none !important; } .pbf-field{ display:block; margin-bottom:14px; } .pbf-field__row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } .pbf-field__label{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pbf-ink-3); } .pbf-input{ width:100%; padding:10px 12px; border:1px solid #dbe6e2; border-radius:var(--pbf-r-sm); font-size:14px; font-family:inherit; color:var(--pbf-ink); } .pbf-input:focus{ outline:none; border-color:var(--pbf-teal); box-shadow:0 0 0 3px rgba(15,122,118,.12); } /* Een veld dat er invulbaar uitziet maar niets aanneemt, leest als een storing. */ .pbf-input[readonly]{ background:#f2f6f5; color:var(--pbf-ink-3); cursor:default; } .pbf-input[readonly]:focus{ border-color:#dbe6e2; box-shadow:none; } .pbf-input--area{ resize:vertical; min-height:130px; font-family:inherit; } .pbf-field__hint{ display:block; margin-top:5px; font-size:12px; line-height:1.45; color:var(--pbf-ink-3); text-transform:none; letter-spacing:0; font-weight:400; } .pbf-field-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:0 14px; } .pbf-token{ padding:4px 9px; border:1px solid #dbe6e2; border-radius:6px; background:#fff; font-size:11.5px; font-weight:600; color:var(--pbf-teal); cursor:pointer; font-family:inherit; } .pbf-token:hover{ background:var(--pbf-teal-soft); } .pbf-recipients{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px; max-height:110px; overflow-y:auto; } .pbf-recipient{ display:inline-flex; align-items:center; padding:4px 10px; background:var(--pbf-teal-soft); border:1px solid var(--pbf-teal-line); border-radius:999px; font-size:12px; color:#0f5c59; } .pbf-preview{ margin:12px 0; padding:12px 14px; background:var(--pbf-surface-2); border:1px solid var(--pbf-line); border-radius:var(--pbf-r-sm); } .pbf-preview__label{ margin:0 0 6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pbf-ink-3); } .pbf-preview__body{ margin:0; font-size:13px; color:var(--pbf-ink-2); white-space:pre-wrap; } .pbf-checkline{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--pbf-ink-2); } .pbf-note{ margin:12px 0; padding:12px 14px; border-radius:var(--pbf-r-sm); font-size:12.5px; } .pbf-note--amber{ background:var(--pbf-amber-soft); border:1px solid var(--pbf-amber-line); color:var(--pbf-amber-ink); } .pbf-note--icon{ display:flex; align-items:center; gap:8px; } .pbf-feedback{ margin-top:10px; padding:10px 12px; border-radius:var(--pbf-r-sm); font-size:13px; } .pbf-feedback.is-ok{ background:var(--pbf-teal-soft); color:#0a5c58; } .pbf-feedback.is-err{ background:#fbe6e4; color:var(--pbf-danger); } .pbf-segment{ display:flex; gap:8px; padding:0; border:0; margin:16px 0; } .pbf-segment legend{ padding:0; margin-bottom:8px; } .pbf-segment__opt{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border:1px solid var(--pbf-line); border-radius:var(--pbf-r-sm); background:#fff; font-size:13px; cursor:pointer; } .pbf-segment__opt.is-active{ background:var(--pbf-teal-soft); border-color:var(--pbf-teal); color:#0f5c59; font-weight:600; } .pbf-segment__opt input{ margin:0; } /* pairing modal */ .pbf-pair{ display:grid; grid-template-columns:1fr 1fr 1.1fr; } .pbf-pair__col{ padding:16px 18px; border-right:1px solid #eef3f1; } .pbf-pair__result{ padding:16px 18px; background:var(--pbf-surface-2); border-radius:0 0 var(--pbf-r-xl) 0; } .pbf-pair__label{ margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pbf-ink-3); } .pbf-pair__list{ list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto; } .pbf-pair__list li{ margin-bottom:8px; } .pbf-solo{ width:100%; text-align:left; padding:11px 13px; border:1px solid var(--pbf-line); border-radius:var(--pbf-r-md); background:#fff; cursor:pointer; font-family:inherit; } .pbf-solo.is-selected{ border-color:var(--pbf-teal); background:var(--pbf-teal-soft); } .pbf-solo__name{ display:block; font-size:13.5px; font-weight:600; color:var(--pbf-ink); } .pbf-solo__dupr{ display:block; font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--pbf-ink-3); } .pbf-solo__dupr--missing{ color:var(--pbf-amber-ink); } .pbf-solo__hint{ display:block; font-size:11px; color:#8a9995; margin-top:2px; } .pbf-proposal{ padding:14px; background:#fff; border:1px solid var(--pbf-line); border-radius:var(--pbf-r-md); margin-bottom:14px; } .pbf-proposal__pair{ margin:0; font-size:14px; font-weight:600; color:var(--pbf-ink); } .pbf-proposal__quality{ margin:4px 0; font-size:12.5px; color:var(--pbf-teal); } .pbf-proposal__quality[data-quality="wide"], .pbf-proposal__quality[data-quality="missing"]{ color:var(--pbf-warn-ink); } .pbf-proposal__sep{ margin:10px 0; border:0; border-top:1px solid var(--pbf-line); } .pbf-proposal__note{ margin:0 0 10px; font-size:12px; color:var(--pbf-ink-3); } .pbf-autopair{ padding:14px; background:#fff; border:1px solid var(--pbf-line); border-radius:var(--pbf-r-md); } .pbf-autopair__title{ margin:0 0 4px; font-size:13.5px; font-weight:600; color:var(--pbf-ink); } .pbf-autopair__sub{ margin:0 0 10px; font-size:12px; color:var(--pbf-ink-3); } /* swap modal */ .pbf-swap{ display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; gap:10px; margin:16px 0; } .pbf-swap__card{ padding:12px; border:1px solid var(--pbf-line); border-radius:var(--pbf-r-md); background:#fff; } .pbf-swap__card--new{ border-color:var(--pbf-teal); background:var(--pbf-teal-soft); } .pbf-swap__name{ margin:2px 0; font-size:14px; font-weight:600; color:var(--pbf-ink); } .pbf-swap__dupr{ margin:0; font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--pbf-ink-3); } .pbf-swap__arrow{ text-align:center; font-size:20px; color:var(--pbf-ink-3); } .pbf-quote{ margin:6px 0 0; padding:10px 14px; background:var(--pbf-surface-2); border-left:3px solid var(--pbf-line); font-size:13px; font-style:italic; color:var(--pbf-ink-2); } /* DUPR-history modal */ .pbf-dupr-table{ width:100%; border-collapse:collapse; font-size:13px; } .pbf-dupr-table th, .pbf-dupr-table td{ padding:8px 10px; text-align:left; border-bottom:1px solid #f2f5f3; } .pbf-dupr-table th{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pbf-ink-3); background:var(--pbf-surface-2); } .pbf-dupr-table td.is-conflict{ background:var(--pbf-warn-soft); color:var(--pbf-warn-ink); } /* toasts */ .pbf-toasts{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:95; display:grid; gap:8px; pointer-events:none; } .pbf-toast{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--pbf-ink); color:#fff; border-radius:12px; box-shadow:var(--pbf-sh-2); font-size:13.5px; pointer-events:auto; animation:pbf-in .16s ease; } .pbf-toast--ok{ background:var(--pbf-ink); } .pbf-toast--err{ background:var(--pbf-danger); } .pbf-toast__undo{ border:1px solid rgba(255,255,255,.3); background:none; color:#fff; border-radius:var(--pbf-r-sm); padding:7px 12px; cursor:pointer; font-family:inherit; } /* filter-hiding: JS zet is-hidden op rijen die niet aan de filter voldoen */ .pbf-cat.is-hidden{ display:none; } /* ---------- responsive ---------- */ @media (max-width:1024px){ .pbf-stats{ grid-template-columns:1fr 1fr; } .pbf-pair{ grid-template-columns:1fr; } .pbf-pair__col{ border-right:0; border-bottom:1px solid #eef3f1; } .pbf-pair__result{ order:-1; position:sticky; top:0; border-radius:0; } .pbf-row__actions .pbf-btn--ghost{ padding:9px 10px; } .pbf-row__email{ max-width:16ch; } .pbf-table__actions{ width:auto; } } @media (max-width:699px){ .pbf-manage{ padding:16px 14px 90px; } .pbf-head__title{ font-size:28px; } .pbf-actionpanel__head{ flex-wrap:wrap; } .pbf-actionpanel__hint{ flex:1 0 100%; margin:0; } /* In kolomrichting wordt flex-basis de hoogte, dus de vaste 106px van .pbf-tag moet weg. */ .pbf-actionitem{ flex-direction:column; align-items:stretch; gap:10px; } .pbf-actionitem .pbf-tag{ flex:0 0 auto; align-self:flex-start; } .pbf-actionitem__bedrag{ align-self:flex-start; } .pbf-actionitem .pbf-btn{ width:100%; min-height:44px; } .pbf-table thead{ display:none; } .pbf-table, .pbf-table tbody, .pbf-row{ display:block; width:100%; } .pbf-row{ display:grid; grid-template-columns:22px 1fr; gap:4px 10px; padding:14px 16px; border-bottom:1px solid #f2f5f3; } .pbf-row > td{ display:block; padding:0; border:0; } /* Het selectievakje links bovenaan, de rest eronder in één kolom. Per cel toegewezen in plaats van met een vast aantal rijen: DUPR, Partner en Betaald vallen weg als ze niet van toepassing zijn, en dan klopt een vast getal niet meer. */ .pbf-row > td:first-child{ grid-column:1; grid-row:1; align-self:start; width:auto; padding-left:0; } .pbf-row > td:not(:first-child){ grid-column:2; } /* In de gestapelde rij horen deze cellen bij de tekst ernaast, niet gecentreerd. */ .pbf-row__paid{ text-align:left; min-width:0; } .pbf-row__status, .pbf-dupr{ text-align:left; min-width:0; } .pbf-row--attention{ box-shadow:inset 3px 0 0 var(--pbf-amber); } .pbf-row--attention > td:first-child{ box-shadow:none; } .pbf-row__actions-inner{ justify-content:flex-start; flex-wrap:wrap; margin-top:10px; } .pbf-row__actions .pbf-btn{ min-height:44px; flex:1 1 auto; } .pbf-menu__list{ position:static; width:auto; box-shadow:none; background:var(--pbf-surface-2); margin-top:10px; } .pbf-menu__item{ padding:12px 10px; font-size:13.5px; } .pbf-bulkbar{ position:fixed; top:auto; bottom:0; left:0; right:0; border-radius:12px 12px 0 0; } .pbf-chips{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .pbf-chip{ scroll-snap-align:start; flex:0 0 auto; } .pbf-overlay{ padding:0; } .pbf-modal{ max-width:none; min-height:100%; border-radius:0; } .pbf-modal__foot{ position:sticky; bottom:0; border-radius:0; } } @media (prefers-reduced-motion:reduce){ .pbf-manage *{ animation:none !important; transition:none !important; } }