/* Portaalschil (fase 1, docs/onderzoek hoofdstuk 2.2). Formaat volgt de body-klassen uit smart.js:
   v-desk en v-tablet = zijbalk links, v-phone = balk onderin (maximaal vijf onderdelen). */
:root{--portaal-rail:76px;--portaal-balk:60px}
.portaal-nav{position:fixed;left:0;top:0;bottom:0;width:var(--portaal-rail);z-index:6;display:flex;flex-direction:column;gap:4px;padding:14px 8px;background:var(--surface);border-right:1px solid var(--line)}
.portaal-main{margin-left:var(--portaal-rail);min-width:0}
.portaal-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;line-height:1.1;text-align:center;min-height:44px}
.portaal-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portaal-item:hover{background:var(--surface-2);color:var(--ink)}
.portaal-item.active{background:var(--accent-soft);color:var(--accent)}
.portaal-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* AFW-027: onderdelen die binnenkort komen: onder een lijn, gedempt, met label; niet op de telefoon */
.portaal-scheiding{height:1px;background:var(--line);margin:8px 6px}
.portaal-item.binnenkort{color:var(--muted);opacity:.7}
.portaal-item.binnenkort:hover,.portaal-item.binnenkort.active{opacity:1}
.portaal-item.binnenkort em{font-style:normal;font-size:9px;font-weight:600;line-height:1;padding:2px 3px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line)}
body.v-phone .portaal-scheiding,body.v-phone .portaal-item.binnenkort{display:none}
.binnenkort-kop{display:flex;gap:14px;align-items:center}
.binnenkort-kop svg{width:40px;height:40px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.binnenkort-punten{margin:0;padding-left:20px;display:grid;gap:6px}

/* telefoon: balk onderin; Smart's eigen mobiele balk (totaal, Opslaan, Word) schuift erboven */
body.v-phone .portaal-nav{top:auto;right:0;width:auto;height:calc(var(--portaal-balk) + env(safe-area-inset-bottom));flex-direction:row;justify-content:space-around;gap:0;padding:4px 8px env(safe-area-inset-bottom);border-right:0;border-top:1px solid var(--line)}
body.v-phone .portaal-main{margin-left:0;padding-bottom:calc(var(--portaal-balk) + env(safe-area-inset-bottom))}
body.v-phone .portaal-item{flex:1;max-width:104px;padding:6px 4px;justify-content:center}
body.v-phone.bar .mobilebar{bottom:calc(var(--portaal-balk) + env(safe-area-inset-bottom));padding-bottom:10px}
body.bar:not(.v-phone) .mobilebar{left:var(--portaal-rail)}
/* toetsenstrook of vergrendeld scherm: navigatie weg */
body.keys .portaal-nav,body.locked .portaal-nav{display:none}
@media print{.portaal-nav{display:none}.portaal-main{margin:0;padding:0}}

/* subtabs in het portaal-Beheer mogen op smalle schermen scrollen in plaats van te breken */
.portaal-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.portaal-tabs button{white-space:nowrap}

/* tabellen die op de telefoon kaarten worden: zet data-label op elke cel */
body.v-phone table.kaarten thead{display:none}
body.v-phone table.kaarten,body.v-phone table.kaarten tbody,body.v-phone table.kaarten tr,body.v-phone table.kaarten td{display:block;width:100%}
body.v-phone table.kaarten tr{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:10px;background:var(--surface)}
body.v-phone table.kaarten td{border:0;padding:4px 0}
body.v-phone table.kaarten td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);margin-bottom:2px}

/* AFW-028: feedback */
.f-soort{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.fb-lijstkop{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.fb-filter{min-width:260px}
.fb-lijst{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.fb-melding{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface)}
.fb-kop{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fb-nr{font-family:var(--f-num);font-size:12px;color:var(--muted)}
.fb-onderwerp{font-size:15px;margin:8px 0 4px;color:var(--ink)}
.fb-tekst{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-meta{margin:6px 0 0}
.fb-reactie{margin-top:10px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 6px 6px 0}
.fb-reactie .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:4px}
.fb-afhandelen{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.fb-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
body.v-phone .fb-filter{min-width:0;width:100%}

/* AFW-030: vestiging in een chip die je standaard kunt maken */
.chip-link{border:0;background:none;padding:0;min-height:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.chip-link:hover{color:var(--accent)}

/* AFW-032: uitleg en signalen bij prijzenbladen */
.pb-uitleg summary{cursor:pointer;list-style:none}
.pb-uitleg summary::-webkit-details-marker{display:none}
.pb-uitleg summary .h2::after{content:" ▾";color:var(--muted)}
.pb-uitleg ul,.pb-signalen ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.pb-signalen{border-color:var(--warn, #b7791f)}
.pb-klanten{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.pb-klanten>div{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--ink)}
.pb-grid{margin-top:14px}

/* gebruikersmenu achter drie puntjes, rechtsboven in elke kop */
.gebruikersmenu{position:relative}
.gm-knop{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 6px 5px 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font-size:13px}
.gm-knop::-webkit-details-marker{display:none}
.gm-knop:hover,.gebruikersmenu[open] .gm-knop{border-color:var(--accent)}
.gm-knop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gm-knop svg{width:20px;height:20px;fill:currentColor;color:var(--muted)}
.gm-paneel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;padding:6px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 28px rgb(0 0 0 / .16)}
.gm-wie{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.gm-wie b{color:var(--ink);font-size:14px}
.gm-paneel form{margin:0}
.gm-item{display:block;width:100%;text-align:left;border:0;border-radius:6px;background:none;padding:9px 10px;font-size:13.5px;color:var(--ink);white-space:nowrap}
.gm-item:hover:not(:disabled){background:var(--surface-2)}
.gm-item:disabled{color:var(--muted)}
body.v-phone .gm-naam{display:none}
body.v-phone .gm-knop{padding:6px}
body.touch .gm-item{min-height:44px}