/* Tweaks panel, Studio 27 glass styling */
#tw-panel{position:fixed;right:20px;bottom:20px;z-index:300;width:288px;border-radius:20px;overflow:hidden;
  font-family:var(--font-display,system-ui);color:var(--ink,#230F23);
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(245,240,247,.74));
  -webkit-backdrop-filter:saturate(160%) blur(22px);backdrop-filter:saturate(160%) blur(22px);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 60px rgba(60,40,80,.28),inset 0 1px 0 rgba(255,255,255,.9);}
#tw-panel .tw-head{display:flex;align-items:center;gap:8px;padding:13px 14px;cursor:grab;border-bottom:1px solid rgba(150,120,150,.16);}
#tw-panel .tw-head:active{cursor:grabbing;}
#tw-panel .tw-grip{width:26px;height:5px;border-radius:99px;background:rgba(120,100,130,.3);}
#tw-panel .tw-head b{font-weight:800;font-size:14px;letter-spacing:-0.01em;}
#tw-panel .tw-sub{font-family:var(--font-body,sans-serif);font-weight:600;font-size:11px;color:var(--ink-4,#9E919E);}
#tw-panel .tw-x{margin-left:auto;width:26px;height:26px;border:none;border-radius:50%;cursor:pointer;background:rgba(150,120,150,.12);color:var(--ink-3,#6B5B6B);font-size:12px;}
#tw-panel .tw-x:hover{background:rgba(150,120,150,.22);}
#tw-panel .tw-body{padding:14px;display:flex;flex-direction:column;gap:16px;}
#tw-panel .tw-row label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4,#9E919E);margin-bottom:8px;}
#tw-panel .tw-seg{display:flex;gap:4px;background:rgba(150,120,150,.10);border-radius:12px;padding:4px;}
#tw-panel .tw-seg button{flex:1;border:none;cursor:pointer;background:none;font-family:inherit;font-weight:700;font-size:12px;color:var(--ink-3,#6B5B6B);padding:8px 4px;border-radius:9px;transition:all .25s cubic-bezier(.32,1.12,.4,1);}
#tw-panel .tw-seg button.on{background:#fff;color:var(--ink,#230F23);box-shadow:0 2px 8px rgba(60,40,80,.16);}
#tw-panel .tw-sw{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
#tw-panel .tw-sw button{display:flex;align-items:center;gap:8px;border:1.5px solid rgba(150,120,150,.18);cursor:pointer;background:rgba(255,255,255,.5);font-family:inherit;font-weight:700;font-size:12px;color:var(--ink-2,#3A2A3A);padding:8px 10px;border-radius:11px;transition:all .25s cubic-bezier(.32,1.12,.4,1);}
#tw-panel .tw-sw button span{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
#tw-panel .tw-sw button.on{border-color:var(--s27-blue,#3083DC);box-shadow:0 0 0 3px rgba(48,131,220,.16);background:#fff;}
@media(max-width:560px){#tw-panel{right:12px;left:12px;width:auto;bottom:12px;}}

/* ============================================================
   v2 UX-wijzigingen, component-styling (override-laag)
   ============================================================ */

/* SA&E-namen kort bij een taak/project (geen foto-iconen) */
.sae-line{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body,sans-serif);font-weight:700;font-size:12px;color:var(--ink-3,#6B5B6B);}
.sae-line svg{flex:none;color:var(--ink-4,#9E919E);}
.detail-sub.sae-line{text-transform:none;letter-spacing:0;font-size:13px;}
.run-row .sae-line,.projcol-card .sae-line,.done-row .sae-line{margin:2px 0;}

/* Homepage: 1 kolom als "Recent afgerond" leeg is */
.proj-overview.one-col{grid-template-columns:1fr;}

/* PROJECTDETAIL, deliverables inline in het overzicht */
.deliv-inline{margin:0 0 6px;}
.deliv-inline .subtask-files{padding:0;}
.deliv-inline .deliv-file{flex-wrap:wrap;}
.deliv-inline .df-act{flex-wrap:wrap;}

/* PROJECTDETAIL, compacte tijdlijn */
.timeline-mini{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 4px;}
.timeline-mini .tl-step{display:inline-flex;align-items:center;gap:7px;}
.timeline-mini .tl-dot{width:16px;height:16px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--paper-3,#F1EBE2);}
.timeline-mini .tl-dot.done{background:var(--s27-green,#12AC4E);}
.timeline-mini .tl-dot.wait{background:var(--s27-orange,#F66131);}
.timeline-mini .tl-lab{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-2,#3A2A3A);}
.timeline-mini .tl-lab.muted{color:var(--ink-4,#9E919E);}
.timeline-mini .tl-line{width:14px;height:2px;background:var(--line,#E7DFD3);flex:none;}

/* Goedgekeurde taak, klikbaar om bestanden te tonen */
.approved-row.approved-clickable{cursor:pointer;background:var(--glass-fill,rgba(255,255,255,.6));border:1px solid var(--glass-border,rgba(255,255,255,.85));border-radius:12px;padding:9px 12px;transition:box-shadow .15s;}
.approved-row.approved-clickable:hover{box-shadow:0 4px 14px rgba(60,40,80,.10);}
.approved-row .ar-files-hint{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-weight:700;font-size:11.5px;color:var(--ink-4,#9E919E);}
.approved-row.approved-clickable .chev{transition:transform .2s;color:var(--ink-4,#9E919E);}
.approved-row.approved-clickable.open .chev{transform:rotate(180deg);}
.approved-files{margin:2px 0 8px;}
.approved-files .subtask-files{padding:6px 0 0;}

/* chat-header: met wie chat de klant */
.dc-head .dc-who{margin-left:auto;display:inline-flex;align-items:center;gap:7px;}
.dc-head .dc-who .dc-av{width:24px;height:24px;border-radius:50%;background:var(--s27-blue,#3083DC);color:#fff;font-family:var(--font-display);font-weight:800;font-size:10px;display:flex;align-items:center;justify-content:center;flex:none;}
.dc-head .dc-who .dc-sub{margin-left:0;}

/* PROJECTCHAT, ruimer venster (was te klein): de aside vult de hoogte, berichten scrollen, invoer plakt onderaan */
.detail-chat{min-height:560px;}
.detail-chat .dc-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.detail-chat .dc-body .chat-list{flex:1 1 auto;min-height:180px;overflow-y:auto;margin-bottom:12px;padding-right:2px;}
.detail-chat .dc-body .chat-input{flex:none;}
@media(max-width:980px){.detail-chat{min-height:0;}.detail-chat .dc-body{height:auto;overflow:visible;}.detail-chat .dc-body .chat-list{min-height:52vh;}}
/* Read-only chat bij een afgerond project: historie blijft zichtbaar, geen invoer */
.chat-readonly{display:flex;align-items:center;gap:7px;flex:none;font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--ink-4,#9E919E);background:var(--paper-2,#FAF7F2);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-top:4px;}
.chat-readonly svg{flex:none;color:var(--s27-green,#12AC4E);}

/* ACTIEVE PROJECTEN, kolommen per tak */
.dienst-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;align-items:start;}
.dienst-col{background:var(--glass-fill,rgba(255,255,255,.6));border:1px solid var(--glass-border,rgba(255,255,255,.85));border-top:4px solid var(--c,var(--s27-blue));border-radius:18px;padding:14px 14px 16px;box-shadow:0 6px 22px rgba(60,40,80,.07);}
.dienst-col .dienst-head{margin-bottom:12px;}
.dienst-col .dienst-head h3{font-size:15.5px;}
.dienst-col .dienst-ic{width:36px;height:36px;border-radius:11px;}
.dienst-col .dienst-ic .disc-stamp{width:24px;height:24px;}
.dienst-col .dienst-n{background:var(--c-soft,rgba(48,131,220,.12));color:var(--c-ink,var(--s27-blue-ink));border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;}
.dienst-col .proj-list{display:flex;flex-direction:column;gap:9px;}
.projcol-card{width:100%;text-align:left;cursor:pointer;background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-left:4px solid var(--c,var(--s27-blue));border-radius:13px;padding:11px 13px;display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s;}
.projcol-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(60,40,80,.10);}
.projcol-card .pc-name{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-0.01em;color:var(--ink,#230F23);}
.projcol-card .pc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.projcol-card .pc-deliv{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--c-ink,var(--s27-blue-ink));}
@media(max-width:640px){.dienst-cols{grid-template-columns:1fr;}}

/* ===== Lopende-projectlijst (platte hoofdtaak-lijst met multi-discipline-chips) ===== */
.projflat-list{display:flex;flex-direction:column;gap:10px;}
.projflat-card{width:100%;text-align:left;cursor:pointer;background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-left:4px solid var(--c,var(--s27-blue));border-radius:14px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;transition:transform .15s,box-shadow .15s;}
.projflat-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(60,40,80,.10);}
.projflat-card .pf-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.projflat-card .pf-name{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-0.01em;color:var(--ink,#230F23);}
.projflat-card .pf-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.projflat-card .pf-foot .sae-line{font-size:11.5px;}
.projflat-card .pc-deliv{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--s27-green-ink);}
/* discipline-chips */
.disc-chips{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.disc-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:800;font-size:11.5px;line-height:1;color:var(--c-ink,var(--s27-blue-ink));background:var(--c-soft,rgba(48,131,220,.12));border:1px solid color-mix(in srgb,var(--c,var(--s27-blue)) 22%,transparent);border-radius:999px;padding:5px 11px 5px 8px;white-space:nowrap;}
.disc-chip .disc-chip-ic{width:14px;height:14px;object-fit:contain;flex:none;}
.disc-chip svg{width:13px;height:13px;flex:none;}
@media(max-width:560px){.projflat-card{align-items:flex-start;flex-direction:column;gap:9px;}}
/* ---- Projecten geclusterd per actiepunt, ≥2 kolommen ---- */
.projclusters{display:flex;flex-direction:column;gap:28px;}
.projcluster-head{display:flex;align-items:center;gap:12px;margin:0 2px 13px;}
.projcluster-head .pc-dot{width:11px;height:11px;border-radius:50%;background:var(--c,var(--s27-blue));flex:none;box-shadow:0 0 0 4px var(--c-soft,rgba(48,131,220,.16));}
.projcluster-head .pc-htx{min-width:0;flex:1;}
.projcluster-head h3{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--ink,#230F23);margin:0;}
.projcluster-head p{font-family:var(--font-body);font-size:12.5px;color:var(--ink-3,#6B5B6B);margin:2px 0 0;}
.projcluster-head .pc-count{font-family:var(--font-display);font-weight:800;font-size:12px;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--c-soft,rgba(48,131,220,.14));color:var(--c-ink,var(--s27-blue-ink));display:flex;align-items:center;justify-content:center;flex:none;}
.projflat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch;}
.projflat-grid .projflat-card{height:100%;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:11px;}
.projflat-grid .projflat-card .pf-foot{width:100%;}
.pf-name--calm{font-weight:600!important;}
@media(max-width:760px){.projflat-grid{grid-template-columns:1fr;}}

/* ===== Proces-overzicht in de projectdetail (stand van zaken) ===== */
.proces-panel{background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:16px;padding:16px 18px;margin:0 0 18px;}
.proces-h{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink,#230F23);margin:16px 0 9px;}
.proces-h svg{color:var(--ink-3);}
.proces-h-do{margin:0 0 9px;}
.proces-acties{display:flex;flex-direction:column;gap:8px;}
.proces-actie{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;border-radius:12px;padding:11px 13px;font-family:var(--font-display);font-weight:700;font-size:13.5px;text-decoration:none;border:1px solid transparent;transition:transform .12s,box-shadow .12s;}
.proces-actie:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(60,40,80,.10);}
.proces-actie .pa-ic{flex:none;display:inline-flex;}
.proces-actie .pa-tx{flex:1;min-width:0;}
.proces-actie svg{flex:none;}
.act-fb{background:var(--s27-yellow-soft,#FEF3C7);border-color:color-mix(in srgb,var(--s27-yellow,#F2C14E) 45%,transparent);color:var(--s27-yellow-ink,#92740b);}
.act-meet{background:var(--s27-blue-soft,rgba(48,131,220,.10));border-color:color-mix(in srgb,var(--s27-blue,#3083DC) 30%,transparent);color:var(--s27-blue-ink,#1F5FA8);}
.act-info{background:var(--paper,#fff);border-color:var(--line);color:var(--ink-2);cursor:default;}
.act-info:hover{transform:none;box-shadow:none;}
.proces-allgood{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--s27-green-ink,#147A50);background:var(--s27-green-soft,rgba(18,172,78,.10));border-radius:12px;padding:11px 13px;}
.proces-list{display:flex;flex-direction:column;gap:7px;}
.proces-step{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--font-body);font-size:13.5px;color:var(--ink-2);}
.proces-dot{flex:none;width:18px;height:18px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;background:var(--s27-green,#12AC4E);color:#fff;}
.proces-step-nm{font-weight:600;color:var(--ink);}
.proces-links{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.proces-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--s27-blue-ink,#1F5FA8);background:var(--s27-blue-soft,rgba(48,131,220,.10));border-radius:999px;padding:4px 11px;text-decoration:none;}
.proces-link:hover{background:color-mix(in srgb,var(--s27-blue,#3083DC) 18%,transparent);}
.proces-loopt{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:13px;color:var(--ink-3);margin-top:12px;}
.proces-loopt svg{color:var(--ink-4);flex:none;}
.proces-loopt b{color:var(--ink-2);}
/* shoot-modus van de plan-picker: vaste locatie i.p.v. fysiek/online-keuze */
.plan-locnote{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-3);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:10px;padding:9px 12px;margin-bottom:12px;}
.plan-locnote svg{color:var(--ink-4);flex:none;}

/* 'Nieuwe taak klaar'-melding bovenaan het proces-overzicht */
.proces-newtask{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--s27-blue-ink,#1F5FA8);background:var(--s27-blue-soft,rgba(48,131,220,.10));border:1px solid color-mix(in srgb,var(--s27-blue,#3083DC) 28%,transparent);border-radius:12px;padding:11px 13px;margin-bottom:14px;}
.proces-newtask svg{flex:none;}

/* In-portal feedback-kaart (bekijk oplevering + direct goedkeuren/feedback) */
.fbc{background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:14px;padding:13px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px;}
.fbc-embed iframe{width:100%;}
.fbc-nm{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink);}
.fbc-views{display:flex;flex-direction:column;gap:7px;}
.fbc-view{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--s27-blue-ink,#1F5FA8);background:var(--s27-blue-soft,rgba(48,131,220,.10));border:1px solid color-mix(in srgb,var(--s27-blue,#3083DC) 22%,transparent);border-radius:10px;padding:9px 12px;text-decoration:none;}
.fbc-view:hover{background:color-mix(in srgb,var(--s27-blue,#3083DC) 16%,transparent);}
.fbc-view span{flex:1;min-width:0;}
.fbc-act{display:flex;gap:8px;flex-wrap:wrap;}
.fbc-fb{display:flex;flex-direction:column;gap:9px;}
.fbc-fb textarea{font-family:var(--font-body);font-size:13.5px;padding:10px;border:1px solid var(--line);border-radius:10px;resize:vertical;outline:none;width:100%;box-sizing:border-box;}
.fbc-fb textarea:focus{border-color:var(--s27-yellow,#F2C14E);}
.fbc-fbact{display:flex;gap:8px;flex-wrap:wrap;}

/* ===== Socials in-portal post-editor (kanalen / caption / hashtags / visual) ===== */
.soc-elab{display:block;font-family:var(--font-display);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-4);margin:16px 0 7px;}
.soc-chans{display:flex;gap:8px;flex-wrap:wrap;}
.soc-chan{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-4);background:var(--paper-2,#FAF7F2);border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:border-color .15s,background .15s,color .15s,opacity .15s;opacity:.65;}
.soc-chan .soc-chan-dot{width:9px;height:9px;border-radius:99px;background:var(--ink-4);transition:background .15s;}
.soc-chan:hover{border-color:var(--cn);}
.soc-chan.on{color:var(--ink);background:#fff;border-color:var(--cn);opacity:1;}
.soc-chan.on .soc-chan-dot{background:var(--cn);}
.soc-cap{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:14px;line-height:1.55;padding:12px 14px;border:1px solid var(--line);border-radius:12px;outline:none;resize:vertical;}
.soc-cap:focus{border-color:var(--s27-yellow,#F2C14E);}
.soc-hashrow{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;}
.soc-hashin{flex:1;min-width:160px;font-family:var(--font-body);font-size:13.5px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;outline:none;}
.soc-hashin:focus{border-color:var(--s27-yellow,#F2C14E);}
.soc-eact{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px;}
.soc-saveok{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--s27-green-ink,#147A50);background:var(--s27-green-soft,rgba(18,172,78,.10));border-radius:10px;padding:10px 13px;}
.soc-saveerr{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--s27-orange-ink,#C44514);background:var(--s27-orange-soft,rgba(246,97,49,.10));border-radius:10px;padding:10px 13px;}

/* Chatbot 'denkt na'-indicator: tekst naast de bouncende bolletjes, zodat de klant weet dat er een antwoord aankomt */
.typing .typing-tx{align-self:center;margin-left:7px;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink-3);}

/* MEETINGS, plan-vakje in ons blauw zodat tekst goed afsteekt */
.meet-side.meet-side-accent{background:linear-gradient(165deg,rgba(48,131,220,.96),rgba(31,95,168,.96));border:1px solid rgba(255,255,255,.35);color:#fff;-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);box-shadow:0 22px 50px rgba(31,95,168,.32),inset 0 1px 0 rgba(255,255,255,.25);}
.meet-side-accent .ms-title,.meet-side-accent .ms-label{color:#fff;}
.meet-side-accent .mtype{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.3);color:#fff;}
.meet-side-accent .mtype .mt-tx b{color:#fff;}
.meet-side-accent .mtype:hover{background:rgba(255,255,255,.22);}
.meet-side-accent .mtype.sel{background:#fff;border-color:#fff;}
.meet-side-accent .mtype.sel .mt-tx b{color:var(--s27-blue-ink,#1F5FA8);}
.meet-side-accent .fs{color:rgba(255,255,255,.85)!important;}
.meet-side-accent .meet-who{background:rgba(255,255,255,.16);color:#fff;}
/* projectmeeting-keuze */
.projmeet-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.projmeet-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;background:rgba(255,255,255,.92);border:1.5px solid rgba(255,255,255,.5);border-radius:13px;padding:10px 12px;color:var(--ink,#230F23);transition:transform .15s,box-shadow .15s;}
.projmeet-opt:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(31,95,168,.25);}
.projmeet-opt.sel{outline:2px solid #fff;}
.projmeet-opt .pm-dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--s27-blue));flex:none;}
.projmeet-opt .pm-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.projmeet-opt .pm-tx b{font-family:var(--font-display);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.projmeet-opt .pm-tx span{font-size:11.5px;color:var(--ink-4,#9E919E);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.projmeet-opt svg{flex:none;color:var(--ink-4,#9E919E);}
.meet-side-accent #s27-plan-host .fs{color:rgba(255,255,255,.9)!important;}

/* OFFERTES, koffiegesprek-kaart */
.koffie-card .koffie-ic{width:46px;height:46px;border-radius:13px;background:var(--s27-orange-soft,rgba(246,97,49,.12));color:var(--s27-orange-ink,#C44514);display:flex;align-items:center;justify-content:center;flex:none;}

/* INSTELLINGEN, compacte 2-koloms voorkeuren */
.set-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-bottom:18px;}
.set-cols .setsec{margin-bottom:0;}
.set-cols .set-grid-1{grid-template-columns:1fr;max-width:none;}
.contact-list-sm{max-width:none;}
.contact-list-sm .contact-row{padding:9px 12px;gap:10px;}
.contact-list-sm .cr-av{width:32px;height:32px;font-size:12px;}
@media(max-width:860px){.set-cols{grid-template-columns:1fr;}}

/* ===== SHOOT-INPLANNEN wizard (port van studio27.be/shoot-inplannen) ===== */
.shoot-wiz{margin-top:4px;}
.shoot-steps{display:flex;gap:8px;margin-bottom:12px;}
.shoot-step{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--ink-4,#9E919E);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:999px;padding:5px 11px 5px 6px;}
.shoot-step b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--line,#E7DFD3);color:var(--ink-3,#6B5B6B);font-size:11px;}
.shoot-step.active{color:var(--s27-purple-ink,#5B2A86);background:var(--s27-purple-soft,rgba(123,79,166,.14));border-color:color-mix(in srgb,var(--s27-purple,#7B4FA6) 30%,transparent);}
.shoot-step.active b{background:var(--s27-purple,#7B4FA6);color:#fff;}
.shoot-step.done{color:var(--s27-green-ink,#147A50);}
.shoot-step.done b{background:var(--s27-green,#12AC4E);color:#fff;}
.shoot-intro{font-family:var(--font-body,sans-serif);font-size:12.5px;color:var(--ink-3,#6B5B6B);line-height:1.45;margin:0 0 12px;}
.shoot-cal{background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:14px;padding:13px 14px;}
.shoot-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.shoot-cal-month{font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--ink,#230F23);text-transform:capitalize;}
.shoot-nav{width:30px;height:30px;border-radius:9px;border:1px solid var(--line,#E7DFD3);background:var(--paper-2,#FAF7F2);color:var(--ink-2,#3A2A3A);font-size:16px;line-height:1;cursor:pointer;transition:background .15s;}
.shoot-nav:hover:not(:disabled){background:var(--s27-purple-soft,rgba(123,79,166,.14));}
.shoot-nav:disabled{opacity:.35;cursor:default;}
.shoot-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.shoot-dow{text-align:center;font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.04em;color:var(--ink-4,#9E919E);padding-bottom:3px;}
.shoot-day{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-family:var(--font-body,sans-serif);font-weight:700;font-size:13px;color:var(--ink-3,#6B5B6B);background:var(--paper-2,#FAF7F2);user-select:none;}
.shoot-day.empty{background:none;}
.shoot-day.past{color:var(--ink-4,#C9BEC9);background:none;opacity:.5;}
.shoot-day.free{background:var(--s27-purple-soft,rgba(123,79,166,.14));color:var(--s27-purple-ink,#5B2A86);cursor:pointer;}
.shoot-day.partial{background:rgba(248,192,40,.20);color:#8A6400;cursor:pointer;}
.shoot-day.full{background:var(--s27-orange-soft,rgba(246,97,49,.12));color:var(--s27-orange-ink,#C44514);opacity:.7;}
.shoot-day.free:hover,.shoot-day.partial:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(60,40,80,.14);}
.shoot-day.sel{background:var(--s27-purple,#7B4FA6)!important;color:#fff!important;box-shadow:0 4px 12px rgba(123,79,166,.4);}
.shoot-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px;font-family:var(--font-body);font-size:11px;color:var(--ink-4,#9E919E);}
.shoot-legend span{display:inline-flex;align-items:center;gap:5px;}
.shoot-legend i{width:11px;height:11px;border-radius:4px;display:inline-block;}
.shoot-legend .sl-free{background:var(--s27-purple-soft,rgba(123,79,166,.30));}
.shoot-legend .sl-part{background:rgba(248,192,40,.30);}
.shoot-legend .sl-full{background:var(--s27-orange-soft,rgba(246,97,49,.20));}
.shoot-slotcard{background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:14px;padding:13px 14px;margin-top:12px;}
.shoot-slots{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
.shoot-slot{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-2,#3A2A3A);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:9px;padding:7px 12px;cursor:pointer;transition:all .15s;}
.shoot-slot:hover{border-color:var(--s27-purple,#7B4FA6);}
.shoot-slot.sel{background:var(--s27-purple,#7B4FA6);color:#fff;border-color:var(--s27-purple,#7B4FA6);}
.shoot-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
.shoot-summary{display:flex;flex-direction:column;gap:6px;background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:12px;padding:12px 14px;font-family:var(--font-body);font-size:13px;color:var(--ink-2,#3A2A3A);}
.shoot-summary>div{display:flex;gap:8px;}
.shoot-summary>div b{min-width:74px;font-family:var(--font-display);font-weight:700;color:var(--ink-3,#6B5B6B);}
.shoot-reis{display:block!important;font-size:11.5px;color:var(--ink-4,#9E919E);line-height:1.4;border-top:1px dashed var(--line,#E7DFD3);padding-top:8px;margin-top:2px;}
.shoot-form{margin-top:14px;}
.shoot-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.shoot-row-loc{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:10px;margin-top:8px;}
.shoot-field{display:flex;flex-direction:column;}
.shoot-field label{font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--ink-3,#6B5B6B);margin:12px 0 5px;}
.shoot-form input,.shoot-form textarea{font-family:var(--font-body);font-size:13.5px;color:var(--ink,#230F23);background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:10px;padding:10px 12px;outline:none;width:100%;box-sizing:border-box;transition:border-color .15s;}
.shoot-form input:focus,.shoot-form textarea:focus{border-color:var(--s27-purple,#7B4FA6);}
.shoot-form textarea{min-height:74px;resize:vertical;}
.shoot-acwrap{margin-top:4px;}
.shoot-acwrap gmp-place-autocomplete,.shoot-acwrap .shoot-ac{width:100%;display:block;}
.shoot-msg{display:none;font-family:var(--font-body);font-size:12.5px;color:var(--s27-orange-ink,#C44514);background:var(--s27-orange-soft,rgba(246,97,49,.12));border-radius:10px;padding:9px 12px;margin-top:12px;}
.shoot-note{font-family:var(--font-body);font-size:13px;color:var(--ink-2,#3A2A3A);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:12px;padding:13px 15px;line-height:1.5;}
.shoot-note a{color:var(--s27-purple-ink,#5B2A86);font-weight:700;}
@media(max-width:620px){.shoot-row{grid-template-columns:1fr;}.shoot-row-loc{grid-template-columns:1fr;}}

/* ===== SOCIAL KPI-dashboard (fase 1 metriek-look-and-feel, data via metricoolStats) ===== */
.soc-stats{margin:2px 0 18px;}
.soc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.soc-kpi{background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--glass-sh,0 8px 24px rgba(60,40,80,.06));}
.soc-kpi-lab{font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4,#9E919E);}
.soc-kpi-num{font-family:var(--font-display);font-weight:900;font-size:28px;line-height:1.05;color:var(--ink,#230F23);}
.soc-kpi-foot{font-family:var(--font-body);font-size:12px;color:var(--ink-4,#9E919E);min-height:16px;}
.soc-kpi-delta{font-weight:800;}
.soc-kpi-delta.up{color:var(--s27-green-ink,#147A50);}
.soc-kpi-delta.down{color:var(--s27-orange-ink,#C44514);}
.soc-kpi-delta.flat{color:var(--ink-4,#9E919E);}
.soc-kpi-sub{font-weight:600;}
.soc-trend{background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:16px;padding:14px 16px 6px;margin-top:12px;}
.soc-trend-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:12.5px;color:var(--ink-2,#3A2A3A);margin-bottom:6px;}
.soc-trend-range{font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--ink-4,#9E919E);}
.soc-trend-svg{display:block;width:100%;height:110px;}
.soc-knets{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.soc-knet{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:12.5px;color:var(--ink-3,#6B5B6B);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:999px;padding:6px 12px;}
.soc-knet b{font-family:var(--font-display);color:var(--ink,#230F23);}
.soc-knet-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.soc-knet-v{color:var(--ink-3,#6B5B6B);}
.soc-knet-g{font-weight:800;}
.soc-knet-g.up{color:var(--s27-green-ink,#147A50);}
.soc-knet-g.down{color:var(--s27-orange-ink,#C44514);}
.soc-kpi-skel{min-height:96px;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:13px;color:var(--ink-4,#9E919E);background:var(--paper-2,#FAF7F2);border:1px dashed var(--line,#E7DFD3);border-radius:16px;margin-bottom:4px;}
@media(max-width:680px){.soc-kpis{grid-template-columns:1fr 1fr;}}

/* ============================================================
   Inklapbare auto-hide sidebar (macOS-dock) + fullscreen content
   Desktop = min-width 981px (mobiel-hamburger start bij 980px).
   ============================================================ */
.sb-dock-toggle{display:none;}
.sb-edge{display:none;}
@media(min-width:981px){
  /* vloeiende dock-overgangen */
  .sidebar{transition:transform .34s cubic-bezier(.4,0,.2,1),box-shadow .30s ease;will-change:transform;}
  .topbar{transition:margin-left .34s cubic-bezier(.4,0,.2,1);}
  .page{transition:margin-left .34s cubic-bezier(.4,0,.2,1),padding .30s ease;}

  /* toggle-knop links in de topbar */
  .sb-dock-toggle{display:flex;width:40px;height:40px;border-radius:11px;align-items:center;justify-content:center;
    color:var(--ink-2);flex:none;transition:background 150ms,color 150ms,transform 200ms var(--bounce,cubic-bezier(.34,1.56,.64,1));}
  .sb-dock-toggle:hover{background:var(--paper-3);color:var(--ink);}
  .sb-dock-toggle:active{transform:scale(.92);}
  .sb-dock-toggle svg{width:22px;height:22px;}

  /* INGEKLAPT: zijbalk weg, topbar + content fullscreen */
  body.sb-collapsed .sidebar{transform:translateX(-100%);box-shadow:none;}
  body.sb-collapsed .topbar{margin-left:0;}
  body.sb-collapsed .page{margin-left:0;}

  /* hover-reveal strip aan de linkerrand (enkel zichtbaar wanneer ingeklapt) */
  body.sb-collapsed .sb-edge{display:block;position:fixed;top:0;left:0;bottom:0;width:16px;z-index:58;cursor:e-resize;}

  /* PEEK: zijbalk zweeft als overlay terug in beeld */
  body.sb-collapsed.sb-peek .sidebar{transform:none;box-shadow:0 22px 70px rgba(35,15,35,.30);z-index:62;}
  body.sb-collapsed.sb-peek .sb-edge{width:280px;} /* houd reveal-zone open zolang je in de buurt bent */
}
/* op tablet/mobiel telt het bestaande hamburger-patroon: dock-elementen verbergen */
@media(max-width:980px){ .sb-dock-toggle{display:none!important;} .sb-edge{display:none!important;} }

/* scheidingsregel in Instellingen (Huisstijl-sectie) */
.set-divider{display:flex;align-items:center;gap:12px;margin:30px 0 6px;}
.set-divider::before,.set-divider::after{content:"";height:1px;flex:1;background:var(--line,#E7DFD3);}
.set-divider span{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#6B5B6B);white-space:nowrap;}
.set-divider span svg{color:var(--ink-4,#9E919E);}

/* Socials op volle breedte (kalender/matrix benutten de hele content-zone) */
.panel[data-screen-label="socials"]{max-width:none;}
.panel[data-screen-label="socials"] .soc-detail{max-width:880px;}

/* ---- Postprestaties (fase 2) ---- */
.soc-poststats{margin-top:18px;}
.soc-phead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 2px 12px;}
.soc-phead h3{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--ink,#230F23);margin:0;}
.soc-psort{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.soc-pschip{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--ink-3,#6B5B6B);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);padding:6px 12px;border-radius:999px;cursor:pointer;transition:all .15s;}
.soc-pschip:hover{border-color:var(--s27-yellow,#F2C14E);color:var(--ink,#230F23);}
.soc-pschip.active{background:var(--ink,#230F23);border-color:var(--ink,#230F23);color:#fff;}
.soc-plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;}
.soc-pcard{display:flex;align-items:stretch;gap:13px;text-align:left;background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:16px;padding:12px 14px;cursor:pointer;transition:transform .15s,box-shadow .15s;color:inherit;text-decoration:none;}
.soc-pcard:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(60,40,80,.10);}
.soc-pthumb{width:64px;height:64px;border-radius:12px;overflow:hidden;flex:none;background:var(--paper-3,#F1EBE2);display:flex;align-items:center;justify-content:center;}
.soc-pthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.soc-pph{font-family:var(--font-display);font-weight:900;font-size:22px;color:var(--ink-4,#9E919E);}
.soc-pbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.soc-pmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.soc-pnet{font-family:var(--font-display);font-weight:800;font-size:11px;border-radius:999px;padding:2px 9px;}
.soc-pdate{font-family:var(--font-body);font-weight:700;font-size:11.5px;color:var(--ink-4,#9E919E);}
.soc-pbest{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-weight:800;font-size:10.5px;color:var(--s27-green-ink,#147A50);background:var(--s27-green-soft,rgba(18,172,78,.12));border-radius:999px;padding:2px 8px;}
.soc-ptext{font-family:var(--font-body);font-size:13px;color:var(--ink-2,#3A2A3A);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.soc-pstats{display:flex;gap:16px;margin-top:auto;padding-top:4px;}
.soc-pstat{display:flex;flex-direction:column;line-height:1.1;}
.soc-pstat b{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--ink,#230F23);}
.soc-pstat i{font-family:var(--font-body);font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-4,#9E919E);}
.soc-parrow{align-self:center;color:var(--ink-4,#9E919E);flex:none;}
.soc-pcard:hover .soc-parrow{color:var(--ink-2,#3A2A3A);}
@media(max-width:760px){.soc-plist{grid-template-columns:1fr;}}
@media(max-width:480px){.soc-pstats{gap:12px;}.soc-pthumb{width:54px;height:54px;}}

/* ---- "Wat werkt het best" (fase 3) ---- */
.soc-insights{margin-top:18px;}
.soc-isub{font-family:var(--font-body);font-size:12px;color:var(--ink-4,#9E919E);font-weight:600;}
.soc-igrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;}
.soc-icard{background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:16px;padding:15px 16px;display:flex;flex-direction:column;gap:10px;}
.soc-ihead{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:13.5px;color:var(--ink,#230F23);}
.soc-ihead svg{color:var(--ink-3,#6B5B6B);}
.soc-ihead-tags span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;background:var(--ink,#230F23);color:#fff;font-weight:900;font-size:12px;}
.soc-irow{display:flex;align-items:center;gap:10px;}
.soc-ilab{min-width:0;flex:0 0 42%;display:flex;flex-direction:column;line-height:1.15;}
.soc-ilab b{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink,#230F23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.soc-ilab span{font-family:var(--font-body);font-size:11px;color:var(--ink-4,#9E919E);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.soc-ibar{flex:1;height:7px;border-radius:999px;background:var(--paper-3,#F1EBE2);overflow:hidden;}
.soc-ibar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--s27-blue,#3083DC),var(--s27-purple,#9441DB));}
.soc-ival{font-family:var(--font-display);font-weight:800;font-size:12.5px;color:var(--ink-2,#3A2A3A);flex:none;min-width:34px;text-align:right;}
.soc-iempty{font-family:var(--font-body);font-size:12.5px;color:var(--ink-4,#9E919E);padding:4px 0;}
.soc-tags{display:flex;flex-wrap:wrap;gap:7px;}
.soc-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--ink-2,#3A2A3A);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:999px;padding:5px 10px;}
.soc-tag b{font-family:var(--font-display);font-weight:800;font-size:11.5px;color:var(--s27-blue-ink,#1F5FA8);}
@media(max-width:900px){.soc-igrid{grid-template-columns:1fr;}}

/* ---- Socials sub-navigatie (Analyse / Planner / Inzichten) ---- */
.soc-subnav{display:flex;gap:6px;background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:14px;padding:5px;margin:2px 0 20px;width:fit-content;max-width:100%;flex-wrap:wrap;}
.soc-subtab{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink-3,#6B5B6B);padding:9px 18px;border-radius:10px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;}
.soc-subtab svg{width:17px;height:17px;color:var(--ink-4,#9E919E);transition:color .15s;}
.soc-subtab:hover{color:var(--ink,#230F23);}
.soc-subtab:hover svg{color:var(--ink-2,#3A2A3A);}
.soc-subtab.active{background:#fff;color:var(--ink,#230F23);box-shadow:0 2px 8px rgba(60,40,80,.10);}
.soc-subtab.active svg{color:var(--s27-orange-ink,#C44514);}
/* inner-tabs binnen Inzichten */
.soc-inznav{display:flex;gap:2px;border-bottom:1.5px solid var(--line,#E7DFD3);margin:0 0 16px;flex-wrap:wrap;}
.soc-inztab{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-4,#9E919E);padding:9px 15px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;}
.soc-inztab:hover{color:var(--ink-2,#3A2A3A);}
.soc-inztab.active{color:var(--ink,#230F23);border-bottom-color:var(--s27-yellow,#F2C14E);}
.soc-icard-wide{width:100%;}
@media(max-width:520px){.soc-subnav{width:100%;}.soc-subtab{flex:1;justify-content:center;padding:9px 8px;font-size:12.5px;}}

/* ---- Post-editor (planner): gsm-mockup + compacte 2-koloms + icoon-kanalen ---- */
.soc-editor{max-width:1040px;}
.soc-etopbar{position:sticky;top:60px;z-index:8;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;margin-bottom:8px;background:rgba(251,248,243,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:0 0 12px 12px;}
.soc-etop-act{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
/* Cluster E: ronde ×-sluitknop i.p.v. de "Terug naar de kalender"-tekstlink */
.soc-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line,#E7DFD3);background:#fff;color:var(--ink-3,#6B5B6B);cursor:pointer;transition:.16s ease;flex:none;box-shadow:0 1px 3px rgba(60,40,80,.06);}
.soc-close:hover{background:var(--s27-orange,#F66131);border-color:var(--s27-orange,#F66131);color:#fff;transform:rotate(90deg);}
/* Cluster E: actieknoppen (Wacht op feedback / Opslaan / Goedkeuren) rechtsonder in het editor-formulier */
.soc-eactions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#E7DFD3);}
@media(max-width:760px){.soc-eactions{justify-content:stretch;}.soc-eactions .btn{flex:1;}}
.soc-egrid{display:grid;grid-template-columns:330px 1fr;gap:28px;align-items:start;}
.soc-ecol-pv{position:sticky;top:124px;}
.soc-ecol-form{min-width:0;}
.soc-ecol-form .soc-cap{min-height:230px;}
.soc-emeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.soc-emeta-date{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--ink-3,#6B5B6B);}
.soc-emeta-hint{font-family:var(--font-body);font-size:12px;color:var(--ink-4,#9E919E);}
.soc-chics{display:flex;gap:10px;flex-wrap:wrap;}
.soc-chic{width:46px;height:46px;border-radius:13px;border:1.5px solid var(--line,#E7DFD3);background:var(--paper-2,#FAF7F2);color:var(--ink-4,#9E919E);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,background .15s,box-shadow .15s,transform .12s;}
.soc-chic svg{width:24px;height:24px;}
.soc-chic:hover{color:var(--cn);border-color:var(--cn);transform:translateY(-1px);}
.soc-chic.on{color:#fff;background:var(--cn);border-color:var(--cn);box-shadow:0 4px 12px color-mix(in srgb,var(--cn) 32%,transparent);}
.soc-chics-ro .soc-chic{cursor:default;}
.soc-chics-ro .soc-chic:hover{transform:none;}
.soc-visrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.soc-upor{font-family:var(--font-body);font-size:12px;color:var(--ink-4,#9E919E);}
#socUpMsg .soc-saveok,#socUpMsg .soc-saveerr{display:inline-flex;}
.soc-roinfo{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--s27-green-ink,#147A50);background:var(--s27-green-soft,rgba(18,172,78,.09));border-radius:11px;padding:11px 13px;}
.soc-roinfo svg{flex:none;margin-top:1px;}
.soc-dtxt-box{white-space:pre-wrap;font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--ink-2,#3A2A3A);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:12px;padding:12px 14px;max-height:340px;overflow:auto;}
/* gsm-mockup met Instagram-look */
.soc-phone{display:flex;justify-content:center;}
.soc-phone-scr{width:100%;max-width:330px;background:#fff;border:1px solid var(--line,#E7DFD3);border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(60,40,80,.16);}
.soc-ph-top{display:flex;align-items:center;gap:9px;padding:11px 13px;}
.soc-ph-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);color:#fff;flex:none;}
.soc-ph-av svg{width:16px;height:16px;}
.soc-ph-user{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--ink,#230F23);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.soc-ph-more{color:var(--ink-3,#6B5B6B);font-weight:900;letter-spacing:1px;}
.soc-ph-mediawrap{width:100%;aspect-ratio:1/1;background:var(--paper-3,#F1EBE2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.soc-ph-mediawrap img,.soc-ph-mediawrap video{width:100%;height:100%;object-fit:contain;display:block;}   /* contain: volledige aspect-ratio zichtbaar, nooit uitgerekt/gecropt */
.soc-ph-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-4,#9E919E);font-family:var(--font-body);font-size:12.5px;}
.soc-ph-bar{display:flex;align-items:center;gap:15px;padding:11px 13px 5px;color:var(--ink,#230F23);}
.soc-ph-bar svg{width:23px;height:23px;}
.soc-ph-bk{margin-left:auto;}
.soc-ph-cap{padding:2px 13px 16px;font-family:var(--font-body);font-size:12.5px;line-height:1.45;color:var(--ink-2,#3A2A3A);white-space:pre-wrap;word-break:break-word;max-height:190px;overflow:auto;}
.soc-ph-cap b{font-family:var(--font-display);font-weight:800;color:var(--ink,#230F23);}
/* post-editor: actieknoppen rechts op de Analyse/Planner/Inzichten-balk */
.soc-subnav-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 20px;}
.soc-subnav-row .soc-subnav{margin:0;}
.soc-subnav-act{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.soc-elab-hint{font-weight:600;font-size:11.5px;color:var(--ink-4,#9E919E);}
.soc-fbwrap{border-top:1px dashed var(--line,#E7DFD3);padding-top:12px;}
/* carrousel-slides + dots + video in de mockup */
.soc-ph-mediawrap{position:relative;}
.soc-ph-slide{position:absolute;inset:0;display:none;}
.soc-ph-slide.on{display:block;}
.soc-ph-slide video{background:#000;}
.soc-ph-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:5px;z-index:2;}
.soc-ph-dot{width:6px;height:6px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.5);box-shadow:0 0 2px rgba(0,0,0,.28);cursor:pointer;}
.soc-ph-dot.on{background:#fff;}
.soc-ph-count{font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--ink-3,#6B5B6B);margin-left:6px;}
@media(max-width:760px){.soc-subnav-act{margin-left:0;width:100%;}}
/* Altijd-open klantchat (topbar-drawer rechts) */
.cc-overlay{position:fixed;inset:0;z-index:80;display:none;background:rgba(35,15,35,.32);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.cc-overlay.show{display:block;}
.cc-modal{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper,#fff);box-shadow:-18px 0 50px rgba(35,15,35,.22);display:flex;flex-direction:column;animation:ccIn .22s ease;}
@keyframes ccIn{from{transform:translateX(26px);opacity:.5}to{transform:translateX(0);opacity:1}}
.cc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line,#E7DFD3);flex:none;}
.cc-htitle{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink,#230F23);flex:1;}
.cc-close{border:none;background:none;cursor:pointer;color:var(--ink-3,#6B5B6B);display:flex;padding:5px;border-radius:8px;}
.cc-close:hover{background:var(--paper-2,#FAF7F2);}
.cc-with{padding:9px 16px 2px;flex:none;}
.cc-with .dc-who{display:inline-flex;align-items:center;gap:7px;}
.cc-body{flex:1;display:flex;flex-direction:column;min-height:0;}
.cc-body .chat-list{flex:1;}
@media(max-width:560px){.cc-modal{width:100%;}}
@media(max-width:760px){.soc-egrid{grid-template-columns:1fr;gap:18px;}.soc-ecol-pv{position:static;max-width:330px;margin:0 auto;}.soc-etopbar{top:0;}}
/* kalender (planner): schermvullender */
.soc-cal .soc-grid .soc-cell{min-height:118px;}
@media(max-width:680px){.soc-cal .soc-grid .soc-cell{min-height:70px;}}

/* ---- Analyse: periode-selector + vergelijking ---- */
.soc-period{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;}
.soc-perchips{display:flex;gap:5px;flex-wrap:wrap;background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:12px;padding:4px;}
.soc-perchip{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-3,#6B5B6B);padding:7px 13px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;}
.soc-perchip:hover{color:var(--ink,#230F23);}
.soc-perchip.active{background:#fff;color:var(--ink,#230F23);box-shadow:0 2px 7px rgba(60,40,80,.10);}
/* ── Glass-menubalk (gloss-texture zoals de Meta/Google-schakelaar) + sticky onder de topbar ── */
.soc-perchips, .soc-subnav{
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.40));
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--glass-border,rgba(255,255,255,.6));
  box-shadow:0 8px 24px rgba(60,40,80,.10), inset 0 1px 0 rgba(255,255,255,.75);
}
.soc-perchip.active, .soc-subtab.active{
  background:linear-gradient(180deg,#fff,#f7f3ec);
  box-shadow:0 2px 8px rgba(35,15,35,.13), inset 0 1px 0 #fff;
}
.soc-period, .soc-subnav, .soc-subnav-row{position:sticky; top:60px; z-index:8;}
.soc-subnav-row .soc-subnav{position:static;}
/* mobiel: topbar is óók 60px hoog (styles.css min-height:60) — 54 schoof de balken erachter */
@media(max-width:760px){ .soc-period, .soc-subnav, .soc-subnav-row{top:60px;} }
/* ── Wave 2 polish ── */
/* genummerd cluster-rondje (uniform blauw, niet per taaktype) */
.projcluster-head .pc-num{width:26px;height:26px;border-radius:50%;background:var(--s27-blue,#3083DC);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:13px;flex:none;box-shadow:0 2px 7px rgba(48,131,220,.32);}
/* socials sub-nav iconen in social-geel (ads/offertes blijven oranje/rood) */
#socialSubnav .soc-subtab.active svg{color:var(--s27-yellow-ink,#B88500);}
/* periodebalk stapelt ONDER de sub-nav MET behoud van de rust-spacing (20px):
   top = 60 (topbar) + 47 (sub-nav-hoogte) + 20 (flow-marge) = 127 — geplakt ziet er nu
   exact zo uit als in rust; content beweegt eronder door. (Was 108 → balken plakten tegen elkaar.) */
.soc-period{position:sticky; top:127px; z-index:7;}
@media(max-width:760px){.soc-period{top:127px;}}
/* Adverteren heeft de OMGEKEERDE volgorde (periodebalk bovenaan, sub-nav eronder in team-view;
   klant-view heeft enkel de periodebalk) → daar plakt de periodebalk bovenaan en de sub-nav eronder.
   top sub-nav = 60 + 39 (periodebalk-hoogte) + 18 (flow-marge) = 117. */
.panel[data-screen-label="advertenties"] .soc-period{top:60px;z-index:8;}
.panel[data-screen-label="advertenties"] .soc-subnav{top:117px;z-index:7;}
/* mobiel wrapt de periodebalk naar meerdere regels (hoogte > 39px) -> sub-nav daar niet pinnen (geen overlap) */
@media(max-width:760px){ .panel[data-screen-label="advertenties"] .soc-subnav{position:static;} }
.soc-percompare select, .soc-percustom input[type=date]{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.40));-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border:1px solid var(--glass-border,rgba(255,255,255,.6));box-shadow:0 4px 14px rgba(60,40,80,.08),inset 0 1px 0 rgba(255,255,255,.7);}
/* Berichten-chat schermvullender + scrollbaar */
#berichtChat .chat-list{height:calc(100vh - 340px);min-height:280px;max-height:none;overflow-y:auto;}
.soc-percustom{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:12.5px;color:var(--ink-4,#9E919E);}
.soc-percustom input[type=date]{font-family:var(--font-body);font-size:13px;padding:7px 10px;border:1px solid var(--line,#E7DFD3);border-radius:9px;color:var(--ink-2,#3A2A3A);background:#fff;}
.soc-percompare{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:var(--ink-4,#9E919E);}
.soc-percompare svg{color:var(--ink-4,#9E919E);}
.soc-percompare select{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-2,#3A2A3A);padding:8px 11px;border:1px solid var(--line,#E7DFD3);border-radius:10px;background:var(--paper,#fff);cursor:pointer;}
@media(max-width:560px){.soc-percompare{margin-left:0;}}

/* ============================================================
   Ads-dashboard (Meta): KPI-delta's, resultaten-chip, multi-trend, uitklap-tabel
   ============================================================ */
.kpi-grid-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:1100px){.kpi-grid-5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.kpi-grid-5{grid-template-columns:1fr 1fr;}}
.kpi .kdrow{margin-top:5px;}
.kdelta{font-family:var(--font-display);font-weight:800;font-size:12px;}
.kdelta.up{color:var(--s27-green-ink,#147A50);}
.kdelta.down{color:var(--s27-orange-ink,#C44514);}
.kdelta.flat{color:var(--ink-4,#9E919E);}
/* resultaten-chip */
.ads-reschip{display:flex;align-items:center;gap:13px;background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-left:4px solid var(--s27-green,#12AC4E);border-radius:16px;padding:13px 18px;margin:2px 0 14px;box-shadow:var(--glass-sh,0 8px 24px rgba(60,40,80,.06));}
.ads-reschip-ic{width:40px;height:40px;border-radius:12px;background:var(--s27-green-soft,rgba(18,172,78,.12));color:var(--s27-green-ink,#147A50);display:flex;align-items:center;justify-content:center;flex:none;}
.ads-reschip-tx{min-width:0;}
.ads-reschip-lab{font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4,#9E919E);}
.ads-reschip-num{font-family:var(--font-display);font-weight:900;font-size:26px;line-height:1.05;color:var(--ink,#230F23);}
.ads-reschip-d{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:12px;color:var(--ink-4,#9E919E);flex-wrap:wrap;justify-content:flex-end;text-align:right;}
/* multi-series trend */
.ads-trend .ads-thead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.ads-trend .ads-thead h3{font-family:var(--font-display);font-weight:800;font-size:15px;margin:0;color:var(--ink,#230F23);}
.ads-tchips{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto;}
.ads-tchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--ink-4,#9E919E);background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:999px;padding:5px 11px;cursor:pointer;transition:all .15s;}
.ads-tchip b{font-family:var(--font-display);font-weight:800;color:inherit;}
.ads-tchip .ads-tdot{width:9px;height:9px;border-radius:50%;background:var(--ink-4,#9E919E);flex:none;transition:background .15s;}
.ads-tchip.on{color:var(--ink,#230F23);background:#fff;border-color:var(--tc);}
.ads-tchip.on .ads-tdot{background:var(--tc);}
.ads-tsvg{display:block;width:100%;height:170px;}
.ads-txlab{display:flex;justify-content:space-between;font-family:var(--font-body);font-size:11px;color:var(--ink-4,#9E919E);margin-top:2px;}
.ads-tempty{font-family:var(--font-body);font-size:13px;color:var(--ink-4,#9E919E);padding:30px 6px;text-align:center;}
/* uitklap-advertentietabel */
.ads-adtable{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.ads-adhead{display:grid;grid-template-columns:minmax(180px,2.2fr) 1fr 1fr 1fr 1fr 28px;gap:10px;padding:0 14px;font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4,#9E919E);}
.ads-adrow{display:grid;grid-template-columns:minmax(180px,2.2fr) 1fr 1fr 1fr 1fr 28px;gap:10px;align-items:center;background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:13px;padding:10px 14px;cursor:pointer;transition:box-shadow .15s,border-color .15s;}
.ads-adrow:hover{box-shadow:0 6px 18px rgba(60,40,80,.08);}
.ads-adrow.open{border-color:var(--s27-orange,#F66131);border-bottom-left-radius:0;border-bottom-right-radius:0;}
.ads-adcell{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink,#230F23);min-width:0;}
.ads-adcell .ads-adm-lab{display:none;}
.ads-adname{display:flex;align-items:center;gap:10px;}
.ads-adth{width:42px;height:42px;border-radius:9px;object-fit:cover;flex:none;background:var(--paper-3,#F1EBE2);cursor:zoom-in;}
.ads-adth-none{display:flex;align-items:center;justify-content:center;color:var(--ink-4,#9E919E);}
.ads-adnm{min-width:0;display:flex;flex-direction:column;gap:3px;}
.ads-adnm b{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink,#230F23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ads-adfmt{display:inline-flex;align-items:center;gap:3px;width:fit-content;font-family:var(--font-display);font-weight:800;font-size:10px;border-radius:999px;padding:2px 8px;color:var(--c-ink,var(--ink-3));background:var(--c-soft,var(--paper-2));}
.ads-adchev{color:var(--ink-4,#9E919E);display:flex;justify-content:center;transition:transform .2s;}
.ads-adrow.open .ads-adchev{transform:rotate(180deg);}
.ads-adexp{background:var(--paper-2,#FAF7F2);border:1px solid var(--s27-orange,#F66131);border-top:none;border-radius:0 0 13px 13px;margin-top:-8px;}
.ads-adexp-in{display:grid;grid-template-columns:280px 1fr;gap:18px;padding:16px;align-items:start;}
.ads-adexp-media{display:flex;flex-direction:column;align-items:flex-start;}
.ads-adexp-el{width:100%;max-height:300px;border-radius:12px;object-fit:contain;background:#000;cursor:zoom-in;}
.ads-adexp-none{display:flex;align-items:center;justify-content:center;height:160px;color:var(--ink-4,#9E919E);font-family:var(--font-body);font-size:12.5px;background:var(--paper-3,#F1EBE2);}
.ads-adexp-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ads-adexp-lab{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4,#9E919E);}
.ads-adexp-num{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--ink,#230F23);}
@media(max-width:760px){
  .ads-adhead{display:none;}
  .ads-adrow{grid-template-columns:1fr 1fr;gap:8px 14px;}
  .ads-adname{grid-column:1 / -1;}
  .ads-adcell .ads-adm-lab{display:block;font-family:var(--font-display);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-4,#9E919E);margin-bottom:1px;}
  .ads-adchev{position:absolute;top:12px;right:12px;}
  .ads-adrow{position:relative;}
  .ads-adexp-in{grid-template-columns:1fr;}
}
/* ads-chat (hergebruikt de projectchat-markup) */
.ads-chatcard{padding:0;overflow:hidden;}
.ads-chatcard .chat-list{max-height:440px;min-height:180px;overflow-y:auto;padding:16px 16px 6px;}
.ads-chatcard .chat-input{border-top:1px solid var(--line,#E7DFD3);}

/* ===== ADMIN-bedrijvenkiezer (@studio27.be teamleden) ===================== */
/* Login (Google SSO) -> deze overlay laat de admin ÉÉN klantportaal kiezen via zoek over
   ALLE bedrijven. Volledig in Studio 27-huisstijl (zelfde tokens als de rest van het portaal). */
.admin-picker{position:fixed;inset:0;z-index:1200;display:none;background:linear-gradient(160deg,var(--paper-2,#FAF7F2),#fff 62%);padding:max(24px,5vh) 20px;overflow:auto;-webkit-overflow-scrolling:touch;}
.admin-picker.show{display:flex;align-items:flex-start;justify-content:center;animation:apickFade .28s var(--ease-out,ease);}
@keyframes apickFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.apick-box{width:min(560px,100%);margin:auto;display:flex;flex-direction:column;gap:14px;}
.apick-head{display:flex;align-items:center;justify-content:space-between;}
.apick-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--ink-3);}
.apick-dot{width:9px;height:9px;border-radius:50%;background:var(--grad-bp);box-shadow:0 0 0 4px var(--s27-blue-soft);}
.apick-logout{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill,999px);padding:7px 14px;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-3);cursor:pointer;transition:all .16s var(--ease-out,ease);}
.apick-logout:hover{color:var(--ink);border-color:var(--ink-4);box-shadow:var(--sh-sm);}
.apick-title{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-0.03em;color:var(--ink);margin:2px 0 0;}
.apick-sub{color:var(--ink-3);font-size:14.5px;line-height:1.5;margin:0 0 2px;max-width:44ch;}
.apick-resume{display:flex;align-items:center;gap:8px;background:var(--grad-bp);color:#fff;border:none;border-radius:var(--r-md,14px);padding:14px 18px;font-family:var(--font-display);font-weight:700;font-size:14.5px;cursor:pointer;box-shadow:0 10px 24px rgba(94,80,200,.28);transition:transform .16s var(--ease-out,ease),box-shadow .16s;}
.apick-resume:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(94,80,200,.36);}
.apick-resume span{opacity:.85;font-weight:600;}
.apick-searchwrap{position:relative;display:flex;align-items:center;}
.apick-searchwrap>svg{position:absolute;left:16px;color:var(--ink-4);pointer-events:none;}
.apick-searchwrap input{width:100%;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill,999px);padding:14px 18px 14px 44px;font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-sm);outline:none;transition:border-color .16s,box-shadow .16s;}
.apick-searchwrap input:focus{border-color:var(--s27-blue);box-shadow:0 0 0 3px var(--s27-blue-soft);}
.apick-list{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto;padding:2px;margin:-2px;}
.apick-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md,14px);padding:12px 14px;cursor:pointer;box-shadow:var(--sh-sm);transition:transform .14s var(--ease-out,ease),box-shadow .14s,border-color .14s;}
.apick-row:hover{transform:translateX(3px);box-shadow:var(--sh-md);border-color:color-mix(in oklab,var(--s27-blue) 30%,var(--line));}
.apick-av{flex:none;width:38px;height:38px;border-radius:12px;background:var(--grad-bp);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:13px;}
.apick-nm{flex:1;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.apick-chev{flex:none;color:var(--ink-4);}
.apick-empty{color:var(--ink-3);font-size:14px;text-align:center;padding:18px;}
body.admin-picking{overflow:hidden;}
/* TEAM-badge naast de klantnaam VERWIJDERD (Vincent: oogt slecht bij lange klantnamen zoals
   'Snoepwinkeltje'; de admin-context blijkt al uit de TeamView-toggle in de topbar) */
@media(max-width:560px){.apick-title{font-size:25px;}.apick-list{max-height:42vh;}}

/* ===== ADMIN — uitgebreide Meta-rapportage (team-weergave) ================= */
.ar-summary{margin:6px 0 4px;}
.ar-kpigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;}
.arkpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md,14px);box-shadow:var(--sh-sm);padding:13px 14px;display:flex;flex-direction:column;gap:3px;}
.arkpi-l{font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);}
.arkpi-v{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-0.02em;color:var(--ink);line-height:1.1;white-space:nowrap;}
.arkpi-d{margin-top:1px;}
.arkpi-note{margin-top:8px;font-size:12px;color:var(--ink-3);font-weight:600;}
.arcmp{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-display);font-weight:800;font-size:11px;padding:2px 7px;border-radius:999px;letter-spacing:.01em;}
.arcmp.good{color:#0E7A39;background:rgba(18,172,78,.13);}
.arcmp.bad{color:#B4540B;background:rgba(220,120,20,.15);}
.arcmp.flat{color:var(--ink-4);background:var(--paper-3);}
/* campagne-kaart */
.ar-camp{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg,18px);box-shadow:var(--sh-sm);padding:18px 18px 14px;margin-bottom:16px;}
.ar-camp-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-bottom:12px;}
.ar-camp-nm{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-0.02em;color:var(--ink);}
.ar-camp-meta{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ar-obj{font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--s27-blue-ink);background:var(--s27-blue-soft);padding:3px 9px;border-radius:999px;}
.ar-bud{font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--ink-3);}
.ar-pill{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.02em;padding:3px 9px;border-radius:999px;}
.ar-green{color:#0E7A39;background:rgba(18,172,78,.14);}
.ar-orange{color:#B4540B;background:rgba(220,120,20,.16);}
.ar-grey{color:var(--ink-3);background:var(--paper-3);}
.ar-red{color:#B42318;background:rgba(220,38,38,.13);}
.ar-blue{color:var(--s27-blue-ink);background:var(--s27-blue-soft);}
.ar-campkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-bottom:14px;}
.ar-ck{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.ar-ck i{font-style:normal;font-family:var(--font-display);font-weight:700;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4);}
.ar-ck b{font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--ink);white-space:nowrap;}
.ar-chartwrap{position:relative;height:240px;margin:4px 0 16px;}
/* tabellen */
.ar-table{margin-top:12px;}
.ar-tabtitle{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;display:flex;align-items:center;gap:7px;}
.ar-tabtitle .count{background:var(--paper-3);color:var(--ink-3);border-radius:999px;padding:1px 8px;font-size:11px;}
.ar-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md,14px);}
.ar-thead{display:grid;gap:0;background:var(--paper-2);border-bottom:1px solid var(--line);min-width:680px;}
.ar-th{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-4);background:none;border:none;cursor:pointer;text-align:left;padding:9px 10px;white-space:nowrap;transition:color .14s;}
.ar-th.num{text-align:right;}
.ar-th:hover{color:var(--ink-2);}
.ar-th.on{color:var(--s27-blue-ink);}
.ar-trow{display:grid;gap:0;border-bottom:1px solid var(--line);min-width:680px;transition:background .12s;}
.ar-trow:last-child{border-bottom:none;}
.ar-trow:hover{background:var(--paper-2);}
.ar-td{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink-2);padding:9px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;}
.ar-td.num{justify-content:flex-end;font-weight:700;color:var(--ink);}
.ar-nm{overflow:hidden;text-overflow:ellipsis;}
.ar-star{flex:none;color:#B4540B;font-weight:800;font-size:11px;margin-left:4px;}
.ar-empty{padding:16px;text-align:center;color:var(--ink-3);font-size:13px;min-width:auto;}
/* aanbevelingen */
.ar-recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;}
.ar-rec{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ink-4);border-radius:var(--r-md,14px);box-shadow:var(--sh-sm);padding:14px 16px;}
.ar-rec-orange{border-left-color:#E08A1E;}
.ar-rec-blue{border-left-color:var(--s27-blue);}
.ar-rec-red{border-left-color:#DC2626;}
.ar-rec-green{border-left-color:#12AC4E;}
.ar-rec-t{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink);margin-bottom:4px;}
.ar-rec-b{font-size:13px;line-height:1.5;color:var(--ink-3);}
@media(max-width:560px){.ar-camp-nm{font-size:15px;}.arkpi-v{font-size:18px;}}

/* ===== ADMIN — uitgebreide social-rapportage (team-weergave) =============== */
.sr-growth{margin-top:8px;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-weight:800;font-size:12px;padding:4px 11px;border-radius:999px;}
.sr-growth.up{color:#0E7A39;background:rgba(18,172,78,.13);}
.sr-growth.down{color:#B4540B;background:rgba(220,120,20,.15);}
.sr-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 4px;}
.sr-chartcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg,18px);box-shadow:var(--sh-sm);padding:16px 18px;}
.sr-chtitle{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px;}
.sr-netgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));gap:12px;}
.sr-netcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md,14px);box-shadow:var(--sh-sm);padding:14px 16px;}
.sr-nethead{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.sr-netdot{width:10px;height:10px;border-radius:50%;flex:none;}
.sr-netnm{font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-netg{font-family:var(--font-display);font-weight:800;font-size:11px;padding:2px 7px;border-radius:999px;flex:none;}
.sr-netg.up{color:#0E7A39;background:rgba(18,172,78,.13);}
.sr-netg.down{color:#B4540B;background:rgba(220,120,20,.15);}
.sr-nrow{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--paper-3);}
.sr-nrow:first-of-type{border-top:none;}
.sr-nrow i{font-style:normal;font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--ink-3);}
.sr-nrow b{font-family:var(--font-display);font-weight:800;font-size:13.5px;color:var(--ink);margin-left:auto;}
.sr-pnet{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;flex:none;}
.sr-plink{color:var(--ink-2);text-decoration:none;}
.sr-plink:hover{color:var(--s27-blue-ink);text-decoration:underline;}
@media(max-width:760px){.sr-charts{grid-template-columns:1fr;}}
.sr-chempty{display:flex;align-items:center;justify-content:center;min-height:120px;color:var(--ink-3);font-size:13px;text-align:center;padding:20px;background:var(--paper-2);border-radius:var(--r-md,14px);}

/* PDF-rapport-knop (team-rapporten) */
.ar-rephead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
.ar-pdfbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:#fff;background:var(--grad-bp);border:none;border-radius:999px;padding:8px 16px;cursor:pointer;box-shadow:0 6px 16px rgba(94,80,200,.26);transition:transform .15s var(--ease-out,ease),box-shadow .15s;}
.ar-pdfbtn:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(94,80,200,.34);}
.ar-pdfbtn svg{flex:none;}

/* ===== Klant/Team-weergave-toggle (topbar, enkel staff) =================== */
#adminViewToggle{display:none;}
body.admin-mode #adminViewToggle{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.01em;color:var(--ink,#230F23);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border,#E7DFD3);border-radius:999px;padding:5px 13px 5px 6px;cursor:pointer;transition:filter .15s,box-shadow .15s;white-space:nowrap;box-shadow:var(--glass-sh,0 8px 24px rgba(60,40,80,.09));}
body.admin-mode #adminViewToggle:hover{filter:brightness(1.03);box-shadow:var(--glass-sh-lg,0 14px 34px rgba(60,40,80,.16));}
.vmode-track{position:relative;width:38px;height:22px;border-radius:999px;background:linear-gradient(180deg,#3A6FD8,#2B53AE);box-shadow:inset 0 1px 3px rgba(0,0,0,.28);transition:background .22s var(--ease-out,ease);flex:none;}
.vmode-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.32);transition:left .22s var(--ease-out,ease);}
.vmode-lab{min-width:60px;text-align:left;}
body.client-preview #adminViewToggle .vmode-track{background:linear-gradient(180deg,#E89A33,#DC7A14);}
body.client-preview #adminViewToggle .vmode-knob{left:18px;}
/* persistente banner zodat een teamlid weet dat het in klantweergave kijkt */
body.client-preview #page::before{content:'ClientView — je bekijkt dit portaal zoals de klant het ziet. Klik rechtsboven op de schakelaar om terug naar TeamView te gaan.';display:block;background:#FEF3E2;color:#B4540B;font-family:var(--font-display);font-weight:700;font-size:12px;line-height:1.4;text-align:center;padding:8px 14px;border-radius:10px;margin:0 0 14px;border:1px solid #F6D9A8;}
@media(max-width:600px){ body.admin-mode #adminViewToggle .vmode-lab{display:none;} body.client-preview #page::before{font-size:11px;} }

/* ===== Ads — uitgebreide gegevens: filterregels + visual-knop + subtiele PDF ===== */
.ads-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;padding:11px 14px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md,14px);}
.ads-frules{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:200px;}
.ads-frule{display:inline-flex;align-items:center;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 11px;box-shadow:var(--sh-sm);}
.ads-frule select,.ads-frule input{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink);border:none;background:none;outline:none;padding:3px 2px;}
.ads-frule select{cursor:pointer;}
.ads-frule input{width:62px;border-bottom:1px solid var(--line);}
.ads-frm{border:none;background:none;color:var(--ink-4);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:50%;line-height:1;}
.ads-frm:hover{color:#B42318;background:rgba(220,38,38,.1);}
.ads-factions{display:inline-flex;gap:8px;align-items:center;}
.ads-faddbtn{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--s27-blue-ink);background:var(--s27-blue-soft);border:none;border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .15s,color .15s;}
.ads-faddbtn:hover{background:var(--s27-blue);color:#fff;}
.ads-fclear{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-3);background:none;border:none;cursor:pointer;}
.ads-fclear:hover{color:var(--ink);text-decoration:underline;}
.ads-vbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--s27-blue-ink);cursor:pointer;transition:background .14s,color .14s,transform .14s,border-color .14s;}
.ads-vbtn:hover{background:var(--s27-blue);color:#fff;border-color:transparent;transform:translateY(-1px);}
.ads-pdffoot{margin-top:26px;padding-top:16px;border-top:1px dashed var(--line);text-align:center;}
.ads-pdflink{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:6px 12px;border-radius:8px;transition:color .15s,background .15s;}
.ads-pdflink:hover{color:var(--s27-blue-ink);background:var(--s27-blue-soft);}

/* =============================================================================
   MEETINGS-TAB — herontwerp (geen hero) + schermvullende plan-tunnel
   ============================================================================= */
/* ---- overzicht ---- */
.meet2{max-width:1080px;}
.meet2-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;}
@media(max-width:880px){ .meet2-grid{grid-template-columns:1fr;} }
.meet2-main{min-width:0;}
.mcard-list{display:flex;flex-direction:column;gap:12px;}
.mcard{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s;}
.mcard:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
.mcard-date{flex:none;width:60px;height:60px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--c-soft,var(--s27-blue-soft));color:var(--c-ink,var(--s27-blue-ink));line-height:1;}
.mcard-date .d{font-family:var(--font-display);font-weight:800;font-size:24px;}
.mcard-date .mo{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-top:3px;}
.mcard-main{flex:1;min-width:0;}
.mcard-type{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--s27-blue-ink);}
.mcard-type svg{color:currentColor;}
.mcard-ttl{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);margin:3px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcard-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);}
.mcard-meta svg{color:var(--ink-4);vertical-align:-2px;}
.mcard-act{flex:none;}
.mcard-cta{white-space:nowrap;}
.mcard-empty{text-align:center;padding:34px 22px;background:var(--paper);border:1px dashed var(--line);border-radius:18px;}
.mcard-empty-ic{width:62px;height:62px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--s27-blue-soft);color:var(--s27-blue-ink);}
.mcard-empty b{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink-2);}
.mcard-empty p{margin:6px auto 0;max-width:42ch;font-size:13.5px;color:var(--ink-3);}
/* nog in te plannen */
.mtodo{margin-top:20px;background:var(--s27-orange-soft);border:1px solid color-mix(in oklab,var(--s27-orange) 24%,transparent);border-radius:16px;padding:14px 16px;}
.mtodo-h{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--s27-orange-ink);margin-bottom:10px;}
.mtodo-list{display:flex;flex-direction:column;gap:8px;}
.mtodo-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);transition:transform .14s,box-shadow .14s;}
.mtodo-row:hover{transform:translateY(-1px);box-shadow:var(--sh-sm);}
.mtodo-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--s27-orange));flex:none;}
.mtodo-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.mtodo-tx b{font-family:var(--font-display);font-size:13px;}
.mtodo-tx span{font-size:11.5px;color:var(--ink-4);}
.mtodo-row svg{flex:none;color:var(--ink-4);}
/* plan-kaart (3 ingangen) */
.meet2-plan{padding:20px 18px;position:sticky;top:78px;}
.meet2-plan-h{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink);margin:0 0 3px;}
.meet2-plan-sub{font-size:13px;color:var(--ink-3);margin:0 0 16px;line-height:1.45;}
.planopt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:13px 13px;margin-bottom:10px;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s;}
.planopt:last-child{margin-bottom:0;}
.planopt:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:transparent;}
.planopt-ic{flex:none;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--c-soft,var(--s27-blue-soft));color:var(--c-ink,var(--s27-blue-ink));}
.planopt-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.planopt-tx b{font-family:var(--font-display);font-weight:700;font-size:14.5px;}
.planopt-tx span{font-size:12px;color:var(--ink-3);margin-top:1px;}
.planopt>svg{flex:none;color:var(--ink-4);transition:transform .15s;}
.planopt:hover>svg{transform:translateX(3px);color:var(--ink-2);}

/* ---- plan-tunnel overlay ---- */
body.mp-lock{overflow:hidden;}
.mp-overlay{position:fixed;inset:0;z-index:9998;display:none;align-items:flex-end;justify-content:center;padding:0;background:rgba(20,8,20,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
.mp-overlay.show{display:flex;animation:mpFade .2s ease;}
@keyframes mpFade{from{opacity:0}to{opacity:1}}
.mp-modal{display:flex;flex-direction:column;width:100%;max-width:760px;max-height:94vh;background:var(--paper);border-radius:24px 24px 0 0;box-shadow:0 -20px 60px rgba(20,8,20,.32);overflow:hidden;animation:mpSlide .26s cubic-bezier(.2,.8,.25,1);}
@keyframes mpSlide{from{transform:translateY(28px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(min-width:760px){ .mp-overlay{align-items:center;padding:24px;} .mp-modal{border-radius:24px;max-height:90vh;} }
.mp-head{flex:none;display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--paper);}
.mp-head-c{flex:1;min-width:0;display:flex;flex-direction:column;text-align:center;}
.mp-head-eyebrow{font-family:var(--font-display);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);}
.mp-head-c b{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink);}
.mp-back,.mp-close{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;transition:background .14s,color .14s;}
.mp-back:hover,.mp-close:hover{background:var(--paper-3);color:var(--ink);}
.mp-back svg{transform:rotate(180deg);}
.mp-close svg{transform:rotate(45deg);}
.mp-back-sp{width:38px;flex:none;}
.mp-scroll{flex:1;overflow-y:auto;padding:20px 18px 0;-webkit-overflow-scrolling:touch;}
.mp-intro{font-size:14px;color:var(--ink-3);margin:0 0 14px;line-height:1.5;}
/* projectlijst + hosts */
.mp-projlist,.mp-hosts{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;}
.mp-proj,.mp-host{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:14px;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s;}
.mp-proj:hover,.mp-host:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:transparent;}
.mp-proj-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c,var(--s27-blue));}
.mp-proj-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.mp-proj-tx b{font-family:var(--font-display);font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-proj-tx span{font-size:12px;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-proj>svg,.mp-host>svg{flex:none;color:var(--ink-4);}
.mp-host-av{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;}
.mp-host-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.mp-host-tx b{font-family:var(--font-display);font-weight:700;font-size:15px;}
.mp-host-rol{font-family:var(--font-display);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--c-ink,var(--ink-3));}
.mp-host-tag{font-size:12px;color:var(--ink-4);margin-top:2px;}
.mp-empty{text-align:center;padding:34px 18px;color:var(--ink-3);}
.mp-empty svg{color:var(--ink-4);margin-bottom:10px;}
.mp-empty b{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink-2);}
.mp-empty p{margin:6px auto 14px;max-width:38ch;font-size:13.5px;}
/* cal step: hostbar + toggle + note */
.mp-hostbar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px;background:var(--c-soft,var(--s27-blue-soft));margin-bottom:14px;}
.mp-hostbar .mp-host-av{width:42px;height:42px;border-radius:12px;font-size:17px;}
.mp-hostbar .mp-host-tx b{font-size:15px;color:var(--ink);}
.mp-hostbar .mp-host-rol{color:var(--c-ink,var(--ink-3));text-transform:none;letter-spacing:0;font-weight:600;font-size:12px;}
.mp-toggle{display:flex;gap:8px;margin-bottom:14px;}
.mp-tg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink-3);font-family:var(--font-display);font-weight:700;font-size:12.5px;cursor:pointer;transition:all .14s;}
.mp-tg svg{color:currentColor;}
.mp-tg.on{border-color:var(--s27-blue);background:var(--s27-blue-soft);color:var(--s27-blue-ink);}
.mp-note{margin-bottom:14px;}
.mp-lbl{display:block;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-2);margin-bottom:6px;}
.mp-lbl span{font-weight:600;color:var(--ink-4);}
.mp-note textarea,textarea.mp-note{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;outline:none;resize:vertical;background:var(--paper);}
.mp-note textarea:focus,textarea.mp-note:focus{border-color:var(--s27-blue);box-shadow:0 0 0 3px var(--s27-blue-soft);}
/* availability states */
.mp-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;color:var(--ink-3);font-size:13.5px;}
.mp-loading .brand-spinner{width:38px;height:38px;}
.mp-notebox{background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:14px 16px;font-size:13.5px;color:var(--ink-3);line-height:1.5;}
.mp-notebox-err{background:var(--s27-orange-soft);border-color:color-mix(in oklab,var(--s27-orange) 30%,transparent);color:var(--s27-orange-ink);margin-bottom:12px;}
/* 14-daagse kalender */
.mp-cal{margin-bottom:6px;}
.mp-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mp-cal-nav b{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-2);}
.mp-cal-arrow{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer;transition:background .14s;}
.mp-cal-arrow:hover:not(:disabled){background:var(--paper-3);}
.mp-cal-arrow:disabled{opacity:.32;cursor:default;}
.mp-cal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-bottom:6px;}
.mp-cal-dow{text-align:center;font-family:var(--font-display);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-4);}
.mp-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;}
.mp-cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;aspect-ratio:1/1.05;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);cursor:pointer;padding:2px;overflow:hidden;transition:transform .12s,border-color .12s,background .12s;}
.mp-cal-day .mp-cal-dnum{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink-2);line-height:1;}
.mp-cal-day .mp-cal-mon{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--ink-4);letter-spacing:.02em;}
.mp-cal-cnt{font-size:9.5px;font-weight:700;color:var(--s27-blue-ink);margin-top:1px;}
.mp-cal-cnt-off{color:var(--ink-4);font-weight:600;}
.mp-cal-day.free{border-color:color-mix(in oklab,var(--s27-blue) 32%,transparent);background:var(--s27-blue-soft);}
.mp-cal-day.free:hover{transform:translateY(-2px);border-color:var(--s27-blue);}
.mp-cal-day.off{opacity:.5;cursor:default;background:var(--paper-2);}
.mp-cal-day.off .mp-cal-dnum{color:var(--ink-4);}
.mp-cal-day.today{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--s27-blue);}
.mp-cal-day.sel{background:var(--s27-blue);border-color:var(--s27-blue);transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in oklab,var(--s27-blue) 36%,transparent);}
.mp-cal-day.sel .mp-cal-dnum,.mp-cal-day.sel .mp-cal-mon,.mp-cal-day.sel .mp-cal-cnt{color:#fff;}
@media(max-width:430px){ .mp-cal-head,.mp-cal-grid{gap:5px;} .mp-cal-day{border-radius:10px;} .mp-cal-day .mp-cal-dnum{font-size:14px;} .mp-cal-cnt{font-size:8.5px;} }
/* tijdsloten */
.mp-slots{margin-top:14px;}
.mp-slots-hint{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-4);padding:10px 2px;}
.mp-slots-lab{font-size:12.5px;color:var(--ink-3);margin-bottom:9px;}
.mp-slots-lab b{color:var(--ink-2);font-weight:700;text-transform:capitalize;}
.mp-slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;}
.mp-slot{padding:10px 6px;border-radius:11px;border:1.5px solid var(--line);background:var(--paper);font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:all .12s;}
.mp-slot:hover{border-color:var(--s27-blue);color:var(--s27-blue-ink);transform:translateY(-1px);}
.mp-slot.sel{background:var(--s27-blue);border-color:var(--s27-blue);color:#fff;}
/* tips */
.mp-tips{margin-top:20px;padding-bottom:8px;}
.mp-tips-h{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-4);margin-bottom:10px;}
.mp-tips-h svg{color:var(--s27-orange);}
.mp-tips-grid{display:grid;grid-template-columns:1fr;gap:8px;}
@media(min-width:560px){ .mp-tips-grid{grid-template-columns:1fr 1fr 1fr;} }
.mp-tip{display:flex;gap:9px;background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:11px 12px;}
.mp-tip-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--s27-blue-soft);color:var(--s27-blue-ink);}
.mp-tip-tx{min-width:0;display:flex;flex-direction:column;}
.mp-tip-tx b{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink-2);}
.mp-tip-tx span{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px;}
/* sticky bevestig-voet */
.mp-foot{position:sticky;bottom:0;margin:14px -18px 0;padding:14px 18px;background:linear-gradient(to top,var(--paper) 76%,transparent);border-top:1px solid var(--line);}
.mp-confirm{width:100%;}
.mp-confirm:disabled{opacity:.55;cursor:default;box-shadow:none;}
/* succes-state */
.mp-done{text-align:center;padding:24px 8px 28px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.mp-done-ic{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-soft,var(--s27-blue-soft));color:var(--c-ink,var(--s27-blue-ink));margin-bottom:8px;}
.mp-done-h{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--ink);}
.mp-done-when{font-size:14.5px;color:var(--ink-2);margin:4px 0 0;text-transform:capitalize;}
.mp-done-when span{font-size:13px;color:var(--ink-3);text-transform:none;}
.mp-done-sub{font-size:13.5px;color:var(--ink-3);margin:6px auto 14px;max-width:40ch;line-height:1.5;}
.mp-done .btn{margin-top:2px;}
.mp-done .btn+.btn{margin-top:10px;}

/* === Cluster M: chat-composer (multi-file staging + tekst, samen versturen) === */
.chat-compose{display:flex;flex-direction:column;}
.chat-tray{display:flex;flex-wrap:wrap;gap:7px;}
.chat-tray:not(:empty){padding:9px 4px 3px;}
.chat-chip{display:inline-flex;align-items:center;gap:6px;max-width:190px;background:var(--paper-2,#F4EFE7);border:1px solid var(--line,#E7DFD3);border-radius:11px;padding:4px 7px 4px 4px;font-size:12px;}
.chat-chip-th{display:inline-flex;width:28px;height:28px;border-radius:7px;overflow:hidden;align-items:center;justify-content:center;background:#fff;color:var(--ink-4);flex:none;}
.chat-chip-th img{width:100%;height:100%;object-fit:cover;display:block;}
.chat-chip-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font-weight:600;}
.chat-chip-x{border:none;background:none;cursor:pointer;color:var(--ink-4);display:inline-flex;align-items:center;padding:0;flex:none;}
.chat-chip-x:hover{color:var(--s27-orange,#F66131);}
.chat-stagemsg:not(:empty){font-size:12px;color:var(--s27-orange-ink,#C2410C);padding:4px 4px 0;}
.bub-atts{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;}
.bub-att{width:130px;max-width:48vw;border-radius:10px;display:block;}
.bub-doc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;background:rgba(255,255,255,.55);border-radius:9px;padding:5px 9px;}
.msg.me .bub-doc{background:rgba(255,255,255,.22);color:#fff;}

/* === Cluster I: notificatie-kanalen pill-picker (multi-select) === */
.kanaal-pick{display:flex;gap:8px;flex-wrap:wrap;}
.kanaal-pill{font-family:var(--font-body);font-size:13px;font-weight:700;padding:9px 15px;border-radius:999px;cursor:pointer;border:1px solid var(--line,#E7DFD3);background:#fff;color:var(--ink-2,#4A3A4A);transition:all .15s ease;-webkit-tap-highlight-color:transparent;}
.kanaal-pill:not(.on):hover{border-color:var(--s27-indigo,#5B6B8C);color:var(--s27-indigo,#5B6B8C);}
.kanaal-pill.on{background:var(--s27-indigo,#5B6B8C);border-color:var(--s27-indigo,#5B6B8C);color:#fff;box-shadow:0 2px 8px rgba(91,107,140,.28);}

/* === Mobiel: niet schaalbaar + geen iOS-auto-zoom ===
   iOS Safari zoomt automatisch in zodra een invoerveld met font-size <16px focus krijgt
   (en zoomt nooit vanzelf terug) — dat was de "portaal staat ineens ingezoomd"-bug bij
   het laden van een nieuwe klant. 16px op álle invoervelden (!important wint van de
   inline font-styles) neutraliseert dat; de viewport-meta (maximum-scale=1) dekt de rest. */
@media(max-width:760px){
  input, select, textarea{ font-size:16px !important; }
}
/* pinch-zoom dempen waar de browser de meta negeert (PWA/Android): enkel pannen toestaan */
html, body{ touch-action:pan-x pan-y; }

/* === Cluster G: meldingen wisbaar (×-knop per item) === */
.notif{position:relative;}
.notif .nclose{flex:none;align-self:flex-start;margin-left:auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--ink-4,#9E919E);background:transparent;cursor:pointer;transition:.14s;}
.notif .nclose:hover{background:var(--paper-2,#F4EFE7);color:var(--s27-orange-ink,#C44514);}

/* === Cluster H: offerte-wizard (mp-overlay-hergebruik) === */
.ow-modal{max-width:860px;}
.ow-steps{display:flex;gap:6px;margin-top:6px;}
.ow-dot{width:22px;height:5px;border-radius:999px;background:var(--line,#E7DFD3);transition:background .2s;}
.ow-dot.on{background:var(--owc,var(--s27-blue,#3083DC));}
.ow-takgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:680px){.ow-takgrid{grid-template-columns:1fr;}}
.ow-tak{display:flex;align-items:center;gap:12px;text-align:left;padding:15px 16px;border:1px solid var(--line,#E7DFD3);border-radius:14px;background:#fff;cursor:pointer;font:inherit;transition:all .15s ease;}
.ow-tak:hover{border-color:var(--ink-4,#9E919E);box-shadow:0 4px 14px rgba(60,40,80,.08);transform:translateY(-1px);}
.ow-tak>svg:last-child{margin-left:auto;color:var(--ink-4,#9E919E);flex:none;}
.ow-grouphead{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink-2,#3A2A3A);margin:18px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--paper-3,#EFE8DD);}
.ow-contact{display:flex;gap:9px;flex-wrap:wrap;}
.ow-sum{padding:16px 18px;}
.ow-sumrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line,#E7DFD3);font-size:13.5px;}
.ow-sumrow:last-child{border-bottom:none;}
.ow-sumtak{font-family:var(--font-display);font-weight:800;font-size:14px;border-bottom:1px solid var(--line,#E7DFD3);}
.ow-takdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;}
.ow-sumtotal{font-family:var(--font-display);font-weight:800;font-size:14.5px;border-top:1px solid var(--line,#E7DFD3);margin-top:4px;padding-top:11px;border-bottom:none;}
.ow-sumnote{font-size:12.5px;color:var(--ink-3,#6B5B6B);padding:7px 0 0;line-height:1.5;}

/* === Cluster R: socials-planner === */
/* ×-sluitknop rechtsboven in de post-editor (het losse balkje is weg) */
.soc-editor{position:relative;}
.soc-editor>.soc-close{position:absolute;top:0;right:0;z-index:9;}
.soc-egrid{padding-top:6px;}
/* '+ Nieuwe post'-rij boven de plannerfilters (alleen zichtbaar met het Socials-bewerkbaar-recht) */
.soc-newpost-row{display:flex;justify-content:flex-end;margin:0 0 12px;}
/* create-overlay: mockup links, formulier rechts (mobiel gestapeld) */
.sc-grid{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start;}
@media(max-width:760px){.sc-grid{grid-template-columns:1fr;}.sc-pv{max-width:300px;margin:0 auto;}}

/* === Q: dakstructuur — tak-pagina's (Strategie / Branding / Video & fotografie) === */
/* hoofdcontactkaart bovenaan elke tak */
.takcontact{display:flex;align-items:center;gap:13px;padding:15px 18px;margin-bottom:18px;}
.takcontact .dc-av{width:40px;height:40px;border-radius:50%;color:#fff;font-family:var(--font-display);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;}
.takcontact-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.takcontact-tx b{font-family:var(--font-display);font-weight:800;font-size:14.5px;}
.takcontact-tx span{font-size:12.5px;color:var(--ink-3,#6B5B6B);}
.takcontact .btn{flex:none;}
@media(max-width:560px){.takcontact{flex-wrap:wrap;}.takcontact .btn{width:100%;justify-content:center;}}
/* volledig-archief-rijen (lazy geladen, incl. >60d) */
.takarch-row{padding:13px 16px;}
.takarch-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.takarch-top b{font-family:var(--font-display);font-weight:800;font-size:13.5px;}
.takarch-when{font-size:12px;color:var(--ink-4,#9E919E);flex:none;}
.takarch-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.takarch-file{font-size:12.5px;}

/* === Q slice 2: projectdetail-subnav (Overzicht | Chat) + schermvullende chat === */
.detail--wide .detail-grid{display:block;}
.detail-subnav{margin:14px 0 18px;}
.detail-subnav .soc-subtab{display:inline-flex;align-items:center;gap:7px;position:relative;}
.snav-dot{width:9px;height:9px;border-radius:50%;background:var(--s27-orange,#ED7D31);display:inline-block;margin-left:2px;}
.detail-chatpane{display:none;}
.detail-chatpane.active{display:flex;flex-direction:column;min-height:calc(100vh - 320px);
  background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:var(--r-lg,24px);
  box-shadow:var(--sh-sm,0 2px 10px rgba(35,15,35,.05));padding:18px 20px;}
.detail-chatpane .dc-head{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:14px;margin-bottom:10px;}
.detail-chatpane .dc-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.detail-chatpane .dc-body .chat-list{flex:1 1 auto;min-height:260px;max-height:calc(100vh - 470px);overflow-y:auto;margin-bottom:12px;}
@media(max-width:760px){.detail-chatpane.active{min-height:calc(100vh - 250px);}.detail-chatpane .dc-body .chat-list{max-height:none;}}
/* accordions als sub-blok onder het overzicht */
.mpane.mpane-sub{display:none;}
.mpane.mpane-sub.active{display:block;}

/* === Q slice 2: Berichten = iOS-inbox === */
.ios-inbox{padding:0;overflow:hidden;}
.ios-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font:inherit;padding:14px 16px 14px 10px;border-bottom:1px solid var(--line,#E7DFD3);transition:background .12s;}
.ios-row:last-child{border-bottom:none;}
.ios-row:hover{background:var(--paper-2,#F6F1E9);}
.ios-row:active{background:var(--paper-3,#EFE8DD);}
.ios-dot{width:10px;height:10px;border-radius:50%;flex:none;background:transparent;}
.ios-dot.on{background:var(--s27-blue,#3083DC);}
.ios-av{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ios-av .ios-av-ic{width:24px;height:24px;display:block;filter:brightness(0) invert(1);}
.ios-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ios-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.ios-top b{font-family:var(--font-display);font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ios-when{font-size:12px;color:var(--ink-4,#9E919E);flex:none;}
.ios-snippet{font-size:13px;color:var(--ink-3,#6B5B6B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ios-snippet.unread{color:var(--ink-1,#1F141F);font-weight:600;}
.ios-chev{color:var(--ink-4,#9E919E);flex:none;}

/* === Offerte-wizard: vervolg-acties als verticale keuzestapel === */
.ow-contact--stack{display:flex;flex-direction:column;gap:9px;}
.ow-contact--stack .ow-cact{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:13px 15px;}
.ow-contact--stack .ow-cact b{font-family:var(--font-display);font-weight:800;font-size:14px;}
.ow-contact--stack .ow-cact span{font-size:12.5px;color:var(--ink-3,#6B5B6B);line-height:1.45;}
.ow-contact--stack .ow-cact.on span{color:inherit;opacity:.85;}

/* === V: video-tak rework — actieteller op kaarten + onderdelen per TYPE JOB === */
.projflat-card{position:relative;}
.pf-notif{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;border-radius:999px;background:var(--s27-orange,#F66131);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 8px rgba(246,97,49,.35);}
.ond-wrap{display:flex;flex-direction:column;gap:0;}
.ond-kop{margin:18px 0 10px;}
.ond-kop:first-child{margin-top:2px;}
.ond-row{padding:0;margin-bottom:9px;overflow:hidden;}
.ond-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;font:inherit;cursor:default;padding:14px 16px;}
button.ond-head{cursor:pointer;}
.ond-naam{font-family:var(--font-display);font-weight:800;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ond-chip{flex:none;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;}
.ond-chip-ok{background:#E5F4E9;color:#1F7A37;}
.ond-chip-todo{background:#FFF1E2;color:#A05A12;}
.ond-chip-wait{background:#FFF1E2;color:#A05A12;}
.ond-chip-prog{background:#E9EFF9;color:#2D5FA8;}
.ond-row .chev{color:var(--ink-4,#9E919E);transition:transform .18s;flex:none;}
.ond-row.open .chev{transform:rotate(180deg);}
.ond-info{display:none;padding:2px 16px 14px;border-top:1px dashed var(--line,#E7DFD3);margin:0 0 0;}
.ond-row.open .ond-info{display:block;padding-top:12px;}
.ond-info.open-static{display:block;padding-top:12px;}
.ond-kv{display:flex;gap:14px;font-size:13.5px;padding:4px 0;}
.ond-kv b{font-family:var(--font-display);font-weight:800;min-width:110px;}
.ond-locknote{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--ink-3,#6B5B6B);margin:10px 0 0;line-height:1.5;}
.ond-files{display:flex;flex-direction:column;gap:8px;}
.ond-file{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line,#E7DFD3);border-radius:11px;background:#fff;font-size:13.5px;text-decoration:none;color:inherit;}
.ond-file-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
@media(max-width:620px){.ond-head{flex-wrap:wrap;}.ond-head .btn{width:100%;justify-content:center;}}

/* === V2-feedbackronde: vlakke video-projectlijst === */
.vrij-lijst{display:flex;flex-direction:column;gap:10px;}
.vrij-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;cursor:pointer;padding:16px 18px;position:relative;}
.vrij-todo{flex:none;min-width:24px;height:24px;border-radius:999px;background:var(--s27-orange,#F66131);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;padding:0 7px;box-shadow:0 2px 8px rgba(246,97,49,.3);}
.vrij-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.vrij-main b{font-family:var(--font-display);font-weight:800;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vrij-sub{font-size:12.5px;color:var(--ink-3,#6B5B6B);display:flex;align-items:center;gap:5px;}
.vrij-open{flex:none;}
@media(max-width:560px){.vrij-row{flex-wrap:wrap;}.vrij-open{width:100%;justify-content:center;}}

/* === V2: shoot-inplanner als pagina (sidebar blijft) === */
.shootpage{position:relative;max-width:980px;}
.shootpage-close{position:absolute;top:0;right:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line,#E7DFD3);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:rotate(45deg);color:var(--ink-3,#6B5B6B);z-index:5;}
.shootpage-close:hover{background:var(--paper-2,#FAF7F2);color:var(--ink,#230F23);}
.shootpage-head{margin:0 50px 16px 0;}
.shootpage-head h1{font-family:var(--font-display);font-size:22px;margin:4px 0 0;}
/* compacte kalender + slots ernaast op desktop: alles in één oogopslag */
.shoot-cols{display:grid;grid-template-columns:minmax(300px,430px) 1fr;gap:18px;align-items:start;}
@media(max-width:880px){.shoot-cols{grid-template-columns:1fr;}}
.shoot-cols .shoot-cal{max-width:430px;}
.shoot-cols .shoot-day{aspect-ratio:auto;height:34px;font-size:12.5px;border-radius:8px;}
.shoot-cols .shoot-dow{font-size:10.5px;}
.shoot-cols .shoot-slotcard{margin-top:0;}
.shoot-cols .shoot-actions{margin-top:14px;}
.shoot-slot-hint{min-height:70px;display:flex;align-items:center;}
/* eigen adres-suggesties in huisstijl */
.shoot-acwrap{position:relative;}
.shoot-zoek{width:100%;padding:11px 13px;border:1px solid var(--line,#E7DFD3);border-radius:11px;font:inherit;font-size:16px;outline:none;}
.shoot-zoek:focus{border-color:var(--s27-purple,#9441DB);}
.shoot-sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line,#E7DFD3);border-radius:12px;box-shadow:0 10px 28px rgba(35,15,35,.12);z-index:30;overflow:hidden;}
.shoot-sugg:empty{display:none;}
.shoot-sugg-it{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;font-size:13.5px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--paper-3,#F1EBE2);}
.shoot-sugg-it:last-child{border-bottom:none;}
.shoot-sugg-it:hover{background:var(--s27-purple-soft,#F1E6FB);}
.shoot-locvast{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--paper-2,#FAF7F2);border:1px solid var(--line,#E7DFD3);border-radius:11px;padding:11px 13px;font-size:13.5px;margin-top:4px;color:var(--ink-2,#3A2A3A);}
.shoot-locvast em{font-style:normal;font-size:12px;color:var(--ink-4,#9E919E);width:100%;}

/* === V2: fotogalerij (PicFlow-stijl, S27-huisstijl) === */
.gal{margin:-10px 0 0;}
.gal-hero{position:relative;border-radius:var(--r-lg,24px);overflow:hidden;min-height:300px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.gal-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,25,.25) 0%,rgba(20,10,25,.55) 100%);}
.gal-toprow{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap;}
.gal-toprow .gal-dlall{border:1px solid var(--line,#E7DFD3);}
@media(max-width:560px){.gal-toprow{justify-content:flex-start;}.gal-toprow .gal-close{margin-left:auto;}}
.gal-close{width:42px;height:42px;border-radius:50%;border:1px solid var(--line,#E7DFD3);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:rotate(45deg);color:var(--ink-3,#6B5B6B);}
.gal-close:hover{background:var(--paper-2,#FAF7F2);color:var(--ink,#230F23);}
.gal-dlall{background:#fff;color:var(--ink,#230F23);border:none;display:inline-flex;align-items:center;gap:7px;font-weight:800;}
.gal-approve{background:var(--s27-green,#12AC4E);color:#fff;border:none;display:inline-flex;align-items:center;gap:7px;font-weight:800;}
.gal-okpill{background:#E5F4E9;color:#1F7A37;border-radius:999px;padding:9px 15px;font-family:var(--font-display);font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:6px;}
.gal-hero-tx{position:relative;z-index:2;padding:30px 26px;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;}
.gal-hero-tx h1{font-family:var(--font-display);font-size:clamp(24px,4.2vw,38px);margin:0;color:#fff;text-shadow:0 2px 14px rgba(15,8,18,.35);}
.gal-hero-tx span{font-size:14px;opacity:.92;text-shadow:0 1px 8px rgba(15,8,18,.4);}
.gal-grid{columns:4 200px;column-gap:12px;margin-top:18px;}
.gal-it{display:block;width:100%;border:none;background:none;padding:0;margin:0 0 12px;cursor:zoom-in;border-radius:12px;overflow:hidden;break-inside:avoid;}
.gal-it img{display:block;width:100%;height:auto;border-radius:14px;transition:transform .25s ease;}
.gal-it:hover img{transform:scale(1.025);}
/* lightbox */
#galLb{position:fixed;inset:0;background:rgba(15,8,18,.93);z-index:960;display:none;}
#galLb.show{display:block;}
.gal-lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;z-index:5;}
.gal-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:30px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;line-height:1;}
.gal-lb-prev{left:14px;}
.gal-lb-next{right:14px;}
.gal-lb-stage{position:absolute;inset:0 0 64px;display:flex;align-items:center;justify-content:center;overflow:auto;cursor:zoom-in;}
.gal-lb-stage img{max-width:92%;max-height:92%;border-radius:8px;transition:max-width .2s,max-height .2s;}
.gal-lb-stage.zoom{cursor:zoom-out;align-items:flex-start;justify-content:flex-start;}
.gal-lb-stage.zoom img{max-width:none;max-height:none;width:170%;border-radius:0;}
.gal-lb-bar{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;gap:14px;padding:0 18px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent);}
.gal-lb-naam{font-family:var(--font-display);font-weight:800;font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gal-lb-tel{font-size:12.5px;opacity:.8;}
.gal-lb-dl{background:#fff;color:var(--ink,#230F23);border:none;}

/* === W: Contact-pagina (blauwe topbar-knop -> drie ingangen) === */
.contactpage{max-width:980px;}
.contactpage h1{font-family:var(--font-display);font-size:24px;margin:0;}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;font:inherit;cursor:pointer;background:var(--paper,#fff);border:1px solid var(--line,#E7DFD3);border-radius:var(--r-lg,24px);padding:20px;transition:transform .15s,box-shadow .15s;}
.contact-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(35,15,35,.10);}
.contact-card .cc-ic{width:46px;height:46px;border-radius:14px;background:var(--c-soft,var(--paper-2,#FAF7F2));color:var(--c-ink,var(--ink-2));display:flex;align-items:center;justify-content:center;}
.contact-card b{font-family:var(--font-display);font-weight:800;font-size:15.5px;}
.contact-card>span:not(.cc-ic):not(.cc-go){font-size:13px;color:var(--ink-3,#6B5B6B);line-height:1.5;flex:1;}
.contact-card .cc-go{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--c-ink,var(--s27-blue));display:inline-flex;align-items:center;gap:5px;margin-top:4px;}
.contact-form{padding:22px;max-width:640px;}
/* wizard stap 1: brand-stamps op lichte cirkel (geen gekleurde achtergrond achter het stamp-icoon) */
.ow-tak .ow-stamp{background:var(--paper-2,#FAF7F2)!important;border:1px solid var(--line,#E7DFD3);}
.ow-tak .ow-stamp img{display:block;}

/* === X: consistentie-ronde — kruisje rechtsboven als universele terug-navigatie === */
.detail{position:relative;}
.detail-close{position:absolute;top:0;right:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line,#E7DFD3);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:rotate(45deg);color:var(--ink-3,#6B5B6B);z-index:6;}
.detail-close:hover{background:var(--paper-2,#FAF7F2);color:var(--ink,#230F23);}
.detail-closerow{display:flex;justify-content:flex-end;margin:0 0 10px;}
.detail-close--inline{position:static;}
/* oude pijltje-link is vervangen; ruimte bovenaan het detail behouden */
.detail--wide{padding-top:4px;}
/* subnav-iconen kleuren mee met de tak (br-X zet --c-ink op de panel/detail-context) */
.soc-subnav .soc-subtab svg{color:var(--c-ink,var(--ink-3,#6B5B6B));}
.soc-subnav .soc-subtab.active svg{color:var(--c-ink,var(--ink,#230F23));}

/* === Z (masterplan G1): support-opvolglijst + ticket-tweekeuze === */
.wt-keuze{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0 18px;}
@media(max-width:640px){.wt-keuze{grid-template-columns:1fr;}}
.sup-lijst{display:flex;flex-direction:column;gap:10px;}
.sup-row{display:flex;align-items:center;gap:13px;padding:15px 17px;}
.sup-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--ink-4,#9E919E);}
.sup-dot.pill-todo{background:var(--s27-blue,#3083DC);}
.sup-dot.pill-prog{background:var(--s27-orange,#F66131);}
.sup-dot.pill-wait{background:var(--s27-yellow,#F8C028);}
.sup-dot.pill-done{background:var(--s27-green,#12AC4E);}
.sup-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.sup-main b{font-family:var(--font-display);font-weight:800;font-size:14px;}
.sup-snippet{font-size:12.5px;color:var(--ink-3,#6B5B6B);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.sup-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;font:700 13px var(--font-display);color:var(--ink-3,#6B5B6B);cursor:pointer;padding:4px 0;margin:14px 0 6px;}
.sup-link:hover{color:var(--ink,#230F23);}
@media(max-width:560px){.sup-row{flex-wrap:wrap;}.sup-row .btn{width:100%;justify-content:center;}}