/* 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;}
.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:cover;display:block;}
.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);}
@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);}
.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);}