/* Social Treinrondreis: desktop-dashboard. Kleuren en basis. */
:root {
  --bg: #f4f6f8; --vlak: #fff; --lijn: #dfe3e8; --tekst: #1d2330; --stil: #6b7280;
  --accent: #0b5cad; --accent-donker: #08447f; --ok: #15803d; --fout: #b91c1c; --waarschuw: #b45309;
  --idee: #6b7280; --in_bewerking: #b45309; --klaar: #15803d;
  --concept: #6b7280; --ingepland: #0b5cad; --publiceren: #7c3aed; --gepubliceerd: #15803d; --mislukt: #b91c1c; --geannuleerd: #9ca3af;
  --radius: 10px; --schaduw: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); font: 14px/1.45 var(--font); }
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 22px; margin: 0; } h2 { font-size: 17px; margin: 24px 0 10px; } h3 { font-size: 14px; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--stil); } h4 { margin: 12px 0 6px; }
small, .stil { color: var(--stil); } .stil { font-size: 13px; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
input[type=text], input[type=url], input[type=search], input[type=datetime-local], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid #bfd6f2; border-color: var(--accent); }
label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 13px; }
label .teller { float: right; font-weight: 400; color: var(--stil); }
.rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.link { color: var(--accent); background: none; border: 0; cursor: pointer; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; }
.knop:hover { background: var(--accent-donker); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop.klein { padding: 5px 10px; font-size: 13px; }
.knop.tweede { background: #fff; color: var(--accent); }
.knop.tweede:hover { background: #eef4fb; }
.knop.gevaar { background: #fff; color: var(--fout); border-color: #f1c4c4; }
.knop.gevaar:hover { background: #fdf1f1; }
.knop.google { background: #fff; color: #333; border-color: #ccc; padding: 10px 18px; }
.knop.platform { background: #fff; color: var(--tekst); border-color: var(--lijn); }
.knop.platform:hover { border-color: var(--accent); }
.pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--lijn); background: #fff; cursor: pointer; font-size: 13px; }
.pill.actief { background: var(--tekst); color: #fff; border-color: var(--tekst); }
.pill.idee.actief { background: var(--idee); border-color: var(--idee); }
.pill.in_bewerking.actief { background: var(--in_bewerking); border-color: var(--in_bewerking); }
.pill.klaar.actief { background: var(--klaar); border-color: var(--klaar); }

/* Topbar */
.topbar { display: flex; align-items: center; gap: 28px; padding: 0 24px; height: 56px; background: #fff; border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 700; color: var(--tekst); font-size: 15px; }
.tabs { display: flex; gap: 4px; height: 100%; }
.tabs a { display: flex; align-items: center; padding: 0 14px; color: var(--stil); font-weight: 600; border-bottom: 3px solid transparent; }
.tabs a.actief { color: var(--accent); border-bottom-color: var(--accent); }
.topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.gebruiker { display: flex; align-items: center; gap: 8px; }
.gebruiker img { width: 28px; height: 28px; border-radius: 50%; }
.uitloggen { color: var(--stil); font-size: 13px; }
.meldingen { position: relative; }
.meldingen summary { list-style: none; cursor: pointer; position: relative; font-size: 18px; }
.meldingen summary::-webkit-details-marker { display: none; }
.badge { position: absolute; top: -6px; right: -10px; background: var(--fout); color: #fff; font-size: 11px; border-radius: 999px; padding: 0 5px; font-weight: 700; }
.meldingen-lijst { position: absolute; right: 0; top: 30px; width: 340px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 8px; }
.melding { display: flex; flex-direction: column; padding: 8px; border-radius: 6px; color: var(--tekst); }
.melding:hover { background: var(--bg); }
.melding.fout span { color: var(--fout); }
.flash { margin: 16px 24px 0; padding: 10px 14px; border-radius: 8px; background: #e8f5ec; color: var(--ok); border: 1px solid #bfe3c9; }
.flash.fout { background: #fdecec; color: var(--fout); border-color: #f5c2c2; }

/* Pagina */
.inhoud { max-width: 1400px; margin: 0 auto; padding: 20px 24px 60px; }
.paginakop { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.paginakop .terug { color: var(--stil); }
.nieuw-concept { display: flex; gap: 8px; flex: 1; min-width: 360px; }
.filters { display: flex; gap: 8px; align-items: center; margin: 10px 0 18px; flex-wrap: wrap; }
.filters select, .filters input { width: auto; min-width: 140px; }
.kolommen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.kolommen.variant { grid-template-columns: minmax(0, 1fr) 460px; }
.kolom.breed { min-width: 0; }
.titel-invoer { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.autosave-status { font-size: 12px; }

/* Tegels */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tegel { display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; color: var(--tekst); box-shadow: var(--schaduw); transition: transform .1s; }
.tegel:hover { transform: translateY(-1px); border-color: #c5ccd6; }
.tegel-beeld { position: relative; aspect-ratio: 4 / 3; background: #e9edf2; overflow: hidden; }
.tegel-beeld img, .tegel-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.geen-beeld { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 34px; color: #b8c0cc; font-weight: 700; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tegel-tekst { padding: 10px 12px 12px; }
.tegel-tekst strong { display: block; margin-bottom: 4px; }
.tegel-tekst p { margin: 0 0 8px; color: var(--stil); font-size: 13px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--stil); align-items: center; }
.status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--stil); }
.status.groot { font-size: 13px; padding: 3px 12px; }
.status.idee { background: var(--idee); } .status.in_bewerking { background: var(--in_bewerking); } .status.klaar { background: var(--klaar); }
.status.concept { background: var(--concept); } .status.ingepland { background: var(--ingepland); } .status.publiceren { background: var(--publiceren); }
.status.gepubliceerd { background: var(--gepubliceerd); } .status.mislukt { background: var(--mislukt); } .status.geannuleerd { background: var(--geannuleerd); }
.tegel.status-mislukt { border-color: #f1b3b3; }
.platform-icoon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.platform-icoon.groot { width: 32px; height: 32px; }
.platform-icoon.facebook { color: #1877F2; } .platform-icoon.instagram { color: #E1306C; } .platform-icoon.tiktok { color: #111; } .platform-icoon.linkedin { color: #0A66C2; }
.tegel-beeld .platform-icoon { position: absolute; right: 8px; top: 8px; }
.platform-iconen { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }

/* Variantlijst en historie */
.variant-lijst { display: flex; flex-direction: column; gap: 6px; }
.variant-regel { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--lijn); border-radius: 8px; color: var(--tekst); }
.variant-regel .naam { flex: 1; display: flex; flex-direction: column; }
.nieuwe-variant { margin-top: 14px; }
.platform-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.historie { list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--stil); }
.historie li { padding: 4px 0; border-bottom: 1px dashed var(--lijn); }
.historie em { display: block; color: #9aa3af; }
.lijst { padding-left: 18px; }
.feiten { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; font-size: 13px; }
.feiten dt { color: var(--stil); } .feiten dd { margin: 0; }

/* Media */
.media-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.media-mini { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #e9edf2; border: 1px solid var(--lijn); }
.media-mini img, .media-mini video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-mini .doc, .media-item .doc { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 700; color: var(--stil); }
.media-mini small { position: absolute; left: 4px; bottom: 3px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 0 4px; border-radius: 4px; }
.media-mini .verwijder { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; }
.media-mini.toevoegen { display: flex; align-items: center; justify-content: center; border: 2px dashed #c5ccd6; background: #fff; cursor: pointer; color: var(--accent); font-weight: 600; }
.media-mini.sleep { opacity: .4; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.media-grid.klein { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.media-item { background: #fff; border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.media-item.gekozen { outline: 3px solid var(--accent); }
.media-beeld { display: block; aspect-ratio: 1; background: #e9edf2; position: relative; }
.media-beeld img, .media-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-info { padding: 6px 8px; font-size: 12px; }
.media-info strong { display: block; }
.upload-zone { border: 2px dashed #c5ccd6; border-radius: var(--radius); padding: 22px; text-align: center; color: var(--stil); margin-bottom: 14px; background: #fff; }
.upload-zone.over { border-color: var(--accent); background: #eef4fb; }
.upload-log { margin-bottom: 10px; font-size: 13px; }
.upload-log .fout { color: var(--fout); }
.crop-wrap { background: #222; border-radius: var(--radius); overflow: hidden; max-height: 70vh; }
.crop-wrap img { max-width: 100%; display: block; }
.crop-knoppen { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.crop-knoppen label { margin: 0; }

/* Modal */
.modal { width: min(1100px, 92vw); max-height: 86vh; border: 0; border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal::backdrop { background: rgba(20,25,35,.5); }
.modal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-kop h2 { margin: 0; }

/* Variant-editor */
.posttype-keuze { display: flex; flex-wrap: wrap; gap: 6px; }
.posttype-keuze .pill.actief { background: var(--accent); border-color: var(--accent); }
.extra { margin-top: 14px; } .extra summary { cursor: pointer; color: var(--stil); font-weight: 600; }
.controle { margin-top: 18px; padding: 12px 14px; border-radius: 8px; background: #fff7ed; border: 1px solid #fed7aa; }
.controle h4 { margin: 0 0 6px; color: var(--waarschuw); } .controle ul { margin: 0; padding-left: 18px; }
.controle .ok { color: var(--ok); margin: 0; font-weight: 600; }
.controle.goed { background: #e8f5ec; border-color: #bfe3c9; }
.inplannen-vak { margin-top: 18px; padding: 14px 16px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); }
.inplannen-vak h3 { margin-top: 0; }
.inplannen-vak input[type=datetime-local] { width: auto; }
.preview-kop { display: flex; align-items: center; justify-content: space-between; }
.schakel { display: flex; gap: 4px; }
.preview { display: flex; justify-content: center; padding: 16px 0; }

/* Weekweergave */
.week-nav { display: flex; gap: 8px; align-items: center; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.dag { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); min-height: 220px; display: flex; flex-direction: column; }
.dag.vandaag { border-color: var(--accent); }
.dag.vandaag .dag-kop { color: var(--accent); }
.dag.verleden { background: #fafbfc; opacity: .75; }
.dag.te-ver .dag-kop::after { content: " · buiten 2 weken"; font-weight: 400; color: var(--stil); }
.dag-kop { padding: 8px 10px; font-weight: 700; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.dag-inhoud { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dag-inhoud.over { background: #eef4fb; }
.week .tegel { box-shadow: none; }
.week .tegel-beeld { aspect-ratio: 16 / 9; }
.week .tegel-tekst { padding: 6px 8px 8px; }
.week .tegel-tekst p { display: none; }
.week .tegel[draggable=true] { cursor: grab; }

/* Login */
body.blank { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-kaart { background: #fff; padding: 36px 40px; border-radius: 14px; box-shadow: var(--schaduw); width: 420px; text-align: center; }
.login-kaart .flash { margin: 14px 0; text-align: left; }
.login-kaart .knop { margin-top: 10px; }

/* ===== Previews: nabouwen van de platforms ===== */
.pv { background: #fff; color: #050505; font-family: var(--font); border: 1px solid #e4e6eb; overflow: hidden; }
.pv.mobiel { width: 375px; border-radius: 24px; border: 8px solid #111; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.pv.desktop { width: 100%; max-width: 560px; border-radius: 8px; }
.pv-kop { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.pv-kop div { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.pv-kop small { color: #65676b; font-size: 12px; }
.pv-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.pv-avatar-leeg { display: inline-flex; align-items: center; justify-content: center; background: #0b5cad; color: #fff; font-weight: 700; }
.pv-dots-menu { color: #65676b; font-weight: 700; letter-spacing: 1px; }
.pv-volgen { color: #0a66c2; font-weight: 600; font-size: 13px; }
.pv-tekst { padding: 4px 14px 10px; font-size: 15px; line-height: 1.35; white-space: normal; word-wrap: break-word; }
.pv-tag { color: #0a66c2; }
.pv-meer { border: 0; background: none; color: #65676b; padding: 0; cursor: pointer; font: inherit; }
.pv-media { display: grid; gap: 2px; background: #000; }
.pv-media-item { position: relative; overflow: hidden; background: #111; }
.pv-media-item img, .pv-media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-media.n1 .pv-media-item { aspect-ratio: 4 / 3; }
.pv-media.n2 { grid-template-columns: 1fr 1fr; } .pv-media.n2 .pv-media-item { aspect-ratio: 1; }
.pv-media.n3 { grid-template-columns: 1fr 1fr; } .pv-media.n3 .pv-media-item:first-child { grid-column: span 2; aspect-ratio: 2 / 1; } .pv-media.n3 .pv-media-item { aspect-ratio: 1; }
.pv-media.n4 { grid-template-columns: 1fr 1fr; } .pv-media.n4 .pv-media-item { aspect-ratio: 1; }
.pv-media.n5 { grid-template-columns: 1fr 1fr 1fr; } .pv-media.n5 .pv-media-item:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 3 / 2; } .pv-media.n5 .pv-media-item:nth-child(1), .pv-media.n5 .pv-media-item:nth-child(2) { grid-column: auto; } .pv-media.n5 .pv-media-item { aspect-ratio: 1; }
.pv-media.n5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .pv-media.n5 .pv-media-item:nth-child(-n+2) { grid-column: span 3; } .pv-media.n5 .pv-media-item:nth-child(n+3) { grid-column: span 2; }
.pv-meer-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; font-size: 26px; font-weight: 700; }
.pv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; }
.pv-acties { display: flex; gap: 6px; padding: 8px 14px; border-top: 1px solid #e4e6eb; color: #65676b; font-size: 14px; font-weight: 600; }
.pv-acties span { flex: 1; text-align: center; }
.pv-link { margin: 0 0 8px; border-top: 1px solid #e4e6eb; border-bottom: 1px solid #e4e6eb; background: #f0f2f5; }
.pv-link-beeld { aspect-ratio: 1.91 / 1; background: linear-gradient(135deg, #d7dde5, #b8c3d1); }
.pv-link-tekst { padding: 10px 14px; display: flex; flex-direction: column; }
.pv-link-tekst small { color: #65676b; } .pv-link-tekst strong { word-break: break-all; font-size: 14px; }

/* Facebook */
.pv-facebook .pv-kop strong { font-size: 15px; }
.pv-facebook .pv-tekst { padding-top: 0; }

/* Instagram */
.pv-instagram .pv-kop strong { font-size: 14px; }
.pv-instagram .pv-avatar { width: 32px; height: 32px; border: 2px solid #fff; outline: 2px solid #e1306c; }
.pv-ig-carrousel { grid-template-columns: 1fr !important; }
.pv-ig-carrousel .pv-media-item { aspect-ratio: 4 / 5 !important; }
.pv-ig-carrousel .pv-media-item:not(:first-child) { display: none; }
.pv-dots { display: flex; justify-content: center; gap: 4px; padding: 8px 0 0; }
.pv-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; } .pv-dots i:first-child { background: #0095f6; }
.pv-acties.ig { border-top: 0; font-size: 22px; font-weight: 400; color: #262626; padding-bottom: 4px; }
.pv-acties.ig span { flex: none; } .pv-acties.ig .rechts { margin-left: auto; }
.pv-likes { padding: 0 14px; font-size: 14px; }
.pv-ig-caption { padding: 4px 14px 0; font-size: 14px; }
.pv-ig-caption .pv-tekst { display: inline; padding: 0; font-size: 14px; }
.pv-ig-reactie { padding: 4px 14px; font-size: 14px; color: #262626; }
.pv-tijd { display: block; padding: 6px 14px 12px; color: #8e8e8e; font-size: 10px; letter-spacing: .3px; }

/* Reel / TikTok (verticaal, tekst over beeld) */
.pv-instagram.reel, .pv-tiktok { background: #000; color: #fff; }
.pv-reel { position: relative; aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
.pv-reel .pv-media { position: absolute; inset: 0; display: block; }
.pv-reel .pv-media-item { height: 100%; aspect-ratio: auto; }
.pv-reel .pv-media-item:not(:first-child) { display: none; }
.pv-reel-zijkant { position: absolute; right: 10px; bottom: 90px; display: flex; flex-direction: column; gap: 16px; align-items: center; font-size: 26px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pv-reel-zijkant span { display: flex; flex-direction: column; align-items: center; font-size: 24px; line-height: 1; }
.pv-reel-zijkant small { font-size: 11px; font-weight: 600; margin-top: 2px; }
.pv-reel-zijkant .pv-avatar { width: 40px; height: 40px; border: 2px solid #fff; }
.pv-reel-onder { position: absolute; left: 0; right: 60px; bottom: 0; padding: 12px 14px; background: linear-gradient(transparent, rgba(0,0,0,.65)); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pv-reel-onder .pv-kop { padding: 0 0 6px; }
.pv-reel-onder .pv-kop strong { color: #fff; font-size: 14px; }
.pv-reel-onder .pv-tekst { padding: 4px 0; font-size: 14px; color: #fff; }
.pv-reel-onder .pv-tag { color: #fff; font-weight: 600; }
.pv-reel-onder .pv-meer { color: #ddd; }
.pv-reel-onder small { color: #eee; font-size: 12px; }
.pv-reel-onder .pv-volgen { color: #fff; border: 1px solid #fff; padding: 1px 8px; border-radius: 6px; font-size: 12px; }
.pv-tiktok .pv-reel-onder strong { font-size: 15px; }
.pv.desktop .pv-reel { max-width: 320px; margin: 0 auto; }

/* LinkedIn */
.pv-linkedin { font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.pv-linkedin .pv-avatar { border-radius: 4px; width: 48px; height: 48px; }
.pv-linkedin .pv-kop strong { font-size: 14px; }
.pv-linkedin .pv-tekst { font-size: 14px; }
.pv-linkedin .pv-media.n1 .pv-media-item { aspect-ratio: auto; max-height: 420px; }
.pv-linkedin .pv-media.n1 .pv-media-item img { max-height: 420px; }
.pv-document { margin: 0 14px 10px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.pv-doc-pagina { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #f3f2ef; font-weight: 600; }
.pv-document small { display: block; padding: 6px 10px; color: #666; }
.pv-reacties { padding: 4px 14px; color: #666; }
.pv-acties.li { font-size: 13px; }