/* KELLAR HQ — app.css */
:root {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --ink: #1C1C1E;
  --mut: #6E6E73;
  --chev: #B4B4BA;
  --sep: rgba(60, 60, 67, 0.13);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.16);
  --accent-txt: #C9420F;
  --green: #1A7A3A;
  --late: #C9420F;
  --ring: 0 0 0 1px rgba(0, 0, 0, 0.035), 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px -14px rgba(0, 0, 0, 0.14);
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --r-lg: 20px;
  --r: 16px;
  --r-sm: 12px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--mut); }
.small { font-size: 13px; }
.grow { flex: 1; }
.ic { flex: none; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  width: 248px; flex: none; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  background: rgba(255, 255, 255, 0.72); border-right: 1px solid var(--sep);
  padding: 26px 14px 20px; display: flex; flex-direction: column; gap: 26px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 12px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; }
.brand__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex: none; }
.brand__mark--lg { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; }
.sidenav { display: flex; flex-direction: column; gap: 22px; }
.sidenav__group { display: flex; flex-direction: column; gap: 2px; }
.sidenav__title { font-size: 12px; font-weight: 600; color: var(--mut); padding: 0 12px 6px; }
.sidenav__item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 15px; }
.sidenav__item .ic { color: #48484A; }
.sidenav__item:hover { background: rgba(118, 118, 128, 0.08); }
.sidenav__item.is-active { background: rgba(118, 118, 128, 0.14); font-weight: 600; }
.sidenav__item.is-active .ic { color: var(--ink); }
.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 12px 4px 0 12px; border-top: 1px solid var(--sep); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #8E8E93, #636366); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex: none; }
.profile__txt { display: flex; flex-direction: column; min-width: 0; }
.profile__name { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; }
.profile__sub { font-size: 12px; color: var(--mut); }
.profile__logout { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--mut); }
.profile__logout:hover { background: var(--fill); color: var(--ink); }

.main { flex: 1; min-width: 0; padding: 34px clamp(20px, 3.5vw, 56px) 72px; }
.wrap { max-width: 1120px; margin: 0 auto; }

