/* Werkvoorbereiding (PB) — module-stylesheet in het INTOS-ontwerp.
   Gebruikt de platform-tokens uit styles.css (--teal, --navy, --paper, --line,
   --muted, --ink, --radius, --canvas). Alleen pb-* klassen; hergebruikt waar het
   kan de platform-primitives (.card, .button, .badge, .table-wrap). */

.pb-app { display: flex; flex-direction: column; gap: 20px; }
.pb-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pb-empty { text-align: center; color: var(--muted); padding: 34px 16px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); }
.pb-note { margin: 0 0 14px; padding: 11px 14px; background: var(--teal-soft); color: #325963; border-radius: 9px; font-size: 11px; }
.pb-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 9px; font-weight: 600; color: var(--teal-dark); }

/* ---- Sub-navigatie -------------------------------------------------------- */
.pb-subnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 3px 14px rgba(33,50,54,.025); }
.pb-subnav-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--muted); transition: .15s; }
.pb-subnav-item > span { font-size: 14px; color: var(--teal-dark); }
.pb-subnav-item:hover { background: var(--canvas); color: var(--ink); }
.pb-subnav-item.active { background: var(--teal); color: #fff; box-shadow: 0 6px 18px rgba(0,160,225,.22); }
.pb-subnav-item.active > span { color: #fff; }

/* ---- Overzicht-hub -------------------------------------------------------- */
.pb-hub-lead { margin: 4px 2px 12px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.pb-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pb-hub-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; min-height: 132px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 14px rgba(33,50,54,.025); transition: .15s; }
.pb-hub-tile:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow); }
.pb-hub-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--teal-soft); color: var(--teal-dark); font-size: 20px; margin-bottom: 4px; }
.pb-hub-tile strong { font-size: 14px; }
.pb-hub-tile small { color: var(--muted); font-size: 10px; line-height: 1.5; }