.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.pagehead__txt { display: flex; flex-direction: column; gap: 4px; }
.pagehead__sub { font-size: 13px; font-weight: 500; color: var(--mut); }
.pagehead h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tabbar { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform 120ms ease, background-color 120ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2C2C2E; }
.btn--grey { background: var(--fill); color: var(--ink); }
.btn--grey:hover { background: var(--fill-strong); }
.btn--white { background: #fff; color: var(--ink); }
.btn--text { background: transparent; color: var(--mut); padding: 0 12px; }
.btn--accent { color: var(--accent-txt); }
.btn--danger { color: var(--late); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn--lg { min-height: 50px; padding: 0 26px; font-size: 15px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; flex: none; }
.iconbtn:hover { background: var(--fill-strong); }
.iconbtn--sm { width: 34px; height: 34px; }
.btnrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btnrow--end { justify-content: flex-end; }
.btnrow--between { justify-content: space-between; }
.link { font-weight: 500; font-size: 14px; color: var(--accent-txt); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; min-height: 44px; display: inline-flex; align-items: center; }
.link-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 500; text-decoration: none; }

/* ---------- Groups & rows ---------- */
.group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: var(--r); overflow: hidden; box-shadow: var(--ring); }
.group > li { background: var(--card); }
.group--flat { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
.group--form { gap: 1px; }
.row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; background: var(--card); text-decoration: none; color: var(--ink); }
a.row:hover, .row--click:hover { background: #FAFAFC; }
.row > .ic:last-child { color: var(--chev); }
.row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row__title { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__title--flex { flex: 1; min-width: 0; }
.row__sub { font-size: 13px; color: var(--mut); }
.row--field { min-height: 56px; }
.row--click { cursor: pointer; }
.row--end { justify-content: flex-end; }
.is-disabled .row__title { color: var(--mut); }
.is-late { color: var(--late); font-weight: 600; }

.tile { width: 32px; height: 32px; border-radius: 9px; background: var(--tile, #8E8E93); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.dot--lg { width: 14px; height: 14px; }
.minipill { font-size: 11px; font-weight: 600; color: var(--mut); background: var(--fill); border-radius: 999px; padding: 3px 8px; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--mut); white-space: nowrap; flex: none; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; }
.status--idee .status__dot { border: 1.5px solid #AEAEB2; }
.status--script .status__dot { border: 1.5px solid var(--ink); }
.status--productie .status__dot { background: #AEAEB2; }
.status--klaar .status__dot { background: var(--ink); }
.status--gepland .status__dot { background: #FF9500; }
.status--live .status__dot { background: #34C759; }

.datetile { width: 52px; height: 58px; border-radius: 14px; background: var(--bg); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; line-height: 1.05; }
.datetile__d { font-size: 11px; font-weight: 600; color: var(--accent-txt); }
.datetile__n { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.datetile__m { font-size: 11px; color: var(--mut); }
.datetile--xl { width: 92px; height: 100px; border-radius: 20px; background: #fff; color: var(--ink); }
.datetile--xl .datetile__d { font-size: 13px; }
.datetile--xl .datetile__n { font-size: 36px; letter-spacing: -0.03em; }
.datetile--xl .datetile__m { font-size: 13px; }

/* ---------- Sections ---------- */
.sechead { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 8px; }
.sechead h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.sechead--sm h2 { font-size: 15px; }
.block { margin-top: 36px; }
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.split > .hero { flex: 1.3 1 440px; }
.split__side { flex: 1 1 320px; min-width: 0; }
.empty { background: var(--card); border-radius: var(--r); box-shadow: var(--ring); padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--mut); }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 20px; min-height: 360px; box-shadow: var(--ring); }
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero__label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.pill--glass { background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.hero__main { display: flex; align-items: center; gap: 20px; }
.hero__title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero__name { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.hero__meta { font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.hero__progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.hero__progress span { display: block; height: 100%; border-radius: 3px; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.12); border-radius: 14px; overflow: hidden; }
.hero__facts div { background: #2C2C2E; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero__facts span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.hero__facts strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero__actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.hero--empty { justify-content: flex-start; }
.hero--empty .hero__name { font-size: 26px; margin-top: 8px; }
.hero--empty .hero__meta { max-width: 42ch; }

/* ---------- Segmented ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill); max-width: 100%; overflow-x: auto; margin-bottom: 20px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg__item { flex: 0 0 auto; min-height: 36px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); cursor: pointer; white-space: nowrap; position: relative; }
.seg__item input { position: absolute; opacity: 0; pointer-events: none; }
.seg__item.is-on, .seg__item:has(input:checked) { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04); }
.seg__item:has(input:focus-visible) { outline: 2px solid #0A84FF; outline-offset: 1px; }
.seg--full { display: flex; }
.seg--full .seg__item { flex: 1; }
.seg--sm .seg__item { min-height: 32px; font-size: 13px; padding: 0 12px; }

/* ---------- Content ---------- */
.days { display: flex; flex-direction: column; gap: 18px; }
.today-pill { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 999px; padding: 3px 8px; vertical-align: 2px; }
.day__empty { font-size: 13px; color: var(--mut); padding: 0 4px; }

/* ---------- Forms ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 500; color: var(--mut); }
.field__label--group { display: block; padding-left: 16px; margin-bottom: 6px; }
.field__hint { font-size: 12px; color: var(--mut); padding: 6px 16px 0; }
.field--grow { flex: 1 1 260px; }
.input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 0; background: var(--fill); font-size: 15px; color: var(--ink); }
textarea.input { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.input--card { background: var(--card); box-shadow: var(--ring); border-radius: var(--r); padding: 14px 16px; }
.input--lg { min-height: 50px; font-size: 16px; padding: 0 16px; border-radius: 14px; }
.input--inline { width: auto; max-width: 60%; min-height: 40px; background: transparent; padding: 0; text-align: right; color: var(--mut); border-radius: 8px; }
select.input--inline { cursor: pointer; }
.input--bare { background: transparent; padding: 0; min-height: 40px; font-weight: 500; border-radius: 6px; }
.form-error { background: #FFE9E0; color: #A8350B; padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 16px; }

.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch__ui { position: absolute; inset: 0; border-radius: 999px; background: rgba(120, 120, 128, 0.16); transition: background 200ms ease; }
.switch__ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); transition: transform 200ms ease; }
.switch input:checked + .switch__ui { background: #34C759; }
.switch input:checked + .switch__ui::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid #0A84FF; outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch__ui { opacity: 0.45; }

/* ---------- Editor + Instagram preview ---------- */
.editor { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.editor__form { flex: 1.4 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.editor__form .seg { margin-bottom: 0; }
.editor__preview { flex: 1 1 320px; min-width: 0; position: sticky; top: 24px; }
.ig { background: #fff; border: 1px solid #DBDBDB; border-radius: 12px; overflow: hidden; max-width: 420px; color: #000; }
.ig__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig__ring { width: 36px; height: 36px; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); flex: none; }
.ig__ring span { display: flex; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: var(--ink); color: #fff; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.ig__who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ig__name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.ig__sub { font-size: 12px; color: #737373; }
.ig__media { position: relative; aspect-ratio: 4 / 5; background: #EFEFF1; overflow: hidden; }
.ig__media img, .ig__media video { width: 100%; height: 100%; object-fit: cover; }
.ig__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8E8E93; font-size: 13px; }
.ig__badge { position: absolute; top: 12px; right: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.ig__badge:empty { display: none; }
.ig__actions { display: flex; align-items: center; gap: 16px; padding: 10px 12px 6px; }
.ig__save { margin-left: auto; display: flex; }
.ig__body { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; }
.ig__likes { font-weight: 600; }
.ig__caption { white-space: pre-line; overflow-wrap: anywhere; }
.ig__when { font-size: 12px; color: #737373; }
.verified { flex: none; }

/* ---------- Boards / kanban ---------- */
.boards { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.boards__side { flex: 0 1 260px; min-width: 0; }
.boards__main { flex: 999 1 560px; min-width: 0; }
.boards__item { min-height: 52px; gap: 12px; }
.boards__item.is-on { background: rgba(118, 118, 128, 0.14); }
.boards__item.is-on .row__title { font-weight: 600; }
.boards__chips { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); cursor: pointer; white-space: nowrap; }
.chip.is-on { background: var(--ink); color: #fff; }
.chip--add { width: 40px; padding: 0; justify-content: center; background: transparent; box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.3); }
.panel { background: var(--card); border-radius: var(--r); box-shadow: var(--ring); padding: 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.panel .seg { margin-bottom: 0; }
.panel form, .panel > div { display: flex; flex-direction: column; gap: 12px; }
.panel--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin: 0 0 16px; }
.boardtitle { display: flex; align-items: center; gap: 10px; }
.relstrip { background: var(--card); border-radius: 18px; box-shadow: var(--ring); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-bottom: 16px; }
.relstrip > div { display: flex; flex-direction: column; gap: 2px; }
.relstrip span { font-size: 12px; color: var(--mut); }
.relstrip strong { font-size: 15px; font-weight: 600; }
.relstrip__bar { flex: 1 1 220px; gap: 8px !important; }
.relstrip__row { display: flex; justify-content: space-between; }
.relstrip__row strong { font-size: 12px; color: var(--ink); }
.bar { display: block; height: 6px; border-radius: 3px; background: rgba(118, 118, 128, 0.14); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 3px; }
.coltabs { display: none; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.kcol__head { font-size: 15px; font-weight: 600; margin: 0 0 8px 4px; }
.task { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 10px 16px; }
.task__title { font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.task.is-done .task__title { color: var(--mut); text-decoration: line-through; }
.task__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.task__sub { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--mut); min-width: 0; }
.task__sub strong { color: var(--ink); font-weight: 600; }
.task__btns { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.task__move { flex: none; min-height: 32px; padding: 0 13px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.task.is-done .task__move { background: var(--fill); color: var(--ink); }
.task__del { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--chev); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; }
.task:hover .task__del, .task:focus-within .task__del, .tpl__row .task__del { opacity: 1; }
.task__del:hover { color: var(--late); background: var(--fill); }
.task-empty { padding: 20px 16px; font-size: 14px; color: var(--mut); }

/* ---------- Settings ---------- */
.settings { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.settings__col { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.tpl__row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 8px 6px 12px; }
.tpl__off { width: 76px; flex: none; }
.tpl__off .input { width: 100%; max-width: none; text-align: center; background: var(--fill); color: var(--ink); font-weight: 600; min-height: 36px; border-radius: 10px; }
.tpl__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings form .btnrow { margin-top: 10px; }

/* ---------- Wizard ---------- */
.wizard-page { background: var(--bg); }
.wizard { max-width: 680px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom)); }
.wizard__top { display: flex; justify-content: space-between; align-items: center; }
.wizard__segs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 10px 0 20px; }
.wizard__segs span { height: 4px; border-radius: 2px; background: rgba(118, 118, 128, 0.2); transition: background 200ms ease; }
.wizard__segs span.is-done { background: var(--ink); }
.wizard__card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--ring); padding: 30px; }
.wstep { display: flex; flex-direction: column; gap: 16px; }
.wq { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.wq__eyebrow { font-size: 12px; font-weight: 600; color: var(--accent-txt); }
.wq h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.wq p { font-size: 15px; color: var(--mut); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { flex: 1 1 200px; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); cursor: pointer; position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid #0A84FF; outline-offset: 2px; }
.choice__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.choice__txt { display: flex; flex-direction: column; gap: 2px; }
.choice__txt strong { font-size: 15px; font-weight: 600; }
.choice__txt span { font-size: 13px; color: var(--mut); }
.drop { display: block; border-radius: 18px; cursor: pointer; }
.drop__empty { min-height: 180px; border: 1.5px dashed rgba(60, 60, 67, 0.3); border-radius: 18px; background: rgba(118, 118, 128, 0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; }
.drop__empty span { font-size: 13px; color: var(--mut); }
.drop__file { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.drop__file img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--fill); }
.drop__file > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.drop:has(input:focus-visible) { outline: 2px solid #0A84FF; outline-offset: 2px; }
.ok { color: var(--green); font-size: 13px; }
.summary .row { min-height: 52px; gap: 12px; }
.summary__k { width: 120px; flex: none; font-size: 14px; color: var(--mut); }
.summary__v { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.plan li { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 16px; }
.plan__off { width: 52px; flex: none; font-size: 13px; font-weight: 600; color: var(--mut); }
.plan__t { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.plan__t.is-done { color: var(--mut); text-decoration: line-through; }
.plan__d { font-size: 13px; color: var(--mut); white-space: nowrap; }
.wizard__bar { display: flex; align-items: center; gap: 10px; margin-top: 24px; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth__card { width: min(400px, 100%); background: var(--card); border-radius: 24px; box-shadow: var(--ring); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.auth__card h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.auth__card .form-error { margin: 0; }

/* ---------- Shows ---------- */
.only-mobile { display: none; }
.verdict { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; }
.verdict--ok { background: #E4F7EA; color: #1A7A3A; }
.verdict--wait { background: var(--bg); color: var(--ink); }
.verdict--none { background: #FFE9E0; color: #A8350B; }
.tmpill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.tmpill--kan { background: var(--ink); color: #fff; }
.tmpill--niet { background: var(--bg); color: var(--mut); text-decoration: line-through; }
.tmpill--open { background: var(--bg); color: var(--mut); }
.row--show { align-items: center; padding-top: 12px; padding-bottom: 12px; }
.showrow__tms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.showrow__end { display: flex; align-items: center; }
.nextshow { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card); border-radius: var(--r); box-shadow: var(--ring); text-decoration: none; margin-bottom: 24px; }
.nextshow:hover { background: #FAFAFC; }
.datetile--lg { width: 64px; height: 70px; border-radius: 16px; background: var(--card); box-shadow: var(--ring); }
.datetile--lg .datetile__n { font-size: 26px; }
.detail { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.detail__main { flex: 1.4 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.detail__side { flex: 1 1 320px; min-width: 0; }
.detail__head { display: flex; align-items: center; gap: 16px; }
.detail__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.detail__title .row__title { font-size: 19px; font-weight: 600; white-space: normal; }
.detail__val { text-align: right; max-width: 60%; }
.detail__notes { background: var(--card); border-radius: var(--r); box-shadow: var(--ring); padding: 14px 16px; font-size: 14px; color: var(--mut); }
.detail__links { margin-top: 12px; }
.detail__block .detail__notes { color: var(--ink); line-height: 1.55; }
.answer { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.answer--kan { background: #E4F7EA; color: #1A7A3A; }
.answer--niet { background: var(--bg); color: var(--mut); }
.answer--open { background: var(--bg); color: var(--ink); }
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.cronbox { margin-top: 14px; background: var(--card); border-radius: var(--r); box-shadow: var(--ring); padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cronbox__code { display: block; width: 100%; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; color: var(--ink); }

.diag { margin: 10px 0 0; background: var(--ink); color: #E5E5EA; border-radius: var(--r); padding: 14px 16px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.row--end { gap: 8px; }

/* ---------- Tourmanager-pagina ---------- */
.tmpage { min-height: 100vh; min-height: 100dvh; }
.tmpage__wrap { max-width: 560px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }
.tmpage__head { display: flex; flex-direction: column; gap: 4px; margin: 0 4px 20px; }
.tmpage__brand { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--mut); }
.tmpage__head h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.tmcard { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 20px; }
.tmcard__head { display: flex; align-items: center; gap: 14px; }
.tmcard__answer { display: flex; flex-direction: column; gap: 8px; }
.tmcard__q { font-size: 14px; font-weight: 500; }
.tmcard__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.answerbtn { min-height: 46px; border-radius: 999px; border: 0; background: var(--fill); color: var(--ink); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.answerbtn.is-on { background: var(--ink); color: #fff; }

/* ---------- Publieke pagina ---------- */
.public { background: #000; color: #fff; min-height: 100vh; min-height: 100dvh; display: flex; }
.public__wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: calc(40px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom)); }
.public__logo { margin: 0; line-height: 0; }
.public__logo img { width: min(340px, 72vw); height: auto; max-height: 40vh; object-fit: contain; }
.public__word { display: inline-block; font: 600 clamp(40px, 9vw, 72px)/1 var(--font); letter-spacing: 0.18em; margin-right: -0.18em; color: #fff; }
.public__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 420px; }
.public__social { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); text-decoration: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.public__social:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #fff; }
.public__social:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pubpreview { height: 140px; border-radius: var(--r); background: #000; display: flex; align-items: center; justify-content: center; padding: 20px; margin-bottom: 12px; box-shadow: var(--ring); }
.pubpreview img { max-width: 70%; max-height: 100px; object-fit: contain; }
.pubpreview .public__word { font-size: 34px; }
.sechead--group { min-height: 0; margin-bottom: 6px; padding-left: 16px; }
.field__label--gap { margin-top: 18px; }
.socials__row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 16px; }
.socials__net { width: 140px; flex: none; }
.socials__net select { width: 100%; cursor: pointer; }
.socials__url { flex: 1; min-width: 0; }
.socials__row .task__del { opacity: 1; }

@media (max-width: 420px) { .public__socials { gap: 10px; } .public__social { width: 46px; height: 46px; } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; top: calc(20px + env(safe-area-inset-top)); transform: translate(-50%, -8px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; z-index: 50; max-width: calc(100% - 32px); text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: #A8350B; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .only-mobile { display: inline-flex; }
  .row--show { flex-wrap: wrap; }
  .showrow__end { order: 3; width: 100%; padding-left: 66px; }
  .row--show > .ic:last-child { display: none; }
  .nextshow { flex-wrap: wrap; }
  .nextshow .verdict { margin-left: 66px; }
  .main { padding: calc(18px + env(safe-area-inset-top)) 16px calc(116px + env(safe-area-inset-bottom)); }
  .pagehead { margin-bottom: 20px; }
  .pagehead h1 { font-size: 26px; }
  .tabbar {
    display: flex; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
    height: 66px; border-radius: 999px; padding: 0 6px; gap: 2px; align-items: center;
    background: rgba(28, 28, 30, 0.92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.4);
  }
  .tabbar__item { flex: 1; height: 54px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 10px; font-weight: 600; min-width: 0; }
  .tabbar__item.is-active { background: #fff; color: var(--ink); }
  .tabbar__item--plus span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabbar__item--plus .ic { width: 26px; height: 26px; }
  .hero { padding: 20px; min-height: 0; }
  .hero__name { font-size: 26px; }
  .datetile--xl { width: 72px; height: 80px; border-radius: 16px; }
  .datetile--xl .datetile__n { font-size: 28px; }
  .hero__facts { grid-template-columns: 1fr; }
  .boards { gap: 0; }
  .boards__side { flex: 1 1 100%; }
  .boards__side > .sechead, .boards__list { display: none; }
  .boards__chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 4px; padding: 0 16px 6px; scrollbar-width: none; }
  .boards__chips::-webkit-scrollbar { display: none; }
  .boards__main { margin-top: 12px; }
  .coltabs { display: flex; margin-bottom: 14px; }
  .kanban { grid-template-columns: 1fr; }
  .kcol__head { display: none; }
  .kanban[data-show="todo"] .kcol:not([data-colwrap="todo"]),
  .kanban[data-show="doing"] .kcol:not([data-colwrap="doing"]),
  .kanban[data-show="done"] .kcol:not([data-colwrap="done"]) { display: none; }
  .task__del { opacity: 1; }
  .editor__preview { position: static; }
  .wizard__card { padding: 20px; }
  .wizard__bar { margin-top: 16px; }
  .summary__k { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   v1.4 — gelijkgetrokken met het ontwerp
   ========================================================= */
.only-mobile { display: none !important; }
.only-desktop { display: inline-flex; }
.only-desktop-inline { display: inline-flex; }
.sidenav__title { display: block; }

.pagehead { align-items: flex-end; }
.pagehead__sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--mut); }
.pagehead__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagehead__mobile { display: none; }
.search { display: flex; align-items: center; gap: 8px; height: 44px; width: 300px; max-width: 100%; padding: 0 14px; border-radius: 12px; background: var(--fill); color: var(--mut); }
.search input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font-size: 15px; color: var(--ink); }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid #0A84FF; outline-offset: 2px; }
.avatar--lg { width: 44px; height: 44px; font-size: 16px; text-decoration: none; }

.btn--glass { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--glass:hover { background: rgba(255, 255, 255, 0.2); }
.btn--grow { flex: 1; }
.iconbtn--dark { background: var(--ink); color: #fff; }
.iconbtn--dark:hover { background: #2C2C2E; }

.glabel, .field__label--group { display: block; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--mut); padding-left: 16px; margin-bottom: 6px; }
.row__value { flex: none; max-width: 60%; text-align: right; font-size: 15px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__value--link { color: var(--accent-txt); }

/* Home */
.split { margin-bottom: 36px; }
.hero { min-height: 400px; padding: 30px; }
.hero__meta { display: inline-flex; align-items: center; gap: 6px; }
.hero__name { font-size: 34px; }
.hero__facts strong { font-size: 15px; }
.hero__actions .btn { min-height: 50px; }
.heromini { display: none; }
.split__side { display: flex; flex-direction: column; gap: 14px; }
.stats { display: flex; flex-direction: column; gap: 14px; }
.stat { display: flex; flex-direction: column; gap: 4px; background: var(--card); border-radius: 18px; box-shadow: var(--ring); padding: 18px 20px; text-decoration: none; color: var(--ink); }
.stat:hover { background: #FAFAFC; }
.stat__label { font-size: 14px; font-weight: 600; color: var(--mut); }
.stat__value { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.stat__sub { font-size: 13px; font-weight: 600; color: #1A7A3A; }
.stat__sub.is-late { color: var(--late); }
.relcard { display: flex; align-items: center; gap: 16px; background: var(--ink); color: #fff; border-radius: 18px; padding: 18px 20px; text-decoration: none; }
.relcard__n { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.relcard__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.relcard__txt span { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.relcard__txt strong { font-size: 16px; font-weight: 600; }
.relcard .ic { color: rgba(255, 255, 255, 0.5); }
.twocol { display: flex; flex-wrap: wrap; gap: 28px; }
.twocol__main { flex: 1.3 1 440px; min-width: 0; }
.twocol__side { flex: 1 1 320px; min-width: 0; }

/* Content */
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.toolbar .seg { margin-bottom: 0; }
.seg__num { font-weight: inherit; }
.seg__count { color: var(--mut); font-weight: 500; }
.block--first { margin-top: 26px; }
.sechead .minipill { margin-left: auto; }

/* Editor */
.editor__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.editor__delete { align-self: flex-start; padding: 0 16px; }
.mhead { align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.mhead__title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; }
.mhead__spacer { width: 40px; flex: none; }

/* Shows */
.showrow__verdict { margin-top: 6px; }
.row--show { min-height: 76px; }
.detail__head { justify-content: space-between; margin-bottom: 2px; }
.detail__venue { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--mut); }
.detail__city { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
.detail__remind { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* Taken */
.boards__new { margin-top: 6px; padding: 0 12px; }
.task { flex-direction: row; align-items: center; gap: 8px; min-height: 64px; padding: 10px 12px 10px 16px; }
.task__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task__title { font-size: 15px; font-weight: 500; line-height: 1.35; }
.task__sub { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--mut); }

/* Tabbar volgens ontwerp */
@media (max-width: 900px) {
  .only-mobile { display: flex !important; }
  .only-desktop, .only-desktop-inline { display: none !important; }
  .pagehead { flex-wrap: nowrap; align-items: center; margin-bottom: 18px; }
  .pagehead__right { display: none; }
  .pagehead__mobile { display: inline-flex; flex: none; }
  .pagehead__sub { font-size: 12px; }
  .tabbar { left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); height: 70px; padding: 0 6px; gap: 2px; }
  .tabbar__item { height: 58px; font-size: 10.5px; }
  .main { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }

  .split { gap: 14px; margin-bottom: 28px; }
  .hero { display: none; }
  .hero.hero--empty { display: flex; }
  .heromini { display: flex; flex-direction: column; gap: 16px; background: var(--ink); color: #fff; border-radius: 20px; padding: 20px; text-decoration: none; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.5); }
  .heromini__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .heromini__main { display: flex; align-items: center; gap: 16px; }
  .heromini__main .ic { color: rgba(255, 255, 255, 0.5); }
  .heromini__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .heromini__name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
  .heromini__sub { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
  .datetile--white { background: #fff; color: var(--ink); width: 60px; height: 66px; }
  .datetile--white .datetile__n { font-size: 24px; }
  .split__side { flex: 1 1 100%; }
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { border-radius: 16px; padding: 14px 16px; }
  .stat__value { font-size: 20px; }
  .relcard { display: none; }

  .toolbar { margin-bottom: 12px; }
  .seg--days { display: flex; width: 100%; }
  .seg--days .seg__item { flex: 1; padding: 0 4px; }
  .seg--days .seg__num { display: none; }
  .seg--fullmobile { display: flex; }
  .seg--fullmobile .seg__item { flex: 1; padding: 0 8px; }
  .seg__count { display: none; }

  .page-editor .pagehead, .page-detail .pagehead { display: none; }
  .mhead { display: flex !important; }
  .page-editor .main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .editor__actions { position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 40; flex-wrap: nowrap; }
  .editor__actions .editor__concept { background: #fff; box-shadow: var(--ring); }
  .editor__actions .btn--dark { box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.45); }
  .editor__actions .btn { min-height: 56px; }

  .row--show { align-items: center; flex-wrap: nowrap; }
  .row--show > .ic:last-child { display: block; }
  .showrow__end { display: none; }
  .detail__head { margin-top: -4px; }
  .detail__city { display: block !important; }
  .detail__title { gap: 6px; }

  .boards__new { display: none; }
}
.search--page { width: 100%; margin-bottom: 16px; }
@media (min-width: 901px) {
  .task .task__del { display: none; }
  .task:hover .task__del, .task:focus-within .task__del { display: inline-flex; }
}

/* Streaming */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat--kpi { cursor: default; }
.stat--kpi:hover { background: var(--card); }
.stat__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.stat__delta { font-size: 13px; font-weight: 600; color: #1A7A3A; white-space: nowrap; }
.stat__delta.is-down { color: var(--late); }
.stat__sub--muted { color: var(--mut); font-weight: 500; }
.chartcard { background: var(--card); border-radius: 18px; box-shadow: var(--ring); padding: 22px 24px; }
.chartcard__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.chartcard__head h2 { font-size: 17px; font-weight: 600; }
.chartcard__head .seg { margin-bottom: 0; }
.chart { display: block; width: 100%; height: 220px; }
.chart__axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--mut); margin-top: 10px; }
.chart__empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--mut); }
.art { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; background: var(--fill); }
.art--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--mut); }
.seg__item--off { color: var(--mut); cursor: default; }
.panel--import { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.panel__txt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.link--inline { min-height: 0; font-size: 15px; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr; gap: 10px; }
  .chartcard { padding: 18px; }
  .chart { height: 150px; }
  .chartcard__head .seg { width: 100%; display: flex; }
  .chartcard__head .seg .seg__item { flex: 1; }
}

/* Streaming: overzicht */
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--mut); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 20px; }
.platform { display: flex; flex-direction: column; gap: 14px; background: var(--card); border-radius: 18px; box-shadow: var(--ring); padding: 18px 20px; text-decoration: none; color: var(--ink); }
.platform:hover { background: #FAFAFC; }
.platform__head { display: flex; align-items: center; gap: 12px; }
.platform__head strong { flex: 1; font-size: 16px; font-weight: 600; }
.platform__head .ic:last-child { color: var(--chev); }
.platform__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.platform__stats span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--mut); }
.platform__stats b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.platform__foot { font-size: 12px; color: var(--mut); }
@media (max-width: 900px) {
  .legend { width: 100%; }
}

.statbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.statbar .seg { margin-bottom: 0; }
@media (max-width: 900px) { .statbar { flex-direction: column; gap: 8px; } }

/* =========================================================
   Content planning v2
   ========================================================= */
.page-content .wrap { max-width: 1320px; }
.ctoolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.ctoolbar .seg { margin-bottom: 0; }
.dot--sm { width: 8px; height: 8px; margin-right: 2px; }
.mnav { width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.mnav__title { font-size: 15px; font-weight: 600; }

.cstrip { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.pipeline { flex: 2 1 520px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--sep); border-radius: 16px; overflow: hidden; box-shadow: var(--ring); }
.pipe { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 14px; background: var(--card); text-decoration: none; color: var(--ink); }
.pipe:hover { background: #FAFAFC; }
.pipe.is-on { background: var(--ink); }
.pipe.is-on .pipe__n, .pipe.is-on .status { color: #fff; }
.pipe__n { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.goals { flex: 1 1 300px; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: var(--card); border-radius: 16px; box-shadow: var(--ring); padding: 12px 16px; }
.goals__title { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--mut); }
.goal { display: flex; flex-direction: column; gap: 4px; }
.goal__row { display: flex; justify-content: space-between; font-size: 13px; }
.goal__row strong { font-weight: 600; }
.goal__row strong.is-done { color: #1A7A3A; }
.goal__bar { height: 5px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.goal__bar span { display: block; height: 100%; border-radius: 3px; }

.cal-wrap { display: flex; gap: 16px; align-items: flex-start; }
.weekcal { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wday { display: flex; flex-direction: column; gap: 8px; min-height: 420px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); transition: background-color 120ms ease, box-shadow 120ms ease; }
.wday.is-past { opacity: 0.7; }
.wday.is-today { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.wday__head { display: flex; align-items: baseline; gap: 6px; padding: 4px 4px 2px; }
.wday__name { font-size: 12px; font-weight: 600; color: var(--mut); text-transform: uppercase; }
.wday__num { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.wday.is-today .wday__name { color: var(--accent-txt); }
.wday__add { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--mut); text-decoration: none; }
.wday__add:hover { background: var(--fill); color: var(--ink); }
.wday__list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wday__empty { font-size: 12px; color: var(--chev); text-align: center; padding: 18px 0; }
.showmark { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: #FFF1E0; color: #8A4A00; font-size: 12px; font-weight: 600; text-decoration: none; }
.showmark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-drop].is-over { background: #EAF3FF !important; box-shadow: inset 0 0 0 2px #0A84FF !important; }

.pcard { display: flex; flex-direction: column; background: var(--card); border-radius: 12px; box-shadow: var(--ring); overflow: hidden; text-decoration: none; color: var(--ink); cursor: grab; border-top: 3px solid var(--tile); }
.pcard:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 20px -12px rgba(0, 0, 0, 0.25); }
.pcard.is-dragging, .pchip.is-dragging { opacity: 0.4; }
.pthumb { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--fill); overflow: hidden; }
.pthumb img, .pthumb video, .lthumb img, .lthumb video, .feedtile__img img, .feedtile__img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb--empty { display: flex; align-items: center; justify-content: center; color: #fff; background: var(--tile); }
.pcard .thumb--empty { aspect-ratio: auto; height: 44px; opacity: 0.9; }
.thumb__badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.pcard__body { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px 10px; }
.pcard__meta { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--mut); }
.pcard__type { font-weight: 600; color: var(--ink); }
.pcard__title { font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .status { font-size: 11px; }

.ideas { width: 240px; flex: none; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); max-height: calc(100vh - 40px); overflow-y: auto; }
.ideas__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.ideas__head h2 { font-size: 15px; font-weight: 600; }
.ideas__hint { font-size: 12px; color: var(--mut); padding: 0 4px; }
.ideas__list { display: flex; flex-direction: column; gap: 8px; }
.ideas .pcard .pthumb { aspect-ratio: 16 / 9; }
.ideas__new { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; border: 1.5px dashed rgba(60, 60, 67, 0.25); color: var(--mut); text-decoration: none; font-size: 13px; font-weight: 500; }
.ideas__new:hover { color: var(--ink); border-color: rgba(60, 60, 67, 0.45); }

.monthcal { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--sep); border-radius: 16px; overflow: hidden; box-shadow: var(--ring); }
.mcol { background: var(--card); font-size: 12px; font-weight: 600; color: var(--mut); text-align: center; padding: 8px 0; text-transform: uppercase; }
.mday { background: var(--card); min-height: 112px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mday.is-out { background: #FAFAFC; }
.mday.is-out .mday__num { color: var(--chev); }
.mday__head { display: flex; align-items: center; gap: 4px; }
.mday__num { font-size: 13px; font-weight: 600; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.mday.is-today .mday__num { background: var(--ink); color: #fff; }
.mday__add { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--chev); opacity: 0; text-decoration: none; }
.mday:hover .mday__add, .mday__add:focus-visible { opacity: 1; }
.mday__add:hover { background: var(--fill); color: var(--ink); }
.showdot { width: 18px; height: 18px; border-radius: 50%; background: #FFF1E0; color: #8A4A00; display: inline-flex; align-items: center; justify-content: center; }
.pchip { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--tile) 12%, white); text-decoration: none; color: var(--ink); font-size: 12px; cursor: grab; min-width: 0; }
.pchip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tile); flex: none; }
.pchip__time { color: var(--mut); flex: none; font-variant-numeric: tabular-nums; }
.pchip__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mday__more { font-size: 11px; color: var(--mut); text-decoration: none; padding-left: 6px; }
.ideas .pchip { min-height: 32px; }

.feedwrap { max-width: 640px; }
.feedprofile { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.feedprofile__txt { display: flex; flex-direction: column; gap: 2px; }
.ig__ring--lg { width: 56px; height: 56px; }
.ig__ring--lg span { font-size: 18px; }
.feedgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-radius: 12px; overflow: hidden; }
.feedtile { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--fill); text-decoration: none; overflow: hidden; }
.feedtile__img { position: absolute; inset: 0; display: block; }
.feedtile__img.thumb--empty { display: flex; opacity: 0.85; }
.feedtile__img.thumb--empty .ic { width: 28px; height: 28px; }
.feedtile__img.thumb--empty + .feedtile__title, .feedtile .feedtile__title { top: auto; bottom: 34px; }
.feedtile.is-planned::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #0A84FF; pointer-events: none; }
.feedtile__when { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: #0A84FF; color: #fff; font-size: 11px; font-weight: 600; }
.feedtile__title { position: absolute; left: 8px; right: 8px; top: 8px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

.lthumb { position: relative; width: 44px; height: 55px; border-radius: 8px; overflow: hidden; flex: none; background: var(--fill); display: inline-flex; }
.lthumb .thumb__badge { top: 3px; right: 3px; width: 18px; height: 18px; }
.block--tight { margin-top: 22px; }
.input--num { width: 72px; text-align: right; }

@media (max-width: 1100px) {
  .ideas { display: none; }
}
@media (max-width: 900px) {
  .ctoolbar .seg { width: 100%; display: flex; }
  .ctoolbar .seg .seg__item { flex: 1; padding: 0 6px; }
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); flex-basis: 100%; }
  .goals { flex-basis: 100%; }
  .weekcal { grid-template-columns: 1fr; }
  .wday { min-height: 0; }
  .wday__list { gap: 6px; }
  .wday__list .wday__empty { padding: 4px; text-align: left; }
  .wday .pcard { flex-direction: row; border-top: 0; border-left: 3px solid var(--tile); }
  .wday .pcard .pthumb { width: 52px; flex: none; aspect-ratio: 4 / 5; }
  .wday .pcard .thumb--empty { height: auto; width: 52px; }
  .wday .pcard__body { flex: 1; min-width: 0; justify-content: center; }
  .monthcal .pchip__time, .monthcal .pchip__title { display: none; }
  .mday { min-height: 64px; padding: 4px; }
  .pchip { min-height: 10px; padding: 3px; justify-content: center; }
  .monthcal .pchip__dot { width: 8px; height: 8px; }
  .mday__add { display: none; }
  .feedwrap { max-width: none; }
}

/* =========================================================
   Content planning v3 (verbetervoorstel)
   ========================================================= */
.only-mobile-block { display: none; }
.ctoolbar { gap: 10px; margin-bottom: 16px; }
.ctoolbar__today { min-height: 40px; }
.periodnav { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: var(--ring); }
.periodnav__btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
.periodnav__btn:hover { background: var(--fill); }
.periodnav__title { padding: 0 6px 0 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.periodnav__sub { padding-right: 6px; font-size: 13px; color: var(--mut); }
.typechips { display: flex; gap: 6px; flex-wrap: wrap; }
.typechip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: var(--ring); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; }
.typechip.is-on { background: var(--ink); color: #fff; }

.csummary { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px 26px; background: #fff; border-radius: 18px; box-shadow: var(--ring); padding: 16px 20px; margin-bottom: 16px; }
.csummary__goal { flex: 1 1 340px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.csummary__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.csummary__big { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.csummary__big span { color: var(--mut); font-weight: 500; }
.csummary__txt { font-size: 14px; color: var(--mut); }
.csummary__edit { margin-left: auto; min-height: 0; font-size: 13px; }
.goalbar { display: flex; gap: 4px; }
.goalbar span { flex: 1; height: 8px; border-radius: 4px; background: rgba(118, 118, 128, 0.16); }
.goallegend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.goallegend > span { display: inline-flex; align-items: center; gap: 4px; }
.goallegend b { font-weight: 600; margin-left: 2px; }
.goallegend b.is-done { color: #1A7A3A; }
.goalpanel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 10px; border-top: 1px solid var(--sep); }
.goalpanel__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mut); }
.goalpanel__field .input { width: 110px; min-height: 40px; }
.csummary__divider { width: 1px; background: var(--sep); }
.csummary__pipe { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.glabel--flush { padding-left: 0; margin-bottom: 0; }
.pipechips { display: flex; flex-wrap: wrap; gap: 4px; }
.pipechip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(118, 118, 128, 0.10); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; }
.pipechip b { font-weight: 600; }
.pipechip .status { gap: 0; }
.pipechip.is-zero { background: transparent; color: #AEAEB2; }
.pipechip.is-zero .status__dot { opacity: 0.45; }
.pipechip.is-on { background: var(--ink); color: #fff; }

.cempty { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: #fff; margin-bottom: 14px; }
.cempty__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cempty__txt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
.cempty__txt strong { font-size: 16px; font-weight: 600; }
.cempty__txt span { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.cempty .btn { min-height: 42px; }

.weekcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wday { display: flex; flex-direction: column; gap: 8px; min-height: 360px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); opacity: 1; }
.wday.is-past { background: rgba(255, 255, 255, 0.4); opacity: 1; }
.wday.is-past .wday__name, .wday.is-past .wday__num { color: #AEAEB2; }
.wday.is-today { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.wday.is-show { box-shadow: inset 0 3px 0 #FF9500, inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.wday.is-today.is-show { box-shadow: inset 0 3px 0 #FF9500, inset 0 0 0 1.5px var(--ink); }
.wday__head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
.wday__name { font-size: 12px; font-weight: 600; color: var(--mut); text-transform: uppercase; }
.wday__num { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.wday.is-today .wday__name { color: var(--accent-txt); }
.wday.is-today .wday__num { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.wday__past { font-size: 12px; color: #AEAEB2; padding: 6px 4px; }
.wslot { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 12px; border: 1.5px dashed rgba(60, 60, 67, 0.2); color: var(--mut); text-decoration: none; font-size: 12px; font-weight: 500; }
.wslot:hover { color: var(--ink); border-color: rgba(60, 60, 67, 0.4); background: rgba(255, 255, 255, 0.6); }
.wslot--wide { min-height: 50px; font-size: 14px; margin-top: 10px; }

.cshow { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: #FFF1E0; color: #8A4A00; }
.cshow__label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.cshow__city { font-size: 14px; font-weight: 600; color: #5C3300; text-decoration: none; }
.cshow__meta { font-size: 12px; }
.cshow__btn { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; border: 0; border-radius: 8px; background: #fff; color: #8A4A00; font: 600 12px var(--font); cursor: pointer; }
.cshow__btn:disabled { opacity: 0.6; }

.pcard { border-top: 0; box-shadow: inset 3px 0 0 var(--tile), 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 14px -10px rgba(0, 0, 0, 0.25); border-radius: 12px; }
.pcard:hover { box-shadow: inset 3px 0 0 var(--tile), 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 20px -12px rgba(0, 0, 0, 0.3); }
.pcard .pthumb { aspect-ratio: auto; height: 84px; }
.pcard__body { padding: 8px 10px 9px 12px; gap: 4px; }
.pcard__meta { font-size: 11px; }
.pcard__type { color: var(--tile); font-weight: 600; }
.pcard__title { font-size: 13px; -webkit-line-clamp: 2; }

.monthcal { margin-bottom: 0; }
.mday.is-show { box-shadow: inset 0 3px 0 #FF9500; }

.cideas { margin-top: 26px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); transition: background-color 120ms ease; }
.cideas .sechead { margin-bottom: 10px; padding: 0 4px; min-height: 0; }
.cideas .sechead h2 .muted { font-weight: 500; margin-left: 4px; }
.ideacapture { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: #fff; box-shadow: var(--ring); margin-bottom: 12px; }
.ideacapture__icon { color: var(--mut); display: flex; }
.ideacapture input[type="text"] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; color: var(--ink); min-height: 40px; }
.ideacapture input[type="text"]:focus { outline: none; }
.ideacapture:focus-within { box-shadow: 0 0 0 2px #0A84FF; }
.ideacapture__types { display: flex; gap: 2px; }
.ideatype { position: relative; cursor: pointer; }
.ideatype input { position: absolute; opacity: 0; pointer-events: none; }
.ideatype > span { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--mut); }
.ideatype input:checked + span { background: var(--tile); color: #fff; }
.ideatype input:focus-visible + span { outline: 2px solid #0A84FF; outline-offset: 1px; }
.idealist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.idea { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: inset 3px 0 0 var(--tile), 0 0 0 1px rgba(0, 0, 0, 0.04); text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500; cursor: grab; }
.idea__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea__type { color: var(--mut); display: flex; }
.idea.is-dragging { opacity: 0.4; }
.cideas__empty { padding: 4px; }

@media (max-width: 1100px) {
  .ctoolbar .typechips { order: 5; }
}
@media (max-width: 900px) {
  .only-desktop-grid { display: none !important; }
  .only-mobile-block { display: block; }
  .ctoolbar { gap: 8px; }
  .periodnav { width: 100%; justify-content: space-between; }
  .periodnav__sub { display: none; }
  .periodnav__title { white-space: nowrap; }
  .ctoolbar .grow { display: none; }
  .ctoolbar__today { display: none; }
  .typechips { width: 100%; }
  .typechip { flex: 1; justify-content: center; padding: 0 6px; }
  .ctoolbar .seg { width: 100%; display: flex; }
  .ctoolbar .seg .seg__item { flex: 1; }
  .csummary { padding: 14px 16px; }
  .csummary__divider { display: none; }
  .csummary__pipe { display: none; }
  .weekstrip { display: flex; gap: 2px; padding: 4px; border-radius: 18px; background: #fff; box-shadow: var(--ring); margin-bottom: 16px; }
  .weekstrip__day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border-radius: 14px; text-decoration: none; color: var(--ink); }
  .weekstrip__name { font-size: 11px; font-weight: 600; color: var(--mut); }
  .weekstrip__num { font-size: 17px; font-weight: 600; }
  .weekstrip__dots { display: flex; gap: 3px; height: 5px; }
  .weekstrip__dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
  .weekstrip__dots i.is-show { background: #FF9500; }
  .weekstrip__day.is-today .weekstrip__name { color: var(--accent-txt); }
  .weekstrip__day.is-on { background: var(--ink); color: #fff; }
  .weekstrip__day.is-on .weekstrip__name { color: rgba(255, 255, 255, 0.7); }
  .mweek .cshow { margin-bottom: 10px; }
  .mweek .cshow__btn { min-height: 40px; }
  .ideacapture__types { display: none; }
  .idealist { grid-template-columns: 1fr; }
  .cideas { padding: 10px; }
}

/* Uploadvoortgang */
.uploadpanel { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; width: min(360px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5); font-size: 14px; }
.uploadpanel__name { font-size: 12px; color: rgba(255, 255, 255, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploadpanel__bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.uploadpanel__bar span { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; transition: width 150ms ease; }
@media (min-width: 901px) { .uploadpanel { bottom: 28px; } }

/* =========================================================
   Shows v2
   ========================================================= */
.only-desktop-flex { display: flex; }
.page-shows .wrap, .page-show .wrap { max-width: 1120px; }
.verdict--skip { background: var(--fill); color: var(--mut); }

.spill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.spill__dot { width: 6px; height: 6px; border-radius: 50%; }
.spill--confirmed { background: #E3F5E8; color: #1A7A3A; }
.spill--confirmed .spill__dot { background: #34C759; }
.spill--option { background: #FFF1D6; color: #8A5300; }
.spill--option .spill__dot { background: #FF9F0A; }

.datetile--opt { background: #FFFBF3 !important; box-shadow: none !important; border: 1.5px dashed #FF9F0A; }
.datetile--opt .datetile__d { color: #8A5300; }
.abroad { display: inline-flex; align-items: center; gap: 3px; min-height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(118, 118, 128, 0.12); font-size: 11px; font-weight: 600; color: var(--mut); }

.skpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.skpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border-radius: 16px; box-shadow: var(--ring); text-decoration: none; color: var(--ink); }
.skpi:hover { background: #FAFAFC; }
.skpi__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mut); }
.skpi__label i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.skpi__n { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.skpi__sub { font-size: 12px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.sfilters .seg { margin-bottom: 0; }
.sfilters__div { width: 1px; height: 24px; background: var(--sep); }
.slegend { gap: 16px; margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--mut); }
.slegend span { display: inline-flex; align-items: center; gap: 6px; }
.slegend__tile { width: 14px; height: 14px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); display: inline-block; box-sizing: border-box; }
.slegend__tile--opt { box-shadow: none; border: 1.5px dashed #FF9F0A; background: #FFFBF3; }

.smonth { display: flex; align-items: baseline; gap: 8px; margin: 20px 4px 8px; }
.smonth h2 { font-size: 17px; font-weight: 600; }
.smonth span { font-size: 13px; font-weight: 500; color: var(--mut); }
.slist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 18px; overflow: hidden; box-shadow: var(--ring); }
.srow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 130px 110px 260px 18px; align-items: center; gap: 16px; padding: 12px 18px; background: #fff; text-decoration: none; color: var(--ink); }
.srow:hover { background: #FAFAFC; }
.srow.is-option { background: #FFFCF6; box-shadow: inset 3px 0 0 #FF9F0A; }
.srow.is-option:hover { background: #FFF8EC; }
.srow .datetile { width: 46px; height: 52px; }
.srow > .ic:last-child { color: var(--chev); }
.srow__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.srow__city { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.srow.is-option .srow__city { color: #3A3A3C; }
.srow__venue { font-size: 13px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow__mobile { display: none; }
.srow__time { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.srow__time .ic { color: var(--mut); }
.srow__time.is-muted { color: var(--mut); }

.tmcell { display: inline-flex; align-items: center; gap: 10px; }
.tmcell__avs { display: inline-flex; }
.tmcell__avs .tmav + .tmav { margin-left: -6px; }
.tmcell__txt { font-size: 12px; font-weight: 600; }
.tmcell__txt--ok { color: #1A7A3A; }
.tmcell__txt--none { color: #B3261E; }
.tmcell__txt--wait { color: var(--mut); }
.tmcell--skip { gap: 6px; font-size: 12px; font-weight: 500; color: var(--mut); }
.tmcell--ask { min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1.5px dashed rgba(60, 60, 67, 0.25); font-size: 12px; font-weight: 600; color: var(--mut); }

.tmav { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #E5E5EA; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px #fff; flex: none; }
.tmav--lg { width: 38px; height: 38px; font-size: 13px; }
.tmav__badge { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.tmav__badge--kan { background: #34C759; }
.tmav__badge--niet { background: #FF3B30; }
.tmav__badge--open { background: #AEAEB2; }

/* Show-detail */
.backlink { align-items: center; gap: 6px; min-height: 36px; color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 14px; width: max-content; }
.backlink:hover { color: var(--ink); }
.shero { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 22px 24px; background: #fff; border-radius: 20px; box-shadow: var(--ring); margin-bottom: 18px; }
.shero.is-option { background: #FFFCF6; box-shadow: inset 0 0 0 1.5px #FFD48A; }
.shero .datetile--xl { width: 64px; height: 70px; }
.shero__main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.shero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--mut); }
.shero h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.shero__venue { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--mut); }
.shero__set { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 0 8px; }
.shero__setlabel { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--mut); }
.shero__settime { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.shero__date { font-size: 13px; font-weight: 500; color: var(--mut); }
.shero__actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--sep); }
.shero__actions:empty { display: none; }
.shero__actions .btn { min-height: 42px; }

.sdetail { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sdetail__main { flex: 1.4 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sdetail__side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sdetail .sechead { margin: 10px 4px 0; }
.sdetail__side .sechead { margin-top: 0; }
.sinfo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sinfo__card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border-radius: 16px; box-shadow: var(--ring); min-width: 0; }
.sinfo__k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mut); }
.sinfo__v { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.sinfo__s { font-size: 12px; color: var(--mut); }
.lineup { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 16px; box-shadow: var(--ring); }
.lineup li { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; min-height: 40px; padding: 4px 14px; border-radius: 10px; }
.lineup__t { font-size: 13px; font-weight: 500; color: var(--mut); font-variant-numeric: tabular-nums; }
.lineup__n { font-size: 14px; font-weight: 500; }
.lineup li.is-me { background: var(--ink); color: #fff; }
.lineup li.is-me .lineup__t { color: rgba(255, 255, 255, 0.7); }
.lineup li.is-me .lineup__n { font-weight: 600; }
.lineup__me { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.sblock { margin: 0; padding: 14px 16px; background: #fff; border-radius: 16px; box-shadow: var(--ring); }

.tmneed { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fff; border-radius: 16px; box-shadow: var(--ring); }
.tmneed__txt { display: flex; flex-direction: column; gap: 2px; }
.tmneed__txt strong { font-size: 15px; font-weight: 600; }
.tmneed__txt span { font-size: 12px; color: var(--mut); }
.tmneed .seg { margin: 0; flex: none; }
.tmneed .seg__item { border: 0; font: inherit; cursor: pointer; background: transparent; min-width: 52px; }
.tmneed .seg__item.is-on { background: #fff; }
.tmlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 16px; overflow: hidden; box-shadow: var(--ring); }
.tmlist li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; }
.tmlist.is-off li { opacity: 0.5; }
.tmlist__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.tmlist__txt strong { font-size: 15px; font-weight: 600; }
.tmlist__ans { font-size: 12px; font-weight: 500; }
.tmlist__ans--kan { color: #1A7A3A; }
.tmlist__ans--niet { color: #B3261E; }
.tmlist__ans--open { color: var(--mut); }
.wabtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #E9F9EE; color: #128C3E; text-decoration: none; font-size: 12px; font-weight: 600; }
.wabtn:hover { background: #DDF5E5; }

@media (max-width: 1100px) {
  .srow { grid-template-columns: 46px minmax(0, 1fr) 110px 230px 18px; }
  .srow__time { display: none; }
}
@media (max-width: 900px) {
  .only-desktop-flex { display: none !important; }
  .skpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .skpi { padding: 10px 12px; border-radius: 14px; }
  .skpi__label { font-size: 11px; }
  .skpi__n { font-size: 20px; }
  .skpi__sub { display: none; }
  .sfilters .seg { width: 100%; display: flex; }
  .sfilters .seg .seg__item { flex: 1; padding: 0 6px; font-size: 13px; }
  .sfilters__div { display: none; }
  .srow { grid-template-columns: 46px minmax(0, 1fr) 16px; gap: 12px; padding: 12px 14px; }
  .srow__time, .srow__status, .srow__tm { display: none; }
  .srow__mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
  .srow__mobile .tmcell__txt { font-size: 12px; }
  .shero { padding: 18px; gap: 14px; }
  .shero h1 { font-size: 24px; }
  .shero__main { flex-basis: 0; }
  .shero__set { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; }
  .shero__setlabel { color: rgba(255, 255, 255, 0.7); }
  .shero__settime { font-size: 20px; }
  .shero__date { display: none; }
  .shero__actions { border-top: 0; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .sinfo { grid-template-columns: 1fr; }
  .lineup li { grid-template-columns: 96px 1fr auto; padding: 4px 10px; }
  .page-show .mhead { margin-bottom: 14px; }
}
.shero .datetile { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.12); border-radius: 14px; color: var(--ink); }
.srow .datetile:not(.datetile--opt) { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.12); }
@media (max-width: 900px) {
  .hide-m { display: none; }
  .page-show .sdetail__side { order: -1; }
  .sinfo { grid-template-columns: 1fr 1fr; }
  .sinfo__card:first-child { grid-column: 1 / -1; }
}

/* =========================================================
   Taken v2
   ========================================================= */
.page-tasks .wrap { max-width: 1320px; }
.page-tasks .pagehead__right .search { width: 240px; }
.grow { flex: 1; }
.tlayout { display: flex; gap: 22px; align-items: flex-start; }
.tmain { flex: 1; min-width: 0; }
.tboards { flex: 0 0 248px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 20px; }
.tboards__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
.tboards__head h2 { font-size: 17px; font-weight: 600; }
.tboard { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.tboard:hover { background: rgba(255, 255, 255, 0.6); }
.tboard.is-on { background: #fff; box-shadow: var(--ring); }
.tboard__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tboard__row--sub { font-size: 12px; font-weight: 500; color: var(--mut); }
.tboard__row--sub b { color: #B3261E; font-weight: 600; }
.tboard__sq { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.tboard__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tboard__bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(118, 118, 128, 0.16); overflow: hidden; }
.tboard__bar span { display: block; height: 100%; }
.tboards__new { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; background: none; color: var(--accent-txt); font: 600 13px var(--font); cursor: pointer; }
.relpill { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 999px; background: #FFF1D6; color: #5C3300; font-size: 11px; font-weight: 600; white-space: nowrap; }
.relpill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FF9F0A; }

.tchips { display: none; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.tchips::-webkit-scrollbar { display: none; }
.tchips--all { display: flex; flex-wrap: wrap; }
.tchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); text-decoration: none; font: 500 13px var(--font); cursor: pointer; }
.tchip.is-on { background: #fff; box-shadow: var(--ring); font-weight: 600; }
.tchip--add { width: 36px; padding: 0; justify-content: center; background: var(--fill); }

.thero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px 20px; background: #fff; border-radius: 20px; box-shadow: var(--ring); margin-bottom: 16px; }
.thero__art { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: none; }
.thero__art--empty { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.92); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--board) 45%, white), var(--board) 55%, color-mix(in srgb, var(--board) 70%, black)); }
.thero__main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.thero__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--mut); }
.thero__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.thero__bar { display: flex; gap: 3px; }
.thero__bar span { flex: 1; height: 8px; border-radius: 4px; background: rgba(118, 118, 128, 0.16); }
.thero__bar .is-done, .thero__legend .is-done { background: #34C759; }
.thero__bar .is-doing, .thero__legend .is-doing { background: #FF9F0A; }
.thero__legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; font-weight: 500; color: var(--mut); }
.thero__legend span { display: inline-flex; align-items: center; gap: 5px; }
.thero__legend i { width: 7px; height: 7px; border-radius: 50%; background: #AEAEB2; display: block; }
.thero__side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; position: relative; }
.thero__count { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 112px; padding: 12px 16px; border-radius: 16px; background: var(--ink); color: #fff; }
.thero__count strong { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.thero__count span { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }
.thero__late { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #FDE7E5; color: #B3261E; text-decoration: none; font-size: 12px; font-weight: 600; }
.thero__del { align-self: flex-end; }

.ttoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ttoolbar .seg { margin-bottom: 0; }
.tfilters { display: flex; gap: 6px; }
.tfilter { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: var(--ring); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; }
.tfilter.is-on { background: var(--ink); color: #fff; box-shadow: none; }

.coltabs { display: none; }
.tkanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tcol { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); transition: background-color 120ms ease; }
.tcol__head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
.tcol__head h3 { font-size: 15px; font-weight: 600; }
.tcol__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: #AEAEB2; }
.tcol__dot--doing { background: #FF9F0A; }
.tcol__dot--done { background: #34C759; }
.tcol__dot--late { background: #FF3B30; }
.tcol__dot--show { background: #FF9500; }
.tcol__add { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--mut); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tcol__add:hover { background: var(--fill); color: var(--ink); }
.tcol__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tcol__new { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 12px; border: 1.5px dashed rgba(60, 60, 67, 0.18); background: none; color: var(--mut); font: 500 12px var(--font); cursor: pointer; }
.tcol__new:hover { color: var(--ink); border-color: rgba(60, 60, 67, 0.35); }
.tcol.is-over, [data-due-drop].is-over { background: #EAF3FF !important; box-shadow: inset 0 0 0 2px #0A84FF !important; }

.tcard { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 14px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 14px -10px rgba(0, 0, 0, 0.25); cursor: pointer; }
.tcard:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 8px 20px -12px rgba(0, 0, 0, 0.3); }
.tcard:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
.tcard.is-late { box-shadow: inset 3px 0 0 #FF3B30, 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 14px -10px rgba(0, 0, 0, 0.25); }
.tcard.is-dragging, .calchip.is-dragging { opacity: 0.4; }
.tcard__top { display: flex; align-items: flex-start; gap: 8px; }
.tcard__title { flex: 1; font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.tcard.is-done .tcard__title { color: var(--mut); text-decoration: line-through; }
.tcard__check { width: 20px; height: 20px; border-radius: 50%; background: #34C759; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.tcard__meta { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.tcard__move { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tcard__move:hover { background: rgba(118, 118, 128, 0.22); }
.tcard__move--doing { background: var(--ink); color: #fff; }
.tcard__move--doing:hover { background: #2C2C2E; }
.tlabel { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(118, 118, 128, 0.12); font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdue { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--mut); white-space: nowrap; }
.tdue--late, .tdue--soon { min-height: 24px; padding: 0 8px; border-radius: 999px; font-weight: 600; }
.tdue--late { background: #FDE7E5; color: #B3261E; }
.tdue--soon { background: #FFF1D6; color: #8A5300; }

.tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 16px; overflow: hidden; box-shadow: var(--ring); }
.tlist__row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 16px; background: #fff; cursor: pointer; }
.tlist__row:hover { background: #FAFAFC; }
.tlist__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.tlist__row.is-done .tlist__title { color: var(--mut); text-decoration: line-through; }

.calnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.callegend { gap: 12px; font-size: 12px; font-weight: 500; color: var(--mut); }
.callegend span { display: inline-flex; align-items: center; gap: 5px; }
.callegend i { width: 7px; height: 7px; }
.only-desktop-grid { display: grid; }
.tcal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--sep); border-radius: 18px; overflow: hidden; box-shadow: var(--ring); }
.tcal__head { background: #fff; font-size: 12px; font-weight: 600; color: var(--mut); text-align: center; padding: 8px 0; text-transform: uppercase; }
.tcal__day { background: #fff; min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tcal__day.is-out { background: #FAFAFC; }
.tcal__day.is-out .tcal__num { color: #AEAEB2; }
.tcal__day.is-release { box-shadow: inset 0 0 0 2px var(--board); }
.tcal__num { font-size: 13px; font-weight: 600; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.tcal__day.is-today .tcal__num { background: var(--ink); color: #fff; }
.calchip { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 6px; border-radius: 6px; background: rgba(118, 118, 128, 0.10); font-size: 12px; font-weight: 500; min-width: 0; cursor: pointer; }
.calchip i { width: 6px; height: 6px; border-radius: 50%; background: #AEAEB2; flex: none; }
.calchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calchip--doing i { background: #FF9F0A; }
.calchip--done { background: rgba(52, 199, 89, 0.12); }
.calchip--done i { background: #34C759; }
.calchip--done span { color: var(--mut); text-decoration: line-through; }
.calchip--late { background: #FDE7E5; color: #B3261E; }
.calchip--late i { background: #FF3B30; }
.calrel { display: flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 8px; border-radius: 8px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; min-width: 0; }
.calrel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calshow { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 6px; border-radius: 6px; background: #FFF1E0; color: #8A4A00; text-decoration: none; font-size: 12px; font-weight: 600; min-width: 0; }
.calshow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calrel--lg, .calshow--lg { min-height: 46px; padding: 0 14px; border-radius: 14px; font-size: 14px; margin-bottom: 8px; gap: 8px; }
.calmore { font-size: 11px; color: var(--mut); padding-left: 6px; }

.tdialog { width: min(480px, calc(100% - 32px)); border: 0; border-radius: 20px; padding: 0; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); color: var(--ink); }
.tdialog::backdrop { background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px); }
.tdialog__form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.tdialog__form h2 { font-size: 19px; font-weight: 600; }
.tdialog__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tdialog__actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

.tmfee { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; background: #fff; border-radius: 16px; box-shadow: var(--ring); }
.tmfee__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tmfee__txt strong { font-size: 15px; font-weight: 600; }
.tmfee__txt span { font-size: 12px; color: var(--mut); }
.tmfee__input { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px; border-radius: 10px; background: var(--fill); font-weight: 600; }
.tmfee__input input { width: 64px; border: 0; background: transparent; font: 600 15px var(--font); color: var(--ink); text-align: right; }
.tmfee__input input:focus { outline: none; }
.tmfee__input:focus-within { box-shadow: 0 0 0 2px #0A84FF; }
.tmcell__txtwrap { display: flex; flex-direction: column; gap: 1px; }
.tmcell__fee { font-size: 11px; font-weight: 600; color: var(--mut); }
.tmcard__fee { margin-left: auto; align-self: center; display: inline-flex; min-height: 26px; align-items: center; padding: 0 10px; border-radius: 999px; background: #E3F5E8; color: #1A7A3A; font-size: 13px; font-weight: 600; white-space: nowrap; }

@media (max-width: 1100px) {
  .tboards { display: none; }
  .tchips { display: flex; }
}
@media (max-width: 900px) {
  .only-desktop-grid { display: none !important; }
  .thero { padding: 16px; gap: 12px; }
  .thero__art { width: 56px; height: 56px; }
  .thero__title { font-size: 20px; }
  .thero__side { flex-direction: row; flex-basis: 100%; align-items: center; }
  .thero__count { flex-direction: row; gap: 8px; min-width: 0; padding: 8px 14px; }
  .thero__count strong { font-size: 20px; }
  .thero__count span { margin-top: 0; }
  .thero__del { margin-left: auto; }
  .ttoolbar .seg { width: 100%; display: flex; }
  .ttoolbar .seg .seg__item { flex: 1; }
  .ttoolbar .grow { display: none; }
  .tfilters { width: 100%; }
  .tfilter { flex: 1; justify-content: center; }
  .coltabs { display: flex; margin-bottom: 12px; }
  .tkanban { display: block; }
  .tkanban .tcol { display: none; background: transparent; box-shadow: none; padding: 0; }
  .tkanban[data-show="todo"] [data-colwrap="todo"], .tkanban[data-show="doing"] [data-colwrap="doing"], .tkanban[data-show="done"] [data-colwrap="done"] { display: flex; }
  .tkanban .tcol__head { display: none; }
  .tdialog { margin-bottom: 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; }
  .tdialog__form { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .tmfee { flex-wrap: wrap; }
}
.tcard.is-late { color: var(--ink); }
@media (max-width: 900px) {
  .thero__main { flex: 1 1 0; }
  .thero { align-items: flex-start; }
}

/* =========================================================
   Tourmanager-pagina v2
   ========================================================= */
.tmhead { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.tmhead__top { display: flex; align-items: center; justify-content: space-between; }
.tmhead .tmpage__brand { color: var(--ink); letter-spacing: 0.24em; font-size: 13px; }
.tmhead h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; }
.tmhead .seg { margin: 0; }
.tmsum { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--ink); color: #fff; }
.tmsum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tmsum__row--small { justify-content: flex-start; gap: 14px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.tmsum__big { font-size: 22px; font-weight: 600; }
.tmsum__big span { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.tmsum__meta { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.tmsum__fee { margin-left: auto; }
.tmsum__bar { display: flex; gap: 3px; }
.tmsum__bar span { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.tmsum__bar .is-kan { background: #34C759; }
.tmsum__bar .is-niet { background: #FF6B5E; }
.tmmonth { margin: 22px 4px 10px; font-size: 17px; font-weight: 600; }
.tmlist2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tmc { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--ring); scroll-margin-top: 20px; }
.tmc--open { box-shadow: inset 3px 0 0 var(--ink), 0 0 0 1px rgba(0, 0, 0, 0.04), 0 6px 20px -14px rgba(0, 0, 0, 0.2); }
.tmc--skip { flex-direction: row; align-items: center; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); padding: 12px 14px; }
.tmc--skip .datetile { opacity: 0.55; }
.tmc--skip .tmc__city { color: var(--mut); }
.tmc--skip .tmc__venue { color: #AEAEB2; }
.tmc .datetile { width: 46px; height: 52px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.12); }
.tmc__head { display: flex; align-items: center; gap: 12px; }
.tmc__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tmc__city { font-size: 16px; font-weight: 600; }
.tmc__city--lg { font-size: 17px; }
.tmc__venue { font-size: 13px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmc__time { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; }
.tmc__time .ic { color: var(--mut); }
.tmc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tmc__note { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #E3F5E8; color: #1A7A3A; font-size: 12px; font-weight: 600; }
.tmtag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tmtag--fee, .tmtag--kan { background: #E3F5E8; color: #1A7A3A; }
.tmtag--niet { background: #FDE7E5; color: #B3261E; }
.tmtag--skip { background: rgba(118, 118, 128, 0.12); color: var(--mut); min-height: 26px; padding: 0 10px; }
.tmans { display: flex; gap: 8px; }
.tmans__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); color: var(--ink); font: 600 15px var(--font); cursor: pointer; }
.tmans__btn:hover { background: #FAFAFC; }
.tmans__btn--kan.is-on { background: #34C759; color: #fff; box-shadow: none; }
.tmans__btn--niet.is-on { background: #FDE7E5; color: #B3261E; box-shadow: inset 0 0 0 1.5px #FF3B30; }
.tmc__foot { border-top: 1px solid var(--sep); padding-top: 10px; }
.tmc__foot summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; cursor: pointer; }
.tmc__foot summary::-webkit-details-marker { display: none; }
.tmc__foot[open] summary { margin-bottom: 10px; }
.tmc__edit { font-size: 13px; font-weight: 600; color: var(--mut); }
.tmc__foot[open] .tmc__edit { color: var(--ink); }
.tmc__cal { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent-txt); text-decoration: none; }
.tmempty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; margin-top: 16px; border-radius: 18px; background: #fff; box-shadow: var(--ring); text-align: center; color: var(--mut); }
.tmempty .ic { color: #34C759; }
.tmempty strong { color: var(--ink); font-size: 16px; }
.tmfoot { margin: 24px 4px 0; font-size: 12px; line-height: 1.5; color: var(--mut); text-align: center; }

/* Koppeling taak <-> post */
.tpost { width: 22px; height: 22px; border-radius: 7px; background: var(--tile); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; text-decoration: none; }
.tlink { padding: 12px; border-radius: 14px; background: var(--bg); }
.tlink__linked, .tlink__make { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tlink__txt { flex: 1 1 160px; display: flex; flex-direction: column; gap: 1px; }
.tlink__txt span { font-size: 12px; color: var(--mut); }
.tlink__txt strong { font-size: 14px; font-weight: 600; }
.tlink .seg { margin: 0; }
.tlink .seg__item { border: 0; font: inherit; background: transparent; cursor: pointer; }
.tlink .seg__item.is-on { background: #fff; }
.linkbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border-radius: 16px; background: #fff; box-shadow: var(--ring); text-decoration: none; color: var(--ink); }
.linkbar:hover { background: #FAFAFC; }
.linkbar__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.linkbar__txt span { font-size: 12px; color: var(--mut); }
.linkbar__txt strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbar__hint { font-size: 12px; color: var(--mut); }
.linkbar > .ic:last-child { color: var(--chev); }
@media (max-width: 900px) { .linkbar__hint { display: none; } }

/* Rustiger: shows en content */
.salert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; border-radius: 14px; background: #FDE7E5; color: #B3261E; text-decoration: none; font-size: 14px; }
.salert span { flex: 1; }
.salert strong { font-weight: 600; }
.srow { grid-template-columns: 46px minmax(0, 1fr) 120px 240px 18px; }
.srow__city { gap: 8px; }
.spill--sm { min-height: 20px; padding: 0 8px; font-size: 11px; }
.srow__time { color: var(--ink); }
.srow__time.is-muted { color: #AEAEB2; }
.smonth { margin-top: 24px; }
.wday { min-height: 300px; }
.wday.is-past { background: rgba(255, 255, 255, 0.3); box-shadow: none; }
.pipechip.is-zero { display: none; }
@media (max-width: 1100px) {
  .srow { grid-template-columns: 46px minmax(0, 1fr) 220px 18px; }
}
@media (max-width: 900px) {
  .srow { grid-template-columns: 46px minmax(0, 1fr) 16px; }
  .wday { min-height: 0; }
}
.skpi--alert .skpi__n { color: #B3261E; }

/* Shows in de contentagenda */
.cshow { gap: 8px; }
.cshow__top { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; color: inherit; }
.cshow__icon { width: 26px; height: 26px; border-radius: 8px; background: #FF9500; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.cshow__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cshow__name { font-size: 13px; font-weight: 600; color: #5C3300; line-height: 1.25; overflow-wrap: anywhere; }
.cshow__meta { font-size: 11px; color: #8A4A00; }
.mshow { display: flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 6px; border-radius: 6px; background: #FFF1E0; color: #8A4A00; text-decoration: none; font-size: 11px; font-weight: 600; min-width: 0; }
.mshow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .monthcal .mshow span { display: none; } .monthcal .mshow { justify-content: center; padding: 3px; } }

/* Taken: Alle taken + rustiger */
.tboard__pin { width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tboards__sep { height: 1px; background: var(--sep); margin: 4px 14px; }
.tbtag { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 140px; font-size: 12px; font-weight: 500; color: var(--mut); }
.tbtag i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tbtag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thero { padding: 16px 20px; }
.thero--all { min-height: 0; }
.thero__bar--flow span { min-width: 0; }
.thero__bar--flow { gap: 2px; }
.thero__del { position: absolute; top: -6px; right: -8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #C7C7CC; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.thero__del:hover { color: #B3261E; background: #FDE7E5; }
.thero__side { padding-top: 8px; }
.thero__count { padding: 10px 16px; }
.tcard { gap: 8px; padding: 12px 12px 10px 14px; }
.tlabel { background: transparent; padding: 0; color: var(--mut); font-weight: 600; }
@media (max-width: 900px) { .thero__del { position: static; } .thero__side { padding-top: 0; } }
.tcard > .tbtag { max-width: none; margin-bottom: -2px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }

/* Draaiboek */
.rsheet { padding: 16px 18px; background: #fff; border-radius: 18px; box-shadow: var(--ring); display: flex; flex-direction: column; gap: 12px; }
.rsheet__head { display: flex; align-items: center; justify-content: space-between; }
.rsheet__head h2 { font-size: 17px; font-weight: 600; }
.rsheet__empty { font-size: 14px; color: var(--mut); }
.rsheet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rsheet__row { position: relative; display: grid; grid-template-columns: 18px 110px 1fr; grid-template-areas: "dot label time" "dot sub sub"; column-gap: 10px; padding: 8px 0; }
.rsheet__row::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: -8px; width: 2px; background: var(--sep); }
.rsheet__row:last-child::before { display: none; }
.rsheet__dot { grid-area: dot; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px #AEAEB2; margin-top: 4px; position: relative; z-index: 1; }
.rsheet__row--dep .rsheet__dot { box-shadow: inset 0 0 0 2.5px #0A84FF; }
.rsheet__row--set .rsheet__dot { background: var(--ink); box-shadow: none; }
.rsheet__label { grid-area: label; font-size: 14px; font-weight: 500; color: var(--mut); }
.rsheet__time { grid-area: time; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rsheet__row--set .rsheet__time { font-size: 17px; }
.rsheet__sub { grid-area: sub; font-size: 12px; color: var(--mut); padding-left: 0; }
.rsheet__row--set .rsheet__label { color: var(--ink); font-weight: 600; }
.rsheet__travel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sep); font-size: 13px; color: var(--mut); }
.rsheet__travel > span { flex: 1; }
.rsheet__edit { display: flex; align-items: center; gap: 6px; }
.rsheet__edit input { width: 70px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--fill); font: 500 14px var(--font); color: var(--ink); text-align: center; }
.checklist { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: var(--ring); }
.checklist li { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 10px; border-radius: 10px; }
.checklist label { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 14px; }
.checklist input[type="checkbox"] { width: 20px; height: 20px; accent-color: #34C759; flex: none; }
.checklist li.is-done span { color: var(--mut); text-decoration: line-through; }
.checklist__del { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #C7C7CC; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; }
.checklist li:hover .checklist__del, .checklist__del:focus-visible { opacity: 1; }
.checklist__del:hover { color: #B3261E; background: #FDE7E5; }
.checklist__add form { flex: 1; display: flex; align-items: center; gap: 6px; }
.checklist__add input { flex: 1; min-height: 40px; border: 0; background: transparent; font: 400 14px var(--font); color: var(--ink); }
.checklist__add input:focus { outline: none; }
.snotes { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #fff; border-radius: 16px; box-shadow: var(--ring); }
.snotes textarea { width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--fill); padding: 10px 12px; font: 400 14px/1.5 var(--font); color: var(--ink); resize: vertical; min-height: 110px; }
.snotes textarea:focus { outline: 2px solid #0A84FF; outline-offset: 0; }
.snotes__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.snotes__share { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.tmc__head { text-decoration: none; color: inherit; }
.tmc__info { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--mut); align-self: center; }
.tmc__head--skip { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.tmc--detail { margin-bottom: 14px; }
.shero--tm { margin-top: 4px; }
.tmpage .rsheet, .tmpage .sinfo { margin-bottom: 14px; }
.sinfo--tm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sinfo--tm .sinfo__card { text-decoration: none; color: var(--ink); }
.tmpage .backlink { display: inline-flex; }
p.tmc--skip { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--mut); margin-bottom: 14px; }
@media (max-width: 900px) {
  .rsheet__row { grid-template-columns: 18px 96px 1fr; }
  .sinfo--tm { grid-template-columns: 1fr; }
  .tmpage .shero__actions { display: none; }
}
.rsheet__row--leave .rsheet__dot { box-shadow: inset 0 0 0 2.5px #5856D6; }

/* Vervoer en hotel */
.travel { padding: 16px 18px; background: #fff; border-radius: 18px; box-shadow: var(--ring); display: flex; flex-direction: column; gap: 10px; }
.travel__head { display: flex; align-items: baseline; justify-content: space-between; }
.travel__head h2 { font-size: 17px; font-weight: 600; }
.travel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 12px; overflow: hidden; }
.travel__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #fff; }
.travel__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.travel__txt strong { font-size: 15px; font-weight: 600; }
.travel__txt > span { font-size: 13px; color: var(--mut); }
.travel__loc { font-size: 13px; color: var(--accent-txt); text-decoration: none; overflow-wrap: anywhere; }
.travel__dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 12px; }
.travel__dl dt { color: var(--mut); }
.travel__dl dd { margin: 0; overflow-wrap: anywhere; }
.travel__ext { color: var(--chev); padding: 4px; }
.srow__travel { display: inline-flex; gap: 4px; margin-left: 8px; color: #0A84FF; vertical-align: -2px; }
.tmpage .travel { margin-bottom: 14px; }

.travel__x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #C7C7CC; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.travel__x:hover { color: #B3261E; background: #FDE7E5; }
.travel__add { display: flex; gap: 8px; align-items: center; }
.travel__add select { flex: 1; min-width: 0; min-height: 38px; }

/* =========================================================
   Financieel
   ========================================================= */
.page-fin .wrap { max-width: 1120px; }
.fin-mnav { width: 100%; justify-content: space-between; margin-bottom: 12px; box-sizing: border-box; }
.fin-entry { display: grid; grid-template-columns: auto 1fr 140px 160px; align-items: end; gap: 10px; margin-bottom: 16px; }
.fin-entry .seg { margin: 0; align-self: center; }
.fin-entry .btnrow { grid-column: 1 / -1; }
.fkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fkpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--ring); min-width: 0; }
.fkpi--dark { background: var(--ink); color: #fff; box-shadow: none; }
.fkpi__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mut); }
.fkpi--dark .fkpi__label { color: rgba(255, 255, 255, 0.7); }
.fkpi__label i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.fkpi__n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fkpi__sub { font-size: 12px; font-weight: 500; color: var(--mut); }
.fkpi--dark .fkpi__sub { color: rgba(255, 255, 255, 0.6); }
.fchart { padding: 18px 20px; background: #fff; border-radius: 18px; box-shadow: var(--ring); margin-bottom: 20px; }
.fchart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fchart__head h2 { font-size: 17px; font-weight: 600; }
.fchart__legend { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; color: var(--mut); }
.fchart__legend span { display: inline-flex; align-items: center; gap: 5px; }
.fchart__legend i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.fchart__legend strong { color: var(--ink); font-weight: 600; }
.fbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 160px; }
.fbar { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--mut); min-width: 0; }
.fbar__cols { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fbar__in, .fbar__out { width: 34%; max-width: 18px; border-radius: 3px 3px 1px 1px; min-height: 2px; }
.fbar__in { background: rgba(28, 28, 30, 0.3); }
.fbar__out { background: rgba(255, 107, 94, 0.45); }
.fbar.is-on .fbar__in { background: var(--ink); }
.fbar.is-on .fbar__out { background: #FF6B5E; }
.fbar__label { text-align: center; font-size: 11px; font-weight: 500; }
.fbar.is-on .fbar__label { color: var(--ink); font-weight: 600; }
.fbar:hover .fbar__in { background: rgba(28, 28, 30, 0.55); }
.fgrid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.fgrid__main { flex: 1.4 1 520px; min-width: 0; }
.fgrid__side { flex: 1 1 340px; min-width: 0; }
.fgrid .sechead { margin: 0 4px 10px; }
.fgrid__main .sechead + .fshows + .sechead, .fgrid__main .empty + .sechead { margin-top: 24px; }
.fshows, .fentries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 18px; overflow: hidden; box-shadow: var(--ring); }
.fshow { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; }
.fshow__head { display: flex; align-items: center; gap: 12px; }
.fshow .datetile { width: 46px; height: 52px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.12); }
.fshow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.fshow__name { font-size: 15px; font-weight: 600; }
.fshow__city { font-size: 13px; color: var(--mut); }
.fshow__gage { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fshow__src { font-size: 11px; color: var(--mut); }
.fmoney { display: inline-flex; align-items: center; gap: 3px; height: 34px; padding: 0 8px; border-radius: 10px; background: #E3F5E8; color: #1A7A3A; font-weight: 600; }
.fmoney input { width: 72px; border: 0; background: transparent; font: 600 15px var(--font); color: inherit; text-align: right; font-variant-numeric: tabular-nums; }
.fmoney input::placeholder { color: inherit; opacity: 1; }
.fmoney.is-empty { background: var(--fill); color: var(--mut); }
.fmoney.is-empty input::placeholder { opacity: 0.8; font-weight: 500; }
.fmoney:focus-within { box-shadow: 0 0 0 2px #0A84FF; }
.fmoney input:focus { outline: none; }
.fmoney--sm { height: 28px; background: transparent; color: var(--mut); padding: 0 4px; }
.fmoney--sm input { width: 58px; font-size: 13px; font-weight: 500; }
.fmoney--sm:hover { background: var(--fill); }
.fshow__costs { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.fline { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; font-weight: 500; color: var(--mut); }
.fline > span { flex: 1; }
.fline small { font-size: 11px; color: #AEAEB2; margin-left: 4px; }
.fline b { font-weight: 500; font-variant-numeric: tabular-nums; }
.fline--net { border-top: 1px solid var(--sep); padding-top: 6px; color: var(--ink); font-weight: 600; }
.fline--net b { font-weight: 600; }
.fentries li { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; background: #fff; }
.fentries__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fentries__txt strong { font-size: 15px; font-weight: 500; }
.fentries__txt span { font-size: 12px; color: var(--mut); }
.fentries b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fentries b.is-in { color: #1A7A3A; }
.fentries__del { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #C7C7CC; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fentries__del:hover { color: #B3261E; background: #FDE7E5; }
.fempty { padding: 4px; }
.fpay { display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 18px; overflow: hidden; box-shadow: var(--ring); }
.fpay__person { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; }
.fpay__head { display: flex; align-items: center; gap: 12px; }
.fpay__name { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.fpay__name strong { font-size: 15px; font-weight: 600; }
.fpay__name span { font-size: 12px; color: var(--mut); }
.fpay__head b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fpay__list { list-style: none; margin: 0; padding: 0 0 0 42px; display: flex; flex-direction: column; gap: 4px; }
.fpay__list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--mut); }
.fpay__foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.fpay__none { font-size: 13px; color: var(--mut); padding-left: 42px; }
.finmini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: var(--ring); text-decoration: none; color: var(--ink); margin-top: 10px; }
.finmini__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.finmini__txt span { font-size: 12px; color: var(--mut); }
.finmini__txt strong { font-size: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .fkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fkpi { padding: 12px 14px; }
  .fkpi__n { font-size: 20px; }
  .fchart { padding: 14px; }
  .fbars { height: 120px; gap: 3px; }
  .fbar__label { font-size: 9.5px; }
  .fin-entry { grid-template-columns: 1fr 1fr; }
  .fin-entry .seg, .fin-entry__title { grid-column: 1 / -1; }
  .fgrid__side { order: -1; }
}

/* =========================================================
   Home v3 (rustig)
   ========================================================= */
.page-home .wrap { max-width: 1040px; }
.page-home .pagehead { margin-bottom: 6px; }
.h3-today { font-size: 15px; color: var(--mut); margin: 0 0 22px; }
.h3-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin: 18px 0 16px; }
.h3-show, .h3-rel { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; border-radius: 22px; text-decoration: none; min-width: 0; }
.h3-show { background: var(--ink); color: #fff; }
.h3-show:hover { background: #2A2A2D; }
.h3-show__label, .h3-rel__label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.h3-show__main { display: flex; align-items: center; gap: 16px; }
.h3-show .datetile { width: 56px; height: 62px; background: #fff; color: var(--ink); border-radius: 14px; flex: none; }
.h3-show__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.h3-show__name { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.h3-show__line { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.h3-show__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.h3-show__foot span { display: inline-flex; align-items: center; gap: 6px; }
.h3-show__foot i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.h3-show__foot b { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 600; }
.h3-show--empty .h3-show__name { font-size: 22px; }
.h3-rel { background: #fff; color: var(--ink); box-shadow: var(--ring); }
.h3-rel:hover { background: #FAFAFC; }
.h3-rel .h3-rel__label { color: var(--mut); }
.h3-rel__main { display: flex; align-items: center; gap: 14px; }
.h3-rel__art { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.h3-rel__art--empty { background: linear-gradient(145deg, color-mix(in srgb, var(--board) 60%, white), var(--board)); }
.h3-rel__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.h3-rel__name { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.h3-rel__date { font-size: 14px; color: var(--mut); }
.h3-rel__days { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.h3-rel__days strong { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.h3-rel__days span { font-size: 11px; font-weight: 500; color: var(--mut); margin-top: 3px; }
.h3-rel__foot { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; margin-top: auto; border-top: 1px solid var(--sep); }
.h3-rel__bar { display: flex; gap: 3px; }
.h3-rel__bar i { flex: 1; height: 5px; border-radius: 3px; background: rgba(118, 118, 128, 0.16); display: block; }
.h3-rel__bar i.is-done { background: #34C759; }
.h3-rel__bar i.is-doing { background: #FF9F0A; }
.h3-rel__meta { font-size: 12px; font-weight: 500; color: var(--mut); }
.h3-rel__meta b { color: #B3261E; font-weight: 500; }
.h3-stats { display: flex; background: #fff; border-radius: 18px; box-shadow: var(--ring); margin-bottom: 34px; }
.h3-stats a { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; padding: 16px 20px; text-decoration: none; color: var(--ink); min-width: 0; }
.h3-stats a + a { border-left: 1px solid var(--sep); }
.h3-stats a:hover { background: #FAFAFC; }
.h3-stats span { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--mut); }
.h3-stats strong { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.h3-stats em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--mut); }
.h3-stats em.is-late { color: #B3261E; }
.h3-sec { margin-bottom: 34px; }
.h3-sec .sechead { margin: 0 2px 12px; }
.h3-more { font-size: 13px; font-weight: 500; color: var(--mut); text-decoration: none; }
.h3-more:hover { color: var(--ink); }
.h3-feed { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.h3-post { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); min-width: 0; }
.h3-post__img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--tile) 70%, white), color-mix(in srgb, var(--tile) 75%, black)); }
.h3-post__img img, .h3-post__img video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.h3-post:hover .h3-post__img img, .h3-post:hover .h3-post__img video { transform: scale(1.03); }
.h3-post__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); }
.h3-post__type { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; display: flex; align-items: center; justify-content: center; }
.h3-post__title { font-size: 13px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.h3-post__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mut); padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h3-post__meta i { width: 6px; height: 6px; border-radius: 50%; flex: none; display: block; }
.h3-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 18px; overflow: hidden; box-shadow: var(--ring); }
.h3-tasks li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; background: #fff; transition: opacity 200ms ease; }
.h3-tasks li.is-done { opacity: 0.4; }
.h3-check { width: 22px; height: 22px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1.5px #C7C7CC; background: transparent; color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.h3-check:hover { box-shadow: inset 0 0 0 1.5px #34C759; color: #34C759; }
.h3-tasks li.is-done .h3-check { background: #34C759; color: #fff; box-shadow: none; }
.h3-tasks__txt { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h3-tasks__due { font-size: 12px; font-weight: 500; color: var(--mut); white-space: nowrap; }
.h3-tasks__due.is-late { color: #B3261E; }
.h3-empty { padding: 4px; font-size: 14px; color: var(--mut); }
@media (max-width: 1000px) { .h3-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } .h3-feed .h3-post:nth-child(5) { display: none; } }
@media (max-width: 900px) {
  .h3-today { margin-bottom: 14px; }
  .h3-top { grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
  .h3-show, .h3-rel { padding: 18px; }
  .h3-show__name { font-size: 24px; }
  .h3-stats { margin-bottom: 28px; }
  .h3-stats a { padding: 14px; }
  .h3-stats strong { font-size: 20px; }
  .h3-stats em { display: none; }
  .h3-feed { display: flex; gap: 12px; overflow-x: auto; margin: 0; padding: 0 0 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .h3-feed::-webkit-scrollbar { display: none; }
  .h3-feed .h3-post { flex: none; width: 140px; scroll-snap-align: start; }
  .h3-feed .h3-post:nth-child(5) { display: flex; }
}

/* Bord verwijderen: zichtbaar en klikbaar */
.thero__del { position: static !important; width: auto !important; height: auto !important; min-height: 30px; padding: 0 10px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; font: 500 12px var(--font); color: var(--mut) !important; background: transparent; align-self: center; }
.thero__del:hover { color: #B3261E !important; background: #FDE7E5 !important; }

/* Content: lijstweergave */
.clist { margin-bottom: 18px; }
.clist__head { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; }
.clist__head h2 { font-size: 15px; font-weight: 600; }
.clist.is-past { opacity: 0.6; }
.clist .lthumb { width: 40px; height: 50px; }

/* Content: lijst over 6 maanden */
.clist2 { margin-bottom: 26px; }
.clist2__head { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 8px; }
.clist2__head h2 { font-size: 17px; font-weight: 600; }
.clist2__head span { font-size: 13px; color: var(--mut); }
.clist2__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--sep); border-radius: 16px; overflow: hidden; box-shadow: var(--ring); }
.crow { display: grid; grid-template-columns: 54px 52px 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; background: #fff; text-decoration: none; color: var(--ink); }
.crow:hover { background: #FAFAFC; }
.crow.is-past { color: var(--mut); }
.crow.is-past .crow__title { color: var(--mut); }
.crow.is-today { box-shadow: inset 3px 0 0 var(--ink); }
.crow__date { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--mut); }
.crow__date b { font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.crow.is-past .crow__date b { color: var(--mut); }
.crow__time { font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.crow__type { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.crow__type i { width: 8px; height: 8px; border-radius: 50%; background: var(--tile); display: block; flex: none; }
.crow__title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clist2__empty { margin: 0 4px; font-size: 13px; color: var(--mut); }
@media (max-width: 900px) {
  .crow { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "date title status" "date meta status"; row-gap: 2px; padding: 8px 14px; }
  .crow__date { grid-area: date; flex-direction: column; align-items: flex-start; gap: 0; }
  .crow__title { grid-area: title; }
  .crow__time { grid-area: meta; }
  .crow__type { display: none; }
  .crow .status { grid-area: status; }
}