/* ---- Projectenlijst ------------------------------------------------------- */
.pb-projects { display: flex; flex-direction: column; gap: 16px; }
.pb-list-toolbar { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.pb-list-toolbar .pb-search-icon { font-size: 18px; color: var(--muted); }
.pb-list-toolbar input { border: 0; background: transparent; height: 100%; padding: 0; font-size: 12px; }
.pb-list-toolbar input:focus { box-shadow: none; }
.pb-list-group + .pb-list-group { margin-top: 10px; }
.pb-list-group-title { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 2px 10px; }
.pb-list-group-title small { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9aa4a7; }
.pb-star-inline, .pb-project-arrow { color: var(--amber); }
.pb-project-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pb-project-card { position: relative; display: flex; align-items: stretch; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 14px rgba(33,50,54,.025); transition: .15s; overflow: hidden; }
.pb-project-card:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.pb-project-card.pb-spoed { border-left: 3px solid var(--red); }
.pb-follow { flex: none; width: 44px; border: 0; background: transparent; cursor: pointer; font-size: 19px; color: #c7cfd2; align-self: stretch; transition: .15s; }
.pb-follow:hover { color: var(--amber); }
.pb-follow.pb-followed { color: var(--amber); }
.pb-project-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 15px 6px 15px 2px; color: var(--ink); }
.pb-project-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-project-number { font-size: 10px; font-weight: 700; letter-spacing: .03em; background: var(--teal-soft); color: var(--teal-dark); border-radius: 6px; padding: 3px 8px; }
.pb-status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.pb-project-status-label { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pb-project-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.pb-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.pb-dot-sep { color: #c2cacd; }
.pb-project-arrow { flex: none; display: grid; place-items: center; width: 40px; font-size: 17px; color: var(--teal); }
.pb-dot-active { background: var(--green); }
.pb-dot-done { background: #97a2a6; }
.pb-dot-hold { background: var(--amber); }
.pb-dot-levering { background: var(--teal); }
.pb-dot-spoed { background: var(--red); }
.pb-spoed-badge { font-size: 8px; font-weight: 700; letter-spacing: .06em; background: #fbedee; color: var(--red); border-radius: 999px; padding: 3px 7px; }

/* ---- Projectdetail: hero + tabs ------------------------------------------ */
.pb-project-detail { display: flex; flex-direction: column; gap: 16px; }
.pb-detail-back { color: var(--muted); font-size: 11px; width: max-content; }
.pb-detail-back:hover { color: var(--teal-dark); }
.pb-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 32px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #282832 0%, #2f3550 60%, #0e5f80 135%); box-shadow: var(--shadow); }
.pb-hero.pb-spoed { background: linear-gradient(120deg, #3a2130 0%, #542c3a 55%, #b23a41 140%); }
.pb-hero::after { content: ''; position: absolute; width: 240px; height: 240px; border: 44px solid rgba(0,160,225,.12); right: -70px; top: -100px; border-radius: 50%; }
.pb-hero-body { position: relative; z-index: 1; min-width: 0; }
.pb-hero-number { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #9fd9f4; }
.pb-hero-body h2 { margin: 6px 0 12px; font-size: 26px; overflow-wrap: anywhere; }
.pb-hero-badges { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pb-hero-klant { font-size: 11px; color: #cdd6d9; }
.pb-hero-actions { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.pb-hero-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; transition: .15s; }
.pb-hero-btn:hover { background: rgba(255,255,255,.16); }
.pb-hero-btn.pb-followed { color: var(--amber); border-color: rgba(217,140,16,.5); }
.pb-badge { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pb-badge-active { background: #e7f6f1; color: var(--green); }
.pb-badge-done { background: #eef1f2; color: #5c676b; }
.pb-badge-hold { background: #fff4df; color: var(--amber); }
.pb-badge-levering { background: var(--teal-soft); color: var(--teal-dark); }
.pb-badge-spoed { background: #fbedee; color: var(--red); }
.pb-detail-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.pb-detail-tabs a { flex: none; padding: 12px 15px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: .15s; white-space: nowrap; }
.pb-detail-tabs a:hover { color: var(--ink); }
.pb-detail-tabs a.pb-tab-active { color: var(--teal-dark); border-bottom-color: var(--teal); }
.pb-detail-panel { padding: 22px; }

/* ---- Fasen / werkvolgorde ------------------------------------------------- */
.pb-fasen-lijst { display: flex; flex-direction: column; gap: 10px; }
.pb-fase { border: 1px solid var(--line); border-left: 3px solid #cfd6d9; border-radius: 10px; padding: 13px 15px; background: var(--paper); }
.pb-fase-bezig { border-left-color: var(--teal); background: #f5fbfe; }
.pb-fase-klaar { border-left-color: var(--green); background: #f2faf7; }
.pb-fase-head { display: flex; align-items: center; gap: 12px; }
.pb-fase-status { font-size: 18px; line-height: 1; }
.pb-fase-titel { display: flex; flex-direction: column; }
.pb-fase-titel strong { font-size: 13px; }
.pb-fase-titel small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pb-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pb-check-box { flex: none; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; transition: .15s; }
.pb-check-box:hover { border-color: var(--teal); }
.pb-check-done .pb-check-box { background: var(--green); border-color: var(--green); }
.pb-check-label { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.pb-check-done .pb-check-label { color: var(--muted); text-decoration: line-through; }
.pb-check-state { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* ---- Workitems (opleverpunten / meerwerk) --------------------------------- */
.pb-workitems-head h3 { font-size: 13px; margin: 0 0 12px; }
.pb-workitem-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pb-workitem-add input { flex: 1; min-width: 160px; height: 38px; }
.pb-workitem-add input[name="bericht"] { flex: 2; }
.pb-btn-sm { min-height: 38px; }
.pb-workitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pb-workitem { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid #cfd6d9; border-radius: 10px; background: var(--paper); }
.pb-wi-open { border-left-color: var(--amber); }
.pb-wi-behandeling { border-left-color: var(--teal); }
.pb-wi-afgerond { border-left-color: var(--green); background: #f7faf9; }
.pb-workitem-main { flex: 1; min-width: 0; }
.pb-workitem-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pb-workitem-head strong { font-size: 13px; overflow-wrap: anywhere; }
.pb-workitem-status { flex: none; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pb-workitem-main p { margin: 5px 0; font-size: 12px; color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; }
.pb-workitem-main small { font-size: 10px; color: var(--muted); }
.pb-workitem-actions { flex: none; display: flex; gap: 6px; }
.pb-mini { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; color: var(--muted); font-size: 13px; transition: .15s; }
.pb-mini:hover { border-color: var(--teal); color: var(--teal-dark); }
.pb-mini-danger:hover { border-color: #f0cbce; color: var(--red); }

/* ---- Actiepunten / bestellingen ------------------------------------------ */
.pb-acties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-actie { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid #edf1f2; font-size: 12px; }
.pb-actie:last-child { border-bottom: 0; }
.pb-actie-box { flex: none; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 12px; }
.pb-actie-done .pb-actie-box { background: var(--green); border-color: var(--green); }
.pb-actie-done span:last-child { color: var(--muted); text-decoration: line-through; }

/* ---- Secties (materiaal / notities) -------------------------------------- */
.pb-sectie + .pb-sectie { margin-top: 16px; }
.pb-sectie h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 6px; }
.pb-sectie p { margin: 0; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Interactieve actiepunten + bewerkbare secties (schrijfslice) */
.pb-actie-box { cursor: pointer; padding: 0; background: #fff; transition: .15s; }
.pb-actie-box:hover { border-color: var(--green); }
.pb-actie-tekst { flex: 1; }
.pb-actie-done .pb-actie-tekst { color: var(--muted); text-decoration: line-through; }
.pb-actie-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pb-actie-add input { flex: 1; min-width: 200px; height: 38px; }
.pb-secties { display: flex; flex-direction: column; gap: 18px; }
.pb-sectie-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 6px; }
.pb-sectie-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; line-height: 1.6; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; background: #fff; margin-bottom: 8px; }
.pb-sectie-input:focus { outline: none; border-color: var(--teal); }
.pb-btn-sm { height: 34px; padding: 0 14px; font-size: 12px; }

/* Handmatige order-mail-parse (Leveringen) */
.pb-order-paste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding: 16px; }
.pb-order-paste h3 { margin: 0; font-size: 14px; }
.pb-order-paste input[name="onderwerp"] { height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12px; }
.pb-order-paste input[name="onderwerp"]:focus, .pb-order-paste textarea:focus { outline: none; border-color: var(--teal); }
.pb-order-paste button { align-self: flex-start; }

/* Gereedschapskist */
.pb-tools { display: flex; flex-direction: column; gap: 16px; }
.pb-tool { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.pb-tool h3 { margin: 0; font-size: 15px; }
.pb-tool input[type="file"] { font-size: 12px; }
.pb-tool-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); max-width: 320px; }
.pb-tool-field input { height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink, inherit); }
.pb-tool-field input:focus { outline: none; border-color: var(--teal); }
.pb-tool button { align-self: flex-start; }
.pb-pdf-list ol { margin: 0; padding-left: 20px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.pb-cnc-result:empty { display: none; }
.pb-cnc-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; padding: 12px 14px; background: var(--wash, #f4f7f8); border-radius: 10px; font-size: 12px; }
.pb-cnc-summary strong { font-size: 16px; color: var(--teal-dark, inherit); }
.pb-cnc-result table { font-size: 12px; }
.pb-tool-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pb-tool-row .pb-tool-field { max-width: 120px; }
.pb-tool-row .pb-tool-field input { width: 90px; }

/* Meubelbibliotheek */
.pb-meubels { display: flex; flex-direction: column; gap: 16px; }
.pb-meubel-form { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.pb-meubel-form h3 { margin: 0; font-size: 15px; }
.pb-meubel-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pb-meubel-card { list-style: none; }
.pb-meubel-open { display: block; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-decoration: none; color: inherit; transition: .15s; }
.pb-meubel-open:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.pb-meubel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pb-meubel-head strong { font-size: 13px; }
.pb-meubel-type { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pb-meubel-open small { color: var(--muted); font-size: 11px; }

/* Embedded echte Werkvoorbereiding-app (iframe onder /pb-app/) — full-bleed:
   de app vult de hele contentruimte rechts van de sidebar, onder de topbar. */
.content:has(.pb-embed-wrap) { max-width: none; padding: 0; margin: 0; }
.pb-embed-wrap { width: 100%; height: calc(100vh - 76px); min-height: 480px; }
.pb-embed { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
@media (max-width: 520px) { .pb-embed-wrap { height: calc(100vh - 64px); } }

/* ---- Info-grid ------------------------------------------------------------ */
.pb-detail-info { display: grid; grid-template-columns: minmax(120px, .6fr) minmax(0, 1.4fr); gap: 0; margin: 0; }
.pb-detail-row { display: contents; }
.pb-detail-row dt { padding: 10px 12px 10px 0; font-size: 10px; color: var(--muted); border-bottom: 1px solid #edf1f2; }
.pb-detail-row dd { margin: 0; padding: 10px 0; font-size: 12px; border-bottom: 1px solid #edf1f2; overflow-wrap: anywhere; }

/* ---- Panel-headers (order/overdracht detail) ----------------------------- */
.pb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pb-panel-head h2 { margin: 4px 0 0; font-size: 20px; }
.pb-order-detail, .pb-overdracht-detail { display: flex; flex-direction: column; gap: 14px; }
.pb-order-card-detail h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 20px 0 8px; }
.pb-order-historie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.pb-order-historie time { color: var(--muted); margin-right: 8px; }

/* ---- Generieke lijst-secties (planning/orders/overdracht/telstaten/todo) -- */
.pb-planning, .pb-orders, .pb-overdracht, .pb-telstaten, .pb-todo, .pb-contacts, .pb-calendar { display: flex; flex-direction: column; gap: 14px; }
.pb-planning > h2, .pb-orders > h2, .pb-overdracht > h2, .pb-telstaten > h2, .pb-todo > h2, .pb-contacts > h2, .pb-calendar > h2 { font-size: 18px; margin: 0; }
.pb-orders ul, .pb-overdracht ul, .pb-telstaten ul, .pb-todo ul, .pb-contacts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.pb-planning-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 10px; color: var(--muted); }
.pb-planning-refresh { align-self: flex-start; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 600; cursor: pointer; }
.pb-planning-refresh:hover { border-color: var(--teal); color: var(--teal-dark); }
.pb-planning-person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 3px 14px rgba(33,50,54,.025); }
.pb-planning-person h3 { font-size: 13px; margin: 0 0 12px; }
.pb-planning-person table { width: 100%; border-collapse: collapse; }
.pb-planning-person th { text-align: left; padding: 8px 10px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
.pb-planning-person td { padding: 9px 10px; font-size: 11px; border-bottom: 1px solid #edf1f2; }

/* ---- Orders / leveringen -------------------------------------------------- */
.pb-order-card, .pb-overdracht-card, .pb-mijn-punt, .pb-telstaat, .pb-todo-lijst, .pb-contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid #cfd6d9; border-radius: 10px; box-shadow: 0 3px 14px rgba(33,50,54,.025);
}
.pb-order-card > div, .pb-mijn-punt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11px; }
.pb-order-card.pb-status-ontvangen { border-left-color: var(--green); }
.pb-order-card.pb-status-besteld { border-left-color: var(--amber); }
.pb-order-supplier { font-weight: 600; font-size: 12px; }
.pb-order-status, .pb-punt-status, .pb-todo-soort { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--canvas); border-radius: 999px; padding: 3px 8px; }
.pb-order-card a, .pb-overdracht-card a, .pb-telstaat a, .pb-todo-lijst a { color: var(--teal-dark); font-weight: 600; font-size: 11px; }

/* ---- Overdracht ----------------------------------------------------------- */
.pb-overdracht-shared, .pb-overdracht-mine, .pb-telstaten-lijst, .pb-telstaat-panel, .pb-todo-lijsten, .pb-todo-panel { display: flex; flex-direction: column; gap: 8px; }
.pb-overdracht-shared h3, .pb-overdracht-mine h3, .pb-telstaten-lijst h3, .pb-telstaat-panel h3, .pb-todo-lijsten h3, .pb-todo-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 0 2px; }
.pb-mijn-punt.pb-status-klaar { border-left-color: var(--green); }
.pb-mijn-punt.pb-status-bezig { border-left-color: var(--teal); }
.pb-punt-tekst { font-weight: 600; }

/* ---- Telstaten ------------------------------------------------------------ */
.pb-telstaat.pb-telstaat-active { border-color: var(--teal); }
.pb-telstaat-items { width: 100%; border-collapse: collapse; }
.pb-telstaat-items th { text-align: left; padding: 8px 10px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
.pb-telstaat-items td { padding: 9px 10px; font-size: 11px; border-bottom: 1px solid #edf1f2; }
.pb-telstaat-bijlage { color: var(--teal-dark); font-weight: 600; }

/* ---- To-do ---------------------------------------------------------------- */
.pb-todo-lijst.pb-todo-active { border-color: var(--teal); }
.pb-todo-items { display: flex; flex-direction: column; gap: 2px; }
.pb-todo-item { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid #edf1f2; font-size: 12px; }
.pb-todo-item input { width: 16px; height: 16px; }
.pb-todo-done .pb-todo-tekst { color: var(--muted); text-decoration: line-through; }
.pb-todo-priority { background: #fffaf0; }
.pb-todo-tekst { flex: 1; }
.pb-todo-aantal { background: var(--canvas); border-radius: 6px; padding: 2px 7px; font-size: 10px; color: var(--muted); }
.pb-todo-badge { font-size: 8px; font-weight: 700; text-transform: uppercase; background: #fff4df; color: var(--amber); border-radius: 999px; padding: 3px 7px; }
.pb-todo-cat { font-size: 9px; color: var(--muted); }

/* ---- Contacten ------------------------------------------------------------ */
.pb-contacts-search { display: flex; align-items: center; height: 42px; padding: 0 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.pb-contacts-search input { border: 0; background: transparent; height: 100%; font-size: 12px; }
.pb-contacts-search input:focus { box-shadow: none; }
.pb-contact-card { align-items: flex-start; }
.pb-contact-card > div { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.pb-contact-card h3 { font-size: 13px; margin: 0 0 2px; }
.pb-contact-card span { color: var(--muted); }
.pb-contact-card strong { color: var(--ink); }
.pb-contact-hidden { opacity: .6; }
.pb-hidden-badge, .pb-bron-badge { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 3px 7px; width: max-content; }
.pb-hidden-badge { background: #fbedee; color: var(--red); }
.pb-bron-badge { background: var(--teal-soft); color: var(--teal-dark); }

/* ---- Kalender ------------------------------------------------------------- */
.pb-cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-cal-row { display: grid; grid-template-columns: 96px 92px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 9px; font-size: 12px; }
.pb-cal-overlay { border-left-color: var(--amber); }
.pb-cal-row time { font-weight: 600; color: var(--ink); }
.pb-cal-source { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pb-cal-title { overflow-wrap: anywhere; }
.pb-cal-visibility { font-size: 9px; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 720px) {
  .pb-detail-panel { padding: 16px; }
  .pb-hero { padding: 22px; }
  .pb-hero-body h2 { font-size: 21px; }
  .pb-project-grid, .pb-hub-grid { grid-template-columns: 1fr; }
  .pb-detail-info { grid-template-columns: 1fr; }
  .pb-detail-row dt { border-bottom: 0; padding-bottom: 0; }
  .pb-detail-row dd { padding-top: 2px; }
  .pb-cal-row { grid-template-columns: 84px 1fr; }
  .pb-cal-source, .pb-cal-visibility { display: none; }
}