/* Werkplanning — ontwerpsysteem (zelfde tokens als de originele app) */
:root {
  --radius: 0.75rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.26 0.006 285);
  --card: oklch(1 0 0);
  --primary: oklch(0.53 0.132 149.3);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.958 0.029 150.5);
  --secondary-foreground: oklch(0.42 0.11 149.5);
  --muted: oklch(0.968 0.002 285);
  --muted-foreground: oklch(0.55 0.008 285);
  --accent: oklch(0.958 0.029 150.5);
  --destructive: oklch(0.58 0.2 27);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.92 0.003 285);
  --ring: oklch(0.53 0.132 149.3);
  --amber-bg: oklch(0.95 0.06 85);
  --amber-fg: oklch(0.45 0.1 70);
  --shadow-google: 0 1px 2px 0 rgb(60 64 67 / 0.3), 0 1px 3px 1px rgb(60 64 67 / 0.15);
  --font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: color-mix(in oklab, var(--muted) 60%, var(--background));
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1 { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 500; margin: 0; }
p { margin: 0; }
.icon { width: 1rem; height: 1rem; flex: none; }

/* --- Topbalk --- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  height: 4rem; padding: 0 1rem;
  background: var(--background); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
}
.brand-mark .icon { width: 1.25rem; height: 1.25rem; }
.brand-logo { height: 2.25rem; width: auto; object-fit: contain; }
.brand-name { font-size: 1.125rem; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav-desktop { margin-left: 1rem; display: none; }
.nav-mobile { overflow-x: auto; background: var(--background); border-bottom: 1px solid var(--border); padding: 0.5rem 1rem; }
.nav-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  transition: background-color 0.15s, color 0.15s; white-space: nowrap;
}
.nav-link:hover { background: var(--accent); }
.nav-link.is-active { background: var(--secondary); color: var(--secondary-foreground); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.who { display: none; text-align: right; }
.who-name { font-size: 0.875rem; font-weight: 500; line-height: 1.2; }
.who-role { font-size: 0.75rem; color: var(--muted-foreground); }
.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--secondary); color: var(--secondary-foreground);
  font-size: 0.875rem; font-weight: 500;
}

.main { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* --- Knoppen --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.25rem; padding: 0 1rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground);
  transition: filter 0.15s, background-color 0.15s;
}
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-outline { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }
.btn-danger { background: var(--destructive); color: var(--destructive-foreground); }
.btn-icon { width: 2.25rem; padding: 0; }
.btn-sm { height: 2rem; font-size: 0.8125rem; padding: 0 0.75rem; }
.btn-block { width: 100%; }

/* --- Kaarten --- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.card + .card { margin-top: 0.5rem; }
.card-body { padding: 1rem; }
.card-link { display: block; transition: box-shadow 0.15s; }
.card-link:hover { box-shadow: var(--shadow-google); }
.section { margin-bottom: 2.25rem; }
.section-title { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.5rem; text-transform: capitalize; }
/* Dagscheiding in weekplanning: lijn met datum-badge */
.section.day-section .section-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.section.day-section .section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.day-pill { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--foreground); background: color-mix(in oklab, var(--foreground) 8%, var(--background)); border: 1px solid var(--border); }
.section.is-today .day-pill { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.section.is-weekend .day-pill { background: color-mix(in oklab, var(--foreground) 3%, var(--background)); color: var(--muted-foreground); font-style: italic; }

/* Huidige dag in de weekweergave: bovenaan, met duidelijk onderscheid */
.section.is-today {
  background: color-mix(in oklab, var(--primary) 6%, var(--background));
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 0.75rem 0.75rem 0.25rem;
}
.section.is-today .section-title {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--primary); font-weight: 600;
}
.badge-today { background: var(--primary); color: var(--primary-foreground); }
.empty { border: 1px dashed var(--border); border-radius: var(--radius); background: var(--background); padding: 1.25rem 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.muted { color: var(--muted-foreground); font-size: 0.875rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.stack { display: grid; gap: 0.75rem; }
.grid-2 { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.spacer { margin-left: auto; }

/* --- Statuslabels --- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.75rem; font-weight: 500; }
.badge-planned { background: var(--secondary); color: var(--secondary-foreground); }
.badge-in_progress { background: var(--amber-bg); color: var(--amber-fg); }
.badge-done { background: var(--primary); color: var(--primary-foreground); }
.badge-soft { background: var(--muted); color: var(--muted-foreground); }

/* --- Formulieren --- */
label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
input[type=date], input[type=time], input[type=tel],
input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 0.9375rem; color: var(--foreground);
  background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
  padding: 0.5rem 0.75rem;
}
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-height: 2.5rem; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem 1rem;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in oklab, var(--ring) 45%, transparent); outline-offset: 1px; border-color: var(--ring); }
.field { margin-bottom: 0.875rem; }
.field-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.check input { width: 1rem; height: 1rem; accent-color: var(--primary); }
.error { color: var(--destructive); font-size: 0.875rem; margin-bottom: 0.75rem; }
.notice { background: var(--secondary); color: var(--secondary-foreground); border-radius: calc(var(--radius) - 4px); padding: 0.625rem 0.75rem; font-size: 0.875rem; margin-bottom: 0.75rem; }

/* --- Aanmeldpagina --- */
.auth-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-wrap { width: 100%; max-width: 26rem; }
.auth-card { padding: 1.75rem; box-shadow: var(--shadow-google); }
.auth-brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.auth-title { font-size: 1.375rem; font-weight: 400; margin-bottom: 0.25rem; }
.auth-sub { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.25rem; }
.auth-links { display: flex; justify-content: space-between; margin-top: 1rem; font-size: 0.875rem; }
.auth-links a { color: var(--secondary-foreground); }

/* --- Tabellen --- */
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }

/* --- Tabbladen --- */
.tabs { display: flex; gap: 0.25rem; background: var(--muted); border-radius: 999px; padding: 0.25rem; margin-bottom: 1.25rem; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 640px) {
  .tabs { width: 100%; border-radius: 14px; }
  .tab { padding: 0.65rem 1.1rem; font-size: 0.95rem; }
}
.tab.is-active { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-google); }

/* --- Kalender --- */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.cal-title { font-size: 0.875rem; font-weight: 500; text-transform: capitalize; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--border); gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.month-weekday { background: var(--background); padding: 0.4rem; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); text-transform: uppercase; }
.month-cell { background: var(--background); min-height: 6.5rem; padding: 0.35rem; cursor: pointer; }
.month-cell.is-other { background: color-mix(in oklab, var(--muted) 55%, var(--background)); }
.month-cell .day-num { font-size: 0.75rem; color: var(--muted-foreground); }
.month-cell.is-today .day-num { background: var(--primary); color: var(--primary-foreground); border-radius: 999px; padding: 0.05rem 0.4rem; }
.chip { display: block; width: 100%; text-align: left; margin-top: 0.2rem; border-radius: 0.4rem; padding: 0.15rem 0.4rem; font-size: 0.72rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; }
.chip-planned { background: var(--secondary); color: var(--secondary-foreground); }
.chip-in_progress { background: var(--amber-bg); color: var(--amber-fg); }
.chip-done { background: var(--primary); color: var(--primary-foreground); }
.day-columns { display: grid; grid-template-columns: 3.5rem repeat(var(--cols, 7), minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--background); }
.day-header { position: sticky; top: 4rem; background: var(--background); border-bottom: 1px solid var(--border); padding: 0.4rem; text-align: center; font-size: 0.75rem; text-transform: capitalize; z-index: 5; }
.hour-col { border-right: 1px solid var(--border); }
.hour-label { height: 48px; font-size: 0.7rem; color: var(--muted-foreground); padding-right: 0.35rem; text-align: right; }
.day-col { position: relative; border-right: 1px solid var(--border); cursor: pointer; }
.hour-line { height: 48px; border-bottom: 1px solid color-mix(in oklab, var(--border) 65%, transparent); }
.day-task { position: absolute; left: 2px; right: 2px; border-radius: 0.4rem; padding: 0.15rem 0.35rem; font-size: 0.72rem; overflow: hidden; border: 0; text-align: left; cursor: pointer; font-family: inherit; }

/* --- Dialoog --- */
.modal-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal { position: relative; background: var(--background); border-radius: var(--radius); width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; padding: 1.5rem; box-shadow: var(--shadow-google); }
.modal-head { margin-bottom: 1rem; padding-right: 1.75rem; }
.modal h2 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.modal-desc { margin-top: 0.35rem; font-size: 0.875rem; color: var(--muted-foreground); }
.modal-close {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: calc(var(--radius) - 6px); background: transparent;
  color: var(--foreground); font-size: 1.25rem; line-height: 1; opacity: 0.6; cursor: pointer;
}
.modal-close:hover { opacity: 1; background: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.hidden { display: none !important; }
.task-title-field { position: relative; }
.template-suggestions { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; max-height: 14rem; overflow-y: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); margin-top: -0.625rem; background: var(--background); box-shadow: var(--shadow-google); }
.template-suggestion { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.125rem; border: 0; background: transparent; color: var(--foreground); font: inherit; padding: 0.5rem 0.75rem; text-align: left; cursor: pointer; }
.template-suggestion:hover, .template-suggestion:focus-visible { background: var(--accent); outline: none; }
.template-suggestion-title { font-size: 0.875rem; font-weight: 500; }
.template-suggestion-description { display: block; width: 100%; overflow: hidden; color: var(--muted-foreground); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }

/* --- Kaart en foto's --- */
.map { width: 100%; height: 16rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--muted); }
.suggestions { border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); margin-top: 0.25rem; background: var(--background); overflow: hidden; }
.suggestion { display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 0.875rem; padding: 0.5rem 0.75rem; cursor: pointer; }
.suggestion:hover { background: var(--accent); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.photo { position: relative; }
.photo img { width: 100%; height: 8rem; object-fit: cover; border-radius: calc(var(--radius) - 4px); border: 1px solid var(--border); }
.photo .btn { position: absolute; top: 0.25rem; right: 0.25rem; }

/* --- Meldingen --- */
.toasts { position: fixed; bottom: 1rem; right: 1rem; display: grid; gap: 0.5rem; z-index: 80; }
.toast { background: var(--foreground); color: var(--background); border-radius: calc(var(--radius) - 4px); padding: 0.625rem 0.875rem; font-size: 0.875rem; box-shadow: var(--shadow-google); max-width: 22rem; }
.toast.is-error { background: var(--destructive); color: var(--destructive-foreground); }

.skeleton { background: var(--muted); border-radius: var(--radius); height: 6rem; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

@media (min-width: 640px) {
  .who { display: block; }
  .field-row, .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
  .topbar { padding: 0 1.5rem; }
  .main { padding: 2rem 1.5rem 3rem; }
  h1 { font-size: 1.875rem; }
}
@media (max-width: 639px) {
  .brand-name { display: none; }


}

/* Stippen in de maandweergave (alleen mobiel zichtbaar) */
.dots { display: none; }
.dot { width: 5px; height: 5px; border-radius: 999px; background: var(--muted-foreground); }
.dot-planned { background: var(--secondary-foreground); }
.dot-in_progress { background: var(--amber-fg); }
.dot-done { background: var(--primary); }

/* Dagoverzicht onder de maandweergave */
.day-agenda { margin-top: 1rem; }
.day-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.day-agenda-title { font-size: 0.95rem; font-weight: 500; text-transform: capitalize; }
.agenda-list { display: grid; gap: 0.5rem; }
.agenda-item {
  display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; text-align: left;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 0.8rem; cursor: pointer; font: inherit; color: inherit;
}
.agenda-item:hover { background: var(--muted); }
.agenda-bar { width: 4px; align-self: stretch; border-radius: 999px; background: var(--muted-foreground); flex: none; }
.agenda-bar.dot-planned { background: var(--secondary-foreground); }
.agenda-bar.dot-in_progress { background: var(--amber-fg); }
.agenda-bar.dot-done { background: var(--primary); }
.agenda-main { min-width: 0; flex: 1; }
.agenda-main > span { display: block; }
.agenda-time { font-size: 0.75rem; color: var(--muted-foreground); }
.agenda-title { font-size: 0.9375rem; font-weight: 500; overflow-wrap: anywhere; }
.agenda-sub { font-size: 0.8rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.agenda-status { font-size: 0.7rem; border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; flex: none; }
.agenda-empty { border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.1rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

/* Bijwerken: dropzone, voortgang en live log */
.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.75rem 1rem; text-align: center; transition: border-color .15s, background .15s; }
.dropzone.is-over { border-color: var(--primary); background: var(--muted); }
.dropzone svg { width: 28px; height: 28px; color: var(--muted-foreground); }
.dropzone p { margin: .35rem 0 0; font-size: .9375rem; }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.progress-head { display: flex; justify-content: space-between; font-size: .875rem; font-weight: 500; margin-bottom: .4rem; }
.progress { height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.progress-bar { height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width .35s ease; }
.progress.is-busy .progress-bar { background-image: linear-gradient(90deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%); background-size: 1.25rem 1.25rem; animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 1.25rem 0; } }
.logbox { margin-top: 1rem; max-height: 16rem; overflow-y: auto; background: var(--foreground); color: var(--background); border-radius: var(--radius); padding: .75rem .875rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; line-height: 1.5; }
.logline { display: flex; gap: .625rem; }
.logline .t { opacity: .6; flex: none; }
.logline.ok .m { color: #7ee2a8; }
.logline.error .m { color: #ff9a92; }

/* Datum- en tijdvelden in het taakvenster */
.field-row.time-row { display: flex; gap: .6rem; }
.field-row.time-row .field { flex: 1 1 0; min-width: 0; }
.field-row.time-row select { width: 100%; min-height: 2.5rem; font-size: 0.9375rem; }
#f-date { width: 100%; min-height: 2.5rem; font-size: 0.9375rem; }
.next-day { font-size: .75rem; font-weight: 400; color: var(--muted-foreground); }
.duration-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.2rem 0 .8rem; }
.duration-row .duration-label { font-size: .75rem; color: var(--muted-foreground); }
.btn-chip { height: 1.9rem; min-height: 1.9rem; border-radius: 999px; padding: 0 .75rem; font-size: .75rem; }
@media (max-width: 480px) {
  .field-row.time-row { gap: .5rem; }
}

/* Losse taken (to-do) */
.todo-card { margin-bottom: 16px; }
.todo-card.todo-embedded { margin: 12px 0 0; background: var(--background); }
.todo-add { display: grid; gap: 8px; margin: 10px 0; }
.todo-add .field-row { display: flex; gap: 8px; align-items: center; }
.todo-add #todo-title { flex: 1; min-width: 0; }
.todo-options-row #todo-assignee { flex: 1 1 auto; min-width: 0; }
.todo-options-row #todo-bulk-toggle { flex: 0 0 auto; white-space: nowrap; }
.todo-add textarea { width: 100%; margin-bottom: 8px; }
.todo-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; }
.todo-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.todo-item:last-child { border-bottom: 0; }
.todo-check { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.todo-check input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
.todo-title { display: block; font-weight: 500; }
.todo-sub { display: block; font-size: 12px; }
.todo-item.is-done .todo-title { text-decoration: line-through; color: var(--muted-fg, #6b7280); font-weight: 400; }
.todo-heading { margin: 14px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-fg, #6b7280); }

@media (max-width: 639px) {
  .todo-options-row { align-items: stretch !important; flex-direction: column; }
  .todo-options-row #todo-assignee,
  .todo-options-row #todo-bulk-toggle { width: 100%; min-height: 2.75rem; }
}

/* ---------- Notificaties ---------- */
.notif { position: relative; }
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 1.15rem; height: 1.15rem;
  padding: 0 0.25rem; border-radius: 999px; background: var(--destructive, #dc2626); color: #fff;
  font-size: 0.7rem; font-weight: 500; line-height: 1.15rem; text-align: center;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(22rem, calc(100vw - 2rem));
  z-index: 60; padding: 0; overflow: hidden;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); }
.notif-title { font-weight: 500; }
.notif-head-actions { display: flex; gap: 0.6rem; }
.btn-link { background: none; border: 0; padding: 0; color: var(--muted-foreground); font-size: 0.8rem; cursor: pointer; }
.btn-link:hover { color: var(--foreground); text-decoration: underline; }
.notif-list { max-height: 24rem; overflow-y: auto; }
.notif-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 0.7rem 0.9rem; cursor: pointer; }
.notif-item:hover { background: var(--muted); }
.notif-item.is-unread { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.notif-item-title { font-size: 0.875rem; font-weight: 500; }
.notif-item-body { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.15rem; }
.notif-item-time { font-size: 0.7rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.notif-empty { padding: 1.25rem 0.9rem; text-align: center; font-size: 0.85rem; color: var(--muted-foreground); }

/* 1.6.33: gebundelde herhalende taken + dagdetail ook op desktop */
.chip-rec { background: transparent; color: var(--muted-foreground); border: 1px dashed var(--border); }
.chip-rec:hover { background: var(--muted); color: var(--foreground); }
.more-link { display: block; margin-top: 0.2rem; padding: 0.1rem 0.4rem; background: none; border: 0; font: inherit; font-size: 0.72rem; color: var(--muted-foreground); cursor: pointer; text-align: left; }
.more-link:hover { color: var(--foreground); text-decoration: underline; }
.month-cell.is-selected { box-shadow: inset 0 0 0 2px var(--primary); }
@media (max-width: 639px) { .month-cell .chip-rec, .month-cell .more-link { display: none; } }

@media (max-width: 639px) {
  /* Meldingen: paneel binnen het scherm houden */
  .notif-panel {
    position: fixed;
    top: calc(4rem + 0.5rem);
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
    box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.28);
  }
  .notif-list { max-height: calc(100vh - 9rem); }
  .notif-head { padding: 0.7rem 0.8rem; }
  .notif-head-actions { gap: 0.75rem; }
}

@media (max-width: 639px) {
  /* Kalender: compacte maand met stippen */
  .month-cell { min-height: 3.1rem; padding: 0.2rem 0.15rem; text-align: center; }
  .month-cell .chip { display: none; }
  .month-cell .day-num { display: inline-block; font-size: 0.8rem; }
  .month-cell.is-selected { background: color-mix(in oklab, var(--secondary) 70%, var(--background)); }
  .month-cell.is-selected .day-num { font-weight: 600; color: var(--foreground); }
  .dots { display: flex; justify-content: center; gap: 2px; margin-top: 2px; min-height: 6px; }
  .month-weekday { padding: 0.3rem 0.1rem; font-size: 0.65rem; }
  .cal-title { width: 100%; order: -1; font-size: 1rem; }
}

/* Aanmelden: aangemeld blijven + vingerafdruk */
.check-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0 1rem; font-size: 0.875rem; cursor: pointer; min-height: 2.5rem; }
.check-row input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: none; }
.auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; font-size: 0.75rem; color: var(--muted-foreground); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-bio { height: 2.75rem; gap: 0.5rem; }
.bio-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bio-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.bio-name { font-weight: 500; font-size: 0.9rem; }
.bio-list .muted, .bio-item .muted { color: var(--muted-foreground); font-size: 0.8rem; }

/* Berichten & wachtrij */
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.stat { padding: .9rem 1rem; }
.stat-value { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.stat-label { font-size: .8rem; color: var(--muted-foreground); }
.stat-alert .stat-value { color: var(--destructive, #b42318); }
.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.badge-failed { background: var(--destructive, #b42318); color: var(--destructive-foreground, #fff); }
.badge-opened { background: var(--amber-bg); color: var(--amber-fg); }
.delivery-error { font-size: .78rem; color: var(--destructive, #b42318); margin-top: .2rem; white-space: normal; }
.delivery-detail { font-size: .78rem; color: var(--muted-foreground); margin-top: .2rem; }
@media (max-width: 720px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Notificaties v1.5.8: overzichtelijke items ---------- */
.notif-item { display: flex; align-items: flex-start; gap: 0.7rem; position: relative; padding: 0.8rem 0.9rem; border-left: 3px solid transparent; transition: background .15s; }
.notif-item:active { background: var(--muted); }
.notif-item.is-unread { border-left-color: var(--primary); }
.notif-icon { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.95rem; background: var(--muted); color: var(--foreground); }
.notif-item.is-unread .notif-icon { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.notif-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-item-title, .notif-item-body, .notif-item-time { display: block; }
.notif-item-title { font-size: 0.9rem; line-height: 1.3; font-weight: 500; color: var(--foreground); }
.notif-item.is-unread .notif-item-title { font-weight: 600; }
.notif-item-body { font-size: 0.82rem; line-height: 1.4; margin-top: 0.2rem; overflow-wrap: anywhere; }
.notif-item-time { font-size: 0.72rem; margin-top: 0.35rem; opacity: .85; }
.notif-dot { flex-shrink: 0; width: 0.55rem; height: 0.55rem; margin-top: 0.4rem; border-radius: 999px; background: var(--primary); }
.notif-close { background: none; border: 0; font-size: 1.35rem; line-height: 1; padding: 0 0.2rem; color: var(--muted-foreground); cursor: pointer; }
@media (max-width: 639px) { .notif-item { padding: 0.9rem 0.85rem; } }


/* ---------- Meldingen (v1.6.0) ---------- */
.report-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.report-btn .icon { width: 1.05rem; height: 1.05rem; }
@media (max-width: 639px) {
  .report-btn { padding: 0 0.6rem; min-height: 2.5rem; }
  .report-btn-label { display: none; }
}
.report-photo-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.report-photo-actions .btn { cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; }
.report-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.report-thumbs:empty { display: none; }
.report-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.report-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.report-thumb button { position: absolute; top: 4px; right: 4px; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 0; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.report-item { align-items: flex-start; flex-wrap: wrap; border-left: 3px solid var(--primary); }
.report-item.is-done { border-left-color: transparent; }
.report-main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.report-tag { align-self: flex-start; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); }
.report-desc { font-size: 0.85rem; white-space: pre-line; color: var(--muted-foreground); }
.report-photos { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.25rem 0; }
.report-photos img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.report-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.report-hint { font-size: 0.82rem; }

/* v1.6.1 meldingen */
.report-btn { position: relative; }
.report-badge { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: var(--destructive, #dc2626); color: var(--destructive-foreground, #fff); font-size: 0.68rem; font-weight: 600; line-height: 1.15rem; text-align: center; }
.report-inbox { margin-bottom: 0.5rem; }
.report-toggle { width: 100%; margin-bottom: 0.75rem; }
.todo-toggle { display: flex; align-items: center; gap: 6px; width: 100%; margin: 14px 0 6px; padding: 6px 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-fg, #6b7280); text-align: left; }
.todo-toggle .todo-chev { width: 12px; font-size: 12px; }
.todo-toggle-hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 11px; }
.todo-ttl { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted-fg, #6b7280); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.todo-ttl.is-soon { color: #b45309; border-color: #f59e0b; }

/* v1.6.5 meldingen-kaarten */
.rcards { display: flex; flex-direction: column; gap: 0.75rem; }
.rcard { border: 1px solid var(--border); border-radius: 14px; background: var(--muted, rgb(0 0 0 / 0.03)); padding: 0.85rem 0.9rem 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.rcard-head { display: flex; flex-direction: column; gap: 0.2rem; }
.rcard-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.rcard-meta { align-self: flex-start; font-size: 0.74rem; color: var(--muted-foreground); background: var(--background, #fff); border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem; }
.rcard-desc { margin: 0; font-size: 0.88rem; white-space: pre-line; color: var(--muted-foreground); overflow-wrap: anywhere; }
.rcard-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.4rem; }
.rcard-photos a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.rcard-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.rcard-del { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.rcard-del:hover, .rcard-del:focus-visible { color: var(--destructive, #dc2626); background: rgb(220 38 38 / 0.08); }
.rcard-plan { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 1rem; }

/* --- Lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; touch-action: none; cursor: zoom-in; }
.lb-close, .lb-reset { position: absolute; top: max(.75rem, env(safe-area-inset-top)); min-width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 1; }
.lb-close { right: .75rem; }
.lb-reset { left: .75rem; font-size: 1rem; padding: 0 .8rem; }

/* Rangschikken + prioriteit */
.todo-grip { cursor: grab; touch-action: none; user-select: none; color: var(--muted-fg, #9ca3af); font-size: 16px; letter-spacing: -3px; min-width: 28px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.todo-grip:active { cursor: grabbing; }
.todo-item.is-dragging { background: var(--card, #fff); box-shadow: 0 6px 18px rgba(0,0,0,.15); position: relative; z-index: 2; opacity: .95; }
.prio-badge { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.prio-1 { background: #dc2626; }
.prio-2 { background: #ea580c; }
.prio-3 { background: #ca8a04; }

/* Herinneringsmenu */
.remind-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:50;min-width:12rem;background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:.6rem;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.25rem;display:flex;flex-direction:column}
.remind-menu[hidden]{display:none}
.remind-menu button{all:unset;cursor:pointer;padding:.7rem .8rem;min-height:44px;box-sizing:border-box;border-radius:.4rem;font-size:.95rem}
.remind-menu button:hover,.remind-menu button:focus-visible{background:var(--muted,#f3f4f6)}

/* Pushtoestellen */
.dev-details{margin-top:.6rem}
.dev-details summary{cursor:pointer;list-style:none;display:inline-block}
.dev-details summary::-webkit-details-marker{display:none}
.dev-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;padding:.2rem .6rem;border-radius:999px;background:#f1f5f9;color:#64748b}
.dev-pill.is-on{background:#dcfce7;color:#166534}
.dev-list{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.dev-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid #e2e8f0;border-radius:10px}
.dev-main{display:flex;flex-direction:column;flex:1;min-width:0}
.dev-main .muted{font-size:.8rem}
.dev-del{min-height:36px}
.dev-group{margin-top:.8rem}
.dev-user{font-size:.95rem;margin:0}

/* Push-status in notificatiepaneel */
.push-status{padding:.6rem .9rem;border-bottom:1px solid rgba(0,0,0,.08);font-size:.875rem}
.push-status .ps{display:none}
.push-status[data-state="off"] .ps-off,.push-status:not([data-state]) .ps-off{display:block}
.push-status[data-state="on"] .ps-on{display:block;color:#2f8a4c;font-weight:500}
.push-status[data-state="blocked"] .ps-blocked{display:block;color:#b45309}
.push-status[data-state="unsupported"] .ps-unsupported,.push-status[data-state="iframe"] .ps-iframe{display:block;color:#666}
.push-status .btn{width:100%;justify-content:center}

/* Kalender: lijstweergave met paginering */
.list-view { margin-top: .5rem; }
.list-day { font-size: .8rem; font-weight: 500; text-transform: capitalize; color: var(--muted-foreground); margin: 1rem 0 .4rem; }
.list-day:first-child { margin-top: 0; }
.list-day.is-today { color: var(--primary); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.pager-info { font-size: .8rem; color: var(--muted-foreground); text-align: center; flex: 1; }

/* Terugkerende taken in de kalender */
.rec-mark { opacity: .7; margin-right: .2rem; font-size: .85em; }
.rec-badge { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; font-size: .7rem; line-height: 1.4; background: rgba(127,127,127,.12); color: inherit; opacity: .8; font-weight: 500; }
.agenda-side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.rec-edit { font-size: .72rem; opacity: .55; text-decoration: none; color: inherit; padding: .1rem .3rem; border-radius: .3rem; white-space: nowrap; }
.rec-edit:hover, .rec-edit:focus-visible { opacity: 1; background: rgba(127,127,127,.12); }
.agenda-item[role="button"] { cursor: pointer; }

/* --- Vaste (herhalende) taken gegroepeerd op de planning --- */
.rec-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); margin-top: 0.5rem; overflow: hidden; }
.rec-group > summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.875rem; cursor: pointer; font-weight: 500; }
.rec-group > summary::-webkit-details-marker { display: none; }
.rec-group-title { display: inline-flex; align-items: center; gap: 0.4rem; }
.rec-group-meta { margin-left: auto; font-size: 0.8rem; font-weight: 400; }
.rec-chev { transition: transform .15s; color: var(--muted-foreground); }
.rec-group[open] .rec-chev { transform: rotate(180deg); }
.rec-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.rec-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.rec-row:last-child { border-bottom: 0; }
.rec-row-link { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; padding: 0.45rem 0.875rem; color: inherit; text-decoration: none; }
.rec-row-link:hover { background: var(--muted); }
.rec-dot { grid-row: span 2; align-self: center; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--secondary-foreground); }
.rec-dot.dot-in_progress { background: var(--amber-fg); }
.rec-dot.dot-done { background: var(--primary); }
.rec-row-title { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row-sub { font-size: 0.75rem; }
.rec-row.is-done .rec-row-title { text-decoration: line-through; color: var(--muted-foreground); }
.rec-row-edit { padding: 0.45rem 0.75rem; color: var(--muted-foreground); text-decoration: none; opacity: .7; }
.rec-row-edit:hover { opacity: 1; color: var(--foreground); }

/* --- Aftellen bij afronden / verwijderen van losse taken --- */
.todo-item.is-pending { display: block; padding: 0.35rem 0; }
.todo-countdown { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 0.5rem; width: 100%; box-sizing: border-box; padding: 0.5rem 0.65rem 0.65rem; border-radius: 0.6rem; background: var(--secondary); color: var(--secondary-foreground); overflow: hidden; }
.todo-item.is-delete .todo-countdown { background: color-mix(in oklab, var(--destructive) 12%, var(--background)); color: var(--destructive); }
.todo-cd-main { min-width: 0; display: flex; flex-direction: column; }
.todo-cd-title { font-size: 0.85rem; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-cd-text { font-size: 0.8rem; }
.todo-countdown .btn { white-space: nowrap; flex-shrink: 0; }
.todo-cd-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; transform-origin: left; animation: todo-cd var(--cd, 10s) linear forwards; }
@keyframes todo-cd { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.todo-item.is-swiping { transition: none; position: relative; border-radius: 0.5rem; }
.todo-item:not(.is-swiping) { transition: transform .2s ease; }
.todo-item.swipe-done { background: var(--secondary); }
.todo-item.swipe-delete { background: color-mix(in oklab, var(--destructive) 12%, var(--background)); }
.todo-list { overflow-x: hidden; }

/* 1.6.25: groepen terugkerende taken */
.rec-group-head { cursor: pointer; background: var(--muted, rgba(0,0,0,.04)); user-select: none; }
.rec-group-head td { padding-top: .6rem; padding-bottom: .6rem; }
.rec-group-head:hover, .rec-group-head:focus-visible { filter: brightness(.97); outline: none; }
.rec-caret { display: inline-block; width: 1em; }

/* 1.6.26: vaste kolomkoppen bij terugkerende taken */
.rec-card { overflow: visible; }
.rec-table-wrap { overflow: visible; }
.rec-table-wrap thead th { position: sticky; top: 4rem; z-index: 10; background: var(--card, var(--background)); box-shadow: inset 0 -1px 0 var(--border); }
@media (max-width: 900px) {
  .rec-table-wrap { overflow: auto; max-height: calc(100vh - 6rem); }
  .rec-table-wrap thead th { top: 0; }
}

/* 1.6.27: rustige tabel terugkerende taken */
.rec-row-item { cursor: pointer; }
.rec-row-item:hover td, .rec-row-item:focus-visible td { background: var(--muted, rgba(0,0,0,.03)); outline: none; }
.rec-row-item td { vertical-align: middle; padding-top: .65rem; padding-bottom: .65rem; }
.rec-t { font-weight: 500; }
.rec-sub { font-size: .78rem; color: var(--muted-foreground); margin-top: .15rem; }
.rec-end { text-align: right; white-space: nowrap; }
.rec-status { font-size: .8rem; color: var(--muted-foreground); margin-right: .4rem; }
.rec-status.st-active { color: var(--primary); }
.rec-status.st-paused { color: var(--amber-fg, #b45309); }
.rec-icon { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: .3rem .45rem; border-radius: .4rem; color: var(--muted-foreground); line-height: 1; }
.rec-icon:hover, .rec-icon:focus-visible { background: var(--secondary, rgba(0,0,0,.06)); color: var(--foreground); }
.rec-menu-wrap { position: relative; display: inline-block; }
.rec-menu { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30; min-width: 10rem; background: var(--card, var(--background)); border: 1px solid var(--border); border-radius: .6rem; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .25); padding: .25rem; text-align: left; }
.rec-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .5rem .65rem; border-radius: .4rem; cursor: pointer; font: inherit; font-size: .875rem; color: var(--foreground); }
.rec-menu button:hover { background: var(--muted, rgba(0,0,0,.05)); }
.rec-menu .rec-danger { color: var(--destructive, #b42318); border-top: 1px solid var(--border); border-radius: 0 0 .4rem .4rem; }

/* 1.6.28 — vergrootbare vensters */
.modal { max-width: min(var(--modal-width, 32rem), 96vw); transition: max-width .2s ease; }
.modal.is-resizing { transition: none; user-select: none; }
.modal-head { padding-right: 3.75rem; }
.modal-size {
  position: absolute; top: 0.9rem; right: 2.9rem; width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center; border: 0;
  border-radius: calc(var(--radius) - 6px); background: transparent; color: var(--foreground);
  font-size: 1rem; line-height: 1; opacity: 0.55; cursor: pointer;
}
.modal-size:hover { opacity: 1; background: var(--accent); }
.modal-grip {
  position: sticky; float: right; bottom: -1.2rem; margin: -0.5rem -1.2rem -1.2rem 0;
  width: 1.1rem; height: 1.1rem; cursor: ew-resize; touch-action: none; opacity: 0.45;
  background: linear-gradient(135deg, transparent 50%, var(--muted-foreground) 50%, var(--muted-foreground) 58%, transparent 58%, transparent 70%, var(--muted-foreground) 70%, var(--muted-foreground) 78%, transparent 78%);
}
.modal-grip:hover { opacity: 0.9; }
@media (max-width: 640px) { .modal { max-width: 100%; } .modal-size, .modal-grip { display: none; } }

/* 1.6.29 compact taakvenster */
.link-btn{background:none;border:0;padding:0;margin:-.25rem 0 .5rem;color:var(--primary);font:inherit;font-size:.875rem;cursor:pointer;text-align:left}
.link-btn:hover{text-decoration:underline}
.check-row{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 .5rem;font-weight:500;cursor:pointer}
.check-row input{width:auto;margin:0}
.done-mark{font-weight:600;color:var(--success, #16a34a)}

/* 1.6.30 swipen op geplande taken */
.swipe-task { touch-action: pan-y; transition: transform .15s ease, background .15s; }
.swipe-task.is-swiping { transition: none; }
.swipe-task.swipe-done { background: var(--secondary); }
.swipe-task.swipe-delete { background: color-mix(in oklab, var(--destructive) 12%, var(--background)); }
.task-pending { margin-bottom: .5rem; list-style: none; }
.rec-row.is-pending { display: block; }

/* v1.6.35 meldingen-modal: tabs + compacte kaarten */
.report-tabs { position: sticky; top: -1.5rem; z-index: 2; display: flex; gap: 0.25rem; padding: 0.25rem; margin: 0 0 0.85rem; background: var(--muted); border-radius: 12px; }
.report-tab { flex: 1; min-height: 2.5rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.report-tab.is-active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.rcards { gap: 0.5rem; }
.rcard { padding: 0.65rem 0.75rem 0.45rem; gap: 0.35rem; border-radius: 12px; background: var(--background); }
.rcard-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 0.5rem; }
.rcard-title { font-size: 0.95rem; flex: 1 1 auto; }
.rcard-meta { background: none; border: 0; padding: 0; font-size: 0.72rem; white-space: nowrap; }
.rcard-desc { font-size: 0.84rem; }
.rcard-photos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rcard-photos a { width: 3.25rem; height: 3.25rem; border-radius: 8px; }
.rcard-actions { padding-top: 0.35rem; }
.rcard-del { width: 2.25rem; height: 2.25rem; }
.rcard-plan { min-height: 2.25rem; padding: 0 0.85rem; }
@media (max-width: 640px) {
  .report-modal { padding: 1rem; max-height: 92vh; }
  .report-tabs { top: -1rem; }
}

/* Gebruikersmenu (v1.6.39) */
.user-menu { position: relative; }
.user-menu-btn { display: flex; align-items: center; gap: 0.75rem; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.user-menu-btn .who-name, .user-menu-btn .who-role { display: block; }
.user-menu-pop { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 60; min-width: 15rem; padding: 0.375rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card, var(--background)); box-shadow: 0 10px 30px rgb(0 0 0 / 0.12); }
.user-menu-pop[hidden] { display: none; }
.user-menu-head { padding: 0.5rem 0.75rem 0.625rem; border-bottom: 1px solid var(--border); margin-bottom: 0.25rem; }
.user-menu-item { display: flex; width: 100%; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 0; border-radius: 0.5rem; background: none; color: inherit; font: inherit; font-size: 0.875rem; text-align: left; text-decoration: none; cursor: pointer; }
.user-menu-item[hidden] { display: none; }
.user-menu-item:hover { background: var(--accent); }
.user-menu-item.is-danger { color: var(--destructive, #c0392b); }
.user-menu-item .icon { width: 1rem; height: 1rem; }

/* Mijn account */
.account-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .account-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.account-grid .card-body > .btn, .account-grid .card-body > .row { margin-top: 0.5rem; }
.pref-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.625rem 0; border-top: 1px solid var(--border); cursor: pointer; }
.pref-row input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: none; }
.pref-row > span { display: flex; flex-direction: column; }
.pref-label { font-weight: 500; }

/* Offline-statusbalk */
.offline-bar{position:sticky;top:0;z-index:60;padding:.5rem 1rem;font-size:.85rem;text-align:center;background:#fef3c7;color:#78350f;border-bottom:1px solid #fcd34d}
.offline-bar[hidden]{display:none}

/* Planning: automatisch volgende dagen laden */
.load-more { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 0 1.5rem; font-size: .85rem; }
.load-more { flex-direction: column; text-align: center; }
.load-more .spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: wp-spin .8s linear infinite; }
@keyframes wp-spin { to { transform: rotate(360deg); } }

.monthly-banner{display:block;margin:0 0 1rem;padding:.7rem 1rem;border-radius:.6rem;background:#fef3c7;color:#78350f;border:1px solid #fcd34d;text-decoration:none;font-size:.9rem}

/* Nog te bevestigen taken */
@keyframes wp-unconf{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}50%{box-shadow:0 0 0 5px rgba(245,158,11,0)}}
.is-unconfirmed{border-left:4px solid #f59e0b !important;background:linear-gradient(90deg,rgba(245,158,11,.14),transparent 70%) !important;animation:wp-unconf 2.4s ease-in-out infinite}
.dot.is-unconfirmed{border:0 !important;background:#f59e0b !important}
.rec-row.is-unconfirmed{border-radius:8px}
.badge-unconfirmed{background:#f59e0b;color:#1f1300;font-weight:600}
@media (prefers-reduced-motion:reduce){.is-unconfirmed{animation:none}}

/* 1.6.53: kalenderfilter per medewerker + kleuren per medewerker */
.cal-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .75rem; }
.cal-filter select { max-width: 16rem; }
.cal-color-toggle { margin: 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0 0 .75rem; font-size: .8rem; color: var(--muted-foreground); }
.cal-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.cal-swatch { width: .7rem; height: .7rem; border-radius: 999px; display: inline-block; }
.chip.pc, .day-task.pc { background: color-mix(in oklab, var(--pc) 20%, var(--background)); color: var(--foreground); }
.chip.pc:not(.is-unconfirmed), .day-task.pc:not(.is-unconfirmed) { box-shadow: inset 3px 0 0 var(--pc); }
.chip.pc.chip-done, .day-task.pc.chip-done { opacity: .7; text-decoration: line-through; }
.dot.pc, .agenda-bar.pc { background: var(--pc); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 1.6.54: extra kalenderfilters + eigen kleuren */
.cal-filter input[type=search] { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.cal-color-panel { margin: 0 0 .75rem; }
.cal-color-grid { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.cal-color-row { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.cal-color-row input[type=color] { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; flex: none; }
.cal-color-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 1.6.55: inklapbare kalenderfilters op mobiel */
.cal-filter-toggle { display: none; }
.cal-filter [hidden] { display: none; }
@media (max-width: 639px) {
  .cal-filter-section { margin-bottom: .75rem; }
  .cal-filter-toggle { display: inline-flex; min-height: 2.75rem; }
  .cal-filter-panel { display: none; }
  .cal-filter-panel.is-open { display: block; margin-top: .75rem; }
  .cal-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .cal-filter select, .cal-filter input[type=search] { min-width: 0; max-width: none; }
  .cal-filter .btn { justify-self: start; min-height: 2.75rem; white-space: normal; height: auto; }
  .cal-color-toggle { min-width: 0; min-height: 2.75rem; }
  .cal-color-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Meerdere medewerkers kiezen (1.7.1) */
.assignee-drop { position: relative; }
.assignee-drop > summary { list-style: none; cursor: pointer; padding: .55rem .75rem; border: 1px solid var(--border, #ddd); border-radius: .5rem; background: var(--card, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2rem; }
.assignee-drop > summary::-webkit-details-marker { display: none; }
.assignee-drop > summary::after { content: '▾'; position: absolute; right: .75rem; top: .55rem; opacity: .6; }
.assignee-drop[open] > summary::after { content: '▴'; }
.assignee-pick { display: flex; flex-direction: column; gap: .35rem; max-height: 12rem; overflow-y: auto; padding: .5rem .75rem; margin-top: .25rem; border: 1px solid var(--border, #ddd); border-radius: .5rem; background: var(--card, #fff); position: absolute; left: 0; right: 0; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.assignee-pick .check { margin: 0; white-space: nowrap; }

/* Maandoverzicht: datumbadges */
.mo-sum{font-size:.85rem;color:#475569;font-weight:500;margin-bottom:.35rem;opacity:1}
.mo-days{display:flex;flex-wrap:wrap;gap:.3rem}
.mo-day{display:inline-block;padding:.15rem .5rem;border-radius:999px;background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;font-size:.82rem;white-space:nowrap}
.mo-person-sub{display:none;font-size:.82rem;margin-top:.25rem}
@media (max-width:639px){.mo-person{display:none}.mo-person-sub{display:block}}

/* 1.7.5 – bevestigingsbolletjes per medewerker (zelfde pulsanimatie) */
@keyframes wp-conf-ok{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}50%{box-shadow:0 0 0 5px rgba(22,163,74,0)}}
@keyframes wp-conf-no{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}}
.conf-dot{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;margin-right:.45rem;vertical-align:middle}
.conf-dot.is-ok{background:#16a34a;animation:wp-conf-ok 2.4s ease-in-out infinite}
.conf-dot.is-no{background:#dc2626;animation:wp-conf-no 2.4s ease-in-out infinite}
.dot.is-unconfirmed{background:#dc2626 !important;animation:wp-conf-no 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.conf-dot,.dot.is-unconfirmed{animation:none}}

/* 1.7.6 – lijstweergave: medewerkers met eigen bevestigingsbolletje */
.conf-list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.35rem;font-size:.85rem}
.conf-person{display:inline-flex;align-items:center;white-space:nowrap}
.conf-person .conf-dot{width:.55rem;height:.55rem;margin-right:.35rem}
.rec-row-link .conf-list{grid-column:2;margin-top:.2rem}

/* 1.8.0: overzicht nog te bevestigen */
.pending-btn{position:relative}
.pending-btn.has-pending{border-color:#dc2626;color:#dc2626}
.pending-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;height:1.3rem;padding:0 .35rem;margin-left:.4rem;border-radius:999px;background:#dc2626;color:#fff;font-size:.75rem;font-weight:700}
.pending-modal{max-width:640px;width:100%}
.pending-body{max-height:65vh;overflow-y:auto;margin-top:.5rem}
.pending-day{font-size:.9rem;font-weight:700;color:var(--text,#111827);margin:1.1rem 0 .4rem;padding-bottom:.3rem;border-bottom:1px solid var(--border);text-transform:capitalize}
.pending-day:first-child{margin-top:0}
.pending-item{display:grid;grid-template-columns:5.5rem 1fr auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border:1px solid var(--border);border-radius:10px;margin-bottom:.4rem;text-decoration:none;color:inherit;background:var(--card,#fff)}
.pending-item:hover{background:rgba(0,0,0,.03)}
.pending-time{font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:600;color:var(--text,#111827);white-space:nowrap}
.pending-main{display:flex;flex-direction:column;min-width:0}
.pending-main strong{font-size:1rem;line-height:1.3}
.pending-main .conf-list{margin-top:.3rem}
.pending-go{font-size:1.5rem;line-height:1;color:var(--muted,#6b7280)}
@media (max-width:520px){.pending-item{grid-template-columns:1fr auto}.pending-time{grid-column:1/-1;font-size:.8rem}}

/* 1.8.4 – Nog te bevestigen: professionele weergave + herinneringen */
.pending-modal{max-width:40rem;width:100%}
.pending-modal .modal-desc{margin:.25rem 0 0;color:var(--muted-foreground,#64748b);font-size:.875rem}
.pending-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:1rem;padding:.65rem .85rem;border-radius:.6rem;background:var(--muted,#f1f5f4);font-size:.85rem;color:var(--muted-foreground,#475569)}
.pending-bar strong{color:var(--foreground,#0f172a);font-weight:600}
.pending-body{margin-top:.5rem;max-height:62vh;overflow-y:auto;padding-right:.15rem}
.pending-day{display:flex;align-items:baseline;gap:.5rem;margin:1.1rem 0 .4rem;padding-bottom:.35rem;border-bottom:1px solid var(--border,#e5e7eb);font-size:.8rem;font-weight:600;text-transform:capitalize;color:var(--foreground,#0f172a)}
.pending-day em{font-style:normal;font-weight:400;text-transform:none;color:var(--muted-foreground,#64748b)}
.pending-day.is-soon em{color:#b45309;font-weight:500}
.pending-item{display:flex;align-items:center;gap:1rem;padding:.7rem .5rem;border-radius:.55rem;transition:background .15s}
.pending-item+.pending-item{border-top:1px solid color-mix(in oklab,var(--border,#e5e7eb) 60%,transparent)}
.pending-item:hover{background:var(--muted,#f6f8f7)}
.pending-item.is-soon{box-shadow:inset 3px 0 0 #f59e0b}
.pending-time{flex:none;width:4.75rem;display:flex;flex-direction:column;font-variant-numeric:tabular-nums;font-size:.85rem;line-height:1.25}
.pending-time b{font-weight:600}
.pending-time small{color:var(--muted-foreground,#64748b);font-size:.78rem}
.pending-time.is-all{font-size:.78rem;font-weight:500;color:var(--muted-foreground,#64748b)}
.pending-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem;color:inherit;text-decoration:none}
.pending-main strong{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-loc{font-size:.8rem;color:var(--muted-foreground,#64748b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-people{display:flex;flex-wrap:wrap;gap:.3rem}
.pending-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.1rem .55rem .1rem .15rem;border-radius:999px;background:var(--secondary,#eef2f0);font-size:.78rem}
.pending-avatar{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--primary,#188038);color:var(--primary-foreground,#fff);font-size:.6rem;font-weight:700}
.pending-unassigned{font-size:.78rem;color:var(--muted-foreground,#64748b);font-style:italic}
.pending-last{font-size:.75rem;color:var(--muted-foreground,#64748b)}
.pending-remind{position:relative;flex:none}
.pending-menu{position:absolute;right:0;top:calc(100% + .3rem);z-index:60;min-width:11rem;padding:.3rem;border:1px solid var(--border,#e5e7eb);border-radius:.6rem;background:var(--card,#fff);box-shadow:0 10px 28px rgba(15,23,42,.14)}
.pending-menu button{display:block;width:100%;text-align:left;padding:.5rem .65rem;border:0;border-radius:.4rem;background:none;font:inherit;font-size:.85rem;cursor:pointer;color:inherit}
.pending-menu button:hover:not(:disabled){background:var(--muted,#f1f5f4)}
.pending-menu button:disabled{opacity:.45;cursor:not-allowed}
.pending-empty{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:2.5rem 1rem;text-align:center;color:var(--primary,#188038)}
.pending-empty p{margin:.4rem 0 0;font-weight:600;color:var(--foreground,#0f172a)}
.pending-empty span{font-size:.85rem;color:var(--muted-foreground,#64748b)}
@media (max-width:539px){.pending-item{flex-wrap:wrap;gap:.6rem}.pending-remind{margin-left:5.75rem}}

/* 1.8.5 – taakformulier: extra opties, foto's en bevestigingsschakelaar */
.task-extras{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:.25rem 0 .5rem}
.photo-pick-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.photo-pick-actions label{cursor:pointer;margin:0}
.photo-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.photo-thumbs:empty{display:none}
.photo-thumb{position:relative;width:4.25rem;height:4.25rem;border-radius:.5rem;overflow:hidden;border:1px solid var(--border,#e5e7eb)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb button{position:absolute;top:.15rem;right:.15rem;width:1.35rem;height:1.35rem;border:0;border-radius:50%;background:rgba(15,23,42,.65);color:#fff;font-size:.9rem;line-height:1;cursor:pointer}
.switch-row{display:flex;align-items:flex-start;gap:.75rem;margin:.75rem 0 .25rem;padding:.7rem .85rem;border:1px solid var(--border,#e5e7eb);border-radius:.6rem;cursor:pointer}
.switch-row strong{display:block;font-size:.875rem;font-weight:600}
.switch-row small{display:block;font-size:.78rem;color:var(--muted-foreground,#64748b);margin-top:.1rem}
.switch{position:relative;flex:none;width:2.4rem;height:1.4rem;margin-top:.1rem}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch-track{position:absolute;inset:0;border-radius:999px;background:var(--border,#cbd5e1);transition:background .2s;pointer-events:none}
.switch-track::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked+.switch-track{background:var(--primary,#188038)}
.switch input:checked+.switch-track::after{transform:translateX(1rem)}
.switch input:focus-visible+.switch-track{outline:2px solid var(--primary,#188038);outline-offset:2px}

/* v1.8.6/1.8.8 – bounce bij klik buiten elk venster */
@keyframes modal-bounce { 0%{transform:scale(1)} 30%{transform:scale(1.03)} 55%{transform:scale(.985)} 80%{transform:scale(1.01)} 100%{transform:scale(1)} }
.modal.modal-bounce { animation: modal-bounce .45s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 0 3px rgba(234,138,0,.45), 0 20px 50px rgba(0,0,0,.25); transition: box-shadow .6s; }
.modal-bounce-hint { position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,10px); background:rgba(20,20,20,.9); color:#fff; padding:.55rem 1rem; border-radius:999px; font-size:.875rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:10000; max-width:90vw; text-align:center; }
.modal-bounce-hint.is-visible { opacity:1; transform:translate(-50%,0); }
@media (prefers-reduced-motion: reduce) { .modal.modal-bounce { animation:none; } }

/* v1.8.7 – Avant 530 */
.avant-alert{background:#fdecea;color:#a50e0e;border:1px solid #f5c2c0;border-radius:12px;padding:.85rem 1rem;margin-bottom:1rem;font-weight:500}
.avant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1rem}
.avant-meter .card-body,.avant-service .card-body,.avant-session .card-body{text-align:center}
.avant-label{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:#5f6368;margin:0}
.avant-hours{font-size:3.25rem;font-weight:300;margin:.25rem 0;font-variant-numeric:tabular-nums}
.avant-hours small{font-size:1.25rem;color:#5f6368}
.avant-ring{--c:#2f8a4c;width:150px;height:150px;border-radius:50%;margin:0 auto .5rem;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),#e8eaed 0)}
.avant-ring[data-level=soon]{--c:#e37400}.avant-ring[data-level=due]{--c:#d93025}
.avant-ring-inner{width:118px;height:118px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.avant-ring-inner strong{font-size:1.5rem;font-weight:500}.avant-ring-inner span{font-size:.75rem;color:#5f6368}
.avant-session{margin-bottom:1rem}
.avant-timer{font-size:2.75rem;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.avant-start{min-width:180px;padding:.9rem 2rem;font-size:1.1rem;border-radius:999px;margin-top:.5rem}
.avant-start.is-running{background:#d93025;border-color:#d93025}
.avant-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.avant-actions .btn{flex:1;min-width:160px}
.avant-log{margin-top:.75rem}
.avant-row{display:grid;grid-template-columns:150px 1fr 1fr auto;gap:.75rem;padding:.6rem 0;border-bottom:1px solid #eee;align-items:center;font-size:.9rem}
.avant-row:last-child{border-bottom:0}
.avant-row-date{color:#5f6368}.avant-row-num{font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:640px){.avant-row{grid-template-columns:1fr auto}.avant-row>span:nth-child(3){grid-column:1/-1}}
.team-perm{margin-top:.75rem}
.badge-ok{background:#e6f4ea;color:#137333}

/* Taakpagina: kaart even hoog als linkerkolom */
.taak-map-col { display: flex; flex-direction: column; }
.taak-map-col .map { min-height: 18rem; }
@media (min-width: 768px) {
  .taak-map-col { align-self: stretch; }
  .taak-map-col .map { flex: 1 1 0; height: auto; }
}

/* Meldingsvoorkeuren (Mijn account) — compacte tabel (v1.8.72) */
.np-title { display: flex; align-items: center; gap: .6rem; }
.np-saved { font-size: .78rem; color: var(--primary, #2f8a4c); font-weight: 500; }
.np-table { display: flex; flex-direction: column; margin-top: .5rem; }
.np-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 3.25rem); align-items: center; column-gap: .25rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.np-head { position: sticky; top: 0; z-index: 2; background: var(--card, #fff); border-top: 0; padding: .4rem 0; }
.np-col { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .68rem; color: var(--muted-foreground, #666); }
.np-col.is-off { opacity: .4; }
.np-ico { width: 1.05rem; height: 1.05rem; flex: none; stroke-width: 1.75; }
.np-allrow { background: var(--muted, #f4f4f4); border-radius: .5rem; border-top: 0; padding-left: .5rem; padding-right: 0; }
.np-allrow .np-name span { font-weight: 500; }
.np-name { display: flex; flex-direction: column; min-width: 0; }
.np-name span { font-size: .92rem; line-height: 1.25; }
.np-name small { font-size: .74rem; color: var(--muted-foreground, #666); line-height: 1.3; margin-top: .1rem; }
.np-group { margin-top: 1rem; padding-bottom: .25rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--primary, #2f8a4c); }
.np-cell { display: flex; justify-content: center; cursor: pointer; }
.np-sw { position: absolute; opacity: 0; width: 1px; height: 1px; }
.np-track { position: relative; width: 2.2rem; height: 1.3rem; border-radius: 999px; background: var(--border, #d4d4d4); transition: background .15s; }
.np-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 4px); height: calc(1.3rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.np-sw:checked + .np-track { background: var(--primary, #2f8a4c); }
.np-sw:checked + .np-track::after { transform: translateX(.9rem); }
.np-sw:focus-visible + .np-track { outline: 2px solid var(--primary, #2f8a4c); outline-offset: 2px; }
.np-sw:disabled + .np-track { opacity: .35; }
.np-cell:has(.np-sw:disabled) { cursor: not-allowed; }
.np-offnote { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; font-size: .8rem; color: var(--muted-foreground, #666); }
.np-offnote .btn { margin-left: auto; }

/* 1.8.14: achterstallige taken */
.overdue-btn{position:relative}
.overdue-btn.has-overdue{border-color:#ea580c;color:#c2410c}
.overdue-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;height:1.3rem;padding:0 .35rem;margin-left:.4rem;border-radius:999px;background:#ea580c;color:#fff;font-size:.75rem;font-weight:700}
.overdue-group{margin-top:.75rem}
.overdue-group.has-new{border-color:#fdba74;box-shadow:0 0 0 3px rgba(234,88,12,.12)}
.badge-overdue{background:#ffedd5;color:#c2410c}
.overdue-new{margin-left:.5rem;padding:.1rem .5rem;border-radius:999px;background:#ea580c;color:#fff;font-size:.72rem;font-weight:700}
.overdue-pulse{display:inline-block;width:.6rem;height:.6rem;margin-right:.45rem;border-radius:50%;background:#ea580c;animation:overduePulse 1.6s ease-out infinite}
@keyframes overduePulse{0%{box-shadow:0 0 0 0 rgba(234,88,12,.55)}70%{box-shadow:0 0 0 .5rem rgba(234,88,12,0)}100%{box-shadow:0 0 0 0 rgba(234,88,12,0)}}
@media (prefers-reduced-motion:reduce){.overdue-pulse{animation:none}}
.overdue-row{display:flex;align-items:center;gap:.6rem}
.overdue-row.is-new .rec-row-title{font-weight:700}
.overdue-check{width:1.15rem;height:1.15rem;flex:none;margin-left:.6rem;accent-color:#16a34a}
.overdue-late{color:#c2410c;font-weight:600}
.overdue-day em{color:#c2410c}
.overdue-actions{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end}
@media (max-width:640px){.pending-item .overdue-actions{width:100%;justify-content:flex-start}}

/* 1.8.15: lightbox navigatie */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.lb-nav:hover { background: rgba(255,255,255,.3); }
.lb-nav[hidden] { display: none; }
.lb-prev { left: max(.75rem, env(safe-area-inset-left)); }
.lb-next { right: max(.75rem, env(safe-area-inset-right)); }
.lb-count { position: absolute; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.5); padding: .25rem .7rem; border-radius: 999px; font-size: .85rem; }
.lb-count:empty { display: none; }

/* 1.8.15: aanduiding op foto */
.photo-thumb, .report-thumb { position: relative; }
.photo-thumb .thumb-mark, .report-thumb .thumb-mark { position: absolute; top: auto; right: auto; bottom: 4px; left: 4px; width: 1.8rem; height: 1.8rem; border-radius: 999px; border: 0; background: #ef4444; color: #fff; font-size: .95rem; line-height: 1; cursor: pointer; }
.annot-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: .75rem; }
.annot { display: flex; flex-direction: column; gap: .6rem; width: min(100%, 1100px); max-height: 100%; }
.annot-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.annot-tools, .annot-colors { display: flex; gap: .35rem; }
.annot-tools button, .annot-undo { border: 0; border-radius: 999px; padding: .5rem .85rem; background: rgba(255,255,255,.15); color: #fff; font-weight: 600; cursor: pointer; }
.annot-tools button.is-active { background: #fff; color: #111; }
.annot-colors button { width: 2rem; height: 2rem; border-radius: 999px; border: 3px solid transparent; background: var(--c); cursor: pointer; }
.annot-colors button.is-active { border-color: #fff; box-shadow: 0 0 0 2px #111 inset; }
.annot-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.annot-stage canvas { max-width: 100%; max-height: calc(100vh - 10rem); touch-action: none; cursor: crosshair; border-radius: 8px; }
.annot-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.annot-actions .btn-ghost { color: #fff; }

/* Kalender: volledige breedte (fullscreen-icoontje in cal-head) */
.cal-wide-btn { margin-left: auto; }
.cal-wide-btn .ic-min { display: none; }
body.cal-wide .cal-wide-btn .ic-max { display: none; }
body.cal-wide .cal-wide-btn .ic-min { display: inline; }
body.cal-wide .main { max-width: none; }
body.cal-wide .month-cell { min-height: 8.5rem; }
body.cal-wide .month-cell .chip { font-size: 0.78rem; }
body.cal-wide .month-weekday { font-size: 0.8rem; }
body.cal-wide .cal-title { font-size: 1rem; }
body.cal-wide .day-header { font-size: 0.85rem; }
@media (max-width: 639px) {
  body.cal-wide .month-cell { min-height: 3.6rem; }
  body.cal-wide .cal-wide-btn { margin-left: 0; }
}

.rec-check{width:1.25rem;height:1.25rem;flex:none;margin-left:.75rem;accent-color:#16a34a;cursor:pointer}

/* 1.8.18 Avant: uitlijning, klepelmaaier, foto van teller */
.avant-page{display:flex;flex-direction:column;gap:1rem}
.avant-page>*{margin:0!important}
.avant-grid{grid-template-columns:1fr 1fr;align-items:stretch}
.avant-grid .card{height:100%}
.avant-grid .card-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;height:100%}
.avant-sub{font-size:.8rem;margin:0}
.avant-session .card-body{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.avant-session p{margin:0}
.avant-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.avant-actions .btn{min-width:0;width:100%}
.avant-switch{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:#5f6368;cursor:pointer}
.avant-switch input{width:1.1rem;height:1.1rem;accent-color:#2f8a4c}
.avant-att .card-body{padding:.7rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.avant-att-head{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.avant-att-hours{margin-left:auto;font-variant-numeric:tabular-nums}
.avant-bar{height:6px;border-radius:99px;background:#e8eaed;overflow:hidden}
.avant-bar span{display:block;height:100%;background:#2f8a4c;border-radius:99px}
.avant-att[data-level=soon] .avant-bar span{background:#e37400}
.avant-att[data-level=due] .avant-bar span{background:#d93025}
.avant-att[data-level=due]{border-color:#f5c2c0}
.avant-att-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.78rem}
.avant-tag{display:inline-block;font-size:.7rem;padding:.05rem .45rem;border-radius:99px;background:#eef3ee;color:#2f6b3f;vertical-align:middle}
.avant-photo img{width:28px;height:28px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-left:.25rem}
.avant-h-row{display:flex;gap:.5rem;align-items:stretch}
.avant-h-row input{flex:1;min-width:0}
.avant-cam{white-space:nowrap;cursor:pointer}
.avant-cam-result{display:flex;gap:.6rem;align-items:center;margin-top:.5rem;font-size:.85rem}
.avant-cam-result img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.avant-cam-result .is-ok{color:#2f6b3f}.avant-cam-result .is-warn{color:#b45309}
.avant-row{grid-template-columns:150px 110px 1fr auto}
@media (max-width:640px){
  .avant-grid{gap:.75rem}
  .avant-grid .card-body{padding:.9rem .5rem}
  .avant-hours{font-size:2.3rem}
  .avant-hours small{font-size:1rem}
  .avant-ring{width:112px;height:112px}
  .avant-ring-inner{width:88px;height:88px}
  .avant-ring-inner strong{font-size:1.15rem}
  .avant-timer{font-size:2.4rem}
  .avant-start{width:100%;max-width:none}
  .avant-actions{gap:.5rem}
  .avant-actions .btn{font-size:.85rem;padding-left:.5rem;padding-right:.5rem}
  .avant-row{grid-template-columns:1fr auto;gap:.15rem .75rem}
  .avant-row>span:nth-child(3),.avant-row>span:nth-child(4){grid-column:auto}
  .avant-row .avant-row-note{grid-column:1/-1}
  .avant-att-foot{flex-wrap:wrap}
  .avant-h-row{flex-direction:column}
}

/* PWA: onderkant (Android-navigatiebalk) in huisstijl */
html { background: var(--primary); }
body { min-height: 100vh; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); box-shadow: inset 0 calc(-1 * env(safe-area-inset-bottom)) 0 var(--primary); }

/* Avant-logboek per dag (1.8.24) */
.avant-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.25rem 0 .75rem}
.avant-total{background:#f6f8f6;border-radius:10px;padding:.55rem .75rem;display:flex;flex-direction:column}
.avant-total span{font-size:.75rem;color:#5f6368}.avant-total strong{font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.avant-filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.75rem}
.avant-filters select{width:auto;min-width:9rem;padding:.35rem .6rem;font-size:.85rem}
.avant-filters .link-btn{background:none;border:0;color:#2f8a4c;font-size:.85rem;cursor:pointer;padding:.25rem}
.avant-live{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:10px;background:#eef7f0;margin-bottom:.75rem;font-size:.9rem}
.avant-dot{width:.6rem;height:.6rem;border-radius:50%;background:#2f8a4c;box-shadow:0 0 0 0 rgba(47,138,76,.5);animation:avant-pulse 1.6s infinite}
@keyframes avant-pulse{70%{box-shadow:0 0 0 .5rem rgba(47,138,76,0)}100%{box-shadow:0 0 0 0 rgba(47,138,76,0)}}
.avant-live-tag{margin-left:auto;font-size:.75rem;color:#2f6b3f;font-weight:600}
.avant-day{margin-bottom:.9rem}
.avant-day-head{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:#5f6368;padding:.35rem 0;border-bottom:1px solid #e6e6e6}
.avant-day-head span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.avant-srow{display:grid;grid-template-columns:minmax(0,1fr) auto 6.5rem;gap:.75rem;align-items:center;padding:.5rem 0;border-bottom:1px solid #f1f1f1;font-size:.9rem}
.avant-srow:last-child{border-bottom:0}
.avant-srow.is-short{opacity:.55}
.avant-srow-time{font-variant-numeric:tabular-nums;white-space:nowrap;color:#3c4043}
.avant-srow-who{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.avant-srow-note{flex-basis:100%;font-size:.8rem;color:#5f6368}
.avant-srow-meter{font-size:.78rem;color:#80868b;white-space:nowrap;font-variant-numeric:tabular-nums}
.avant-srow-dur{font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.avant-srow.is-log{position:relative;background:#f6faf6}
.avant-logtag{border:0;cursor:help;font:inherit;font-size:.78rem}
.avant-tip{position:absolute;z-index:20;top:100%;left:0;white-space:pre-line;background:#202124;color:#fff;font-size:.8rem;padding:.5rem .7rem;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.2);max-width:18rem}
.avant-more{text-align:center;margin-top:.5rem}
@media (max-width:640px){
  .avant-srow{grid-template-columns:minmax(0,1fr) auto;gap:.15rem .6rem}
  .avant-srow-meter{grid-column:1/-1;grid-row:2}
  .avant-total strong{font-size:.95rem}
}

/* Locatie bij melding (1.8.26) */
.r-loc-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 .25rem; }
.r-loc-status { font-size: .85rem; min-height: 1.1em; margin: .25rem 0; }
.r-loc-status.is-warn { color: #b45309; }
.r-map { height: 16rem; border-radius: .75rem; overflow: hidden; background: #e5e7eb; }
.r-loc-hint { font-size: .8rem; margin-top: .35rem; }
.rcard-loc { font-size: .85rem; margin: .4rem 0 0; }

/* Snelle invoer beheren */
.tpl-row{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border,#e5e7eb)}
.tpl-row:last-child{border-bottom:0}
.tpl-row.is-hidden{opacity:.6}
.tpl-main{min-width:0;flex:1}
.tpl-title{font-weight:600}
.tpl-desc{color:var(--muted-foreground);font-size:.875rem;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpl-meta{color:var(--muted-foreground);font-size:.75rem;margin-top:.15rem}
.tpl-actions{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.tpl-row{flex-direction:column}.tpl-actions{justify-content:flex-start}}

/* 1.8.29 — vaste knoppenbalk (vergroten + sluiten) en sleephoek in elk venster */
.modal-tools { position: sticky; top: -0.75rem; float: right; z-index: 5; display: flex; gap: 0.35rem; margin: -0.75rem -0.75rem 0.25rem 0.75rem; padding: 0.15rem; background: var(--background); border-radius: calc(var(--radius) - 4px); }
.modal-tools .modal-size, .modal-tools .modal-close { position: static; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); background: var(--background); color: var(--foreground); opacity: 0.8; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.modal-tools .modal-size:hover, .modal-tools .modal-close:hover { opacity: 1; background: var(--accent); }
.modal-head { padding-right: 0; }
.modal-grip { position: sticky; float: none; display: block; clear: both; bottom: -1.5rem; margin: 0.25rem -1.25rem -1.25rem auto; width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) { .modal-tools .modal-size { display: none; } }

/* 1.8.30 — Snelle invoer: leesbare kaarten */
.tpl-count { margin-left: auto; color: var(--muted-foreground); font-size: .85rem; }
.tpl-list { display: grid; gap: .6rem; }
.tpl-card { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: .9rem 1rem; background: var(--background); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); }
.tpl-card.is-pinned { border-left-color: var(--primary); }
.tpl-card.is-hidden { background: var(--muted); }
.tpl-card.is-hidden .tpl-title, .tpl-card.is-hidden .tpl-desc { color: var(--muted-foreground); }
.tpl-card .tpl-main { min-width: 0; flex: 1; }
.tpl-card .tpl-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--foreground); line-height: 1.35; }
.tpl-card .tpl-desc { margin: .3rem 0 0; color: var(--foreground); opacity: .82; font-size: .9rem; line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-card.is-open .tpl-desc { -webkit-line-clamp: unset; display: block; }
.tpl-card .tpl-desc-empty { font-style: italic; color: var(--muted-foreground); opacity: 1; }
.tpl-more { margin-top: .2rem; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.tpl-chip { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; background: var(--muted); color: var(--foreground); font-size: .75rem; font-weight: 500; }
.tpl-chip-pin { background: var(--secondary); color: var(--secondary-foreground); }
.tpl-chip-hidden { background: var(--border); }
.tpl-card .tpl-actions { display: flex; gap: .35rem; align-items: center; flex-shrink: 0; }
.tpl-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--background); color: var(--muted-foreground); cursor: pointer; }
.tpl-icon:hover { color: var(--foreground); background: var(--accent); }
.tpl-icon.is-on { color: var(--primary); border-color: var(--primary); background: var(--secondary); }
.tpl-empty { padding: 2rem 1rem; text-align: center; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius); }
@media (max-width: 640px) { .tpl-card { flex-direction: column; } .tpl-card .tpl-actions { width: 100%; } }

/* 1.8.30 — één vast knoppenbalkje en sleephoek binnen het venster */
.modal > .modal-tools { position: sticky; top: -1.5rem; float: right; margin: -1.5rem -1.5rem .25rem .75rem; padding: .6rem .6rem .25rem .25rem; background: var(--background); border-radius: 0 var(--radius) 0 calc(var(--radius) - 4px); }
.modal-tools .modal-size, .modal-tools .modal-close { opacity: 1; color: var(--foreground); }
.modal-head { padding-right: 0; }
.modal > .modal-grip { position: sticky; float: none; clear: both; display: block; bottom: -1.5rem; margin: .5rem -1.4rem -1.4rem auto; }

/* 1.8.31 — beheer van lange lijsten (berichten, back-ups) */
.list-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .6rem; }
.list-tools input[type=search] { max-width: 20rem; }
.list-tools select { max-width: 12rem; }
.list-count { margin-left: auto; font-size: .85rem; }
.col-check { width: 2rem; text-align: center; }
.pager { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: .6rem; }
.pager:empty { display: none; }
.purge-preview { margin-top: .75rem; padding: .6rem .75rem; border-radius: calc(var(--radius) - 4px); background: var(--muted); color: var(--foreground); font-weight: 500; }

/* v1.8.33 — dag: ingeplande taken eerst, vaste/extra rustiger */
.day-planned { display: grid; gap: 10px; margin: 6px 0 14px; }
.day-planned-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); display: flex; align-items: center; gap: 8px; margin: 0; }
.day-planned-empty { padding: 10px 0; }
.day-planned > .card { border-left: 6px solid var(--primary); }
.day-planned > .card strong { font-size: 1.15rem; }
.day-planned > .card .spacer { font-weight: 600; color: var(--foreground); }
.day-planned > .card:has(.badge-done) { opacity: .6; border-left-color: var(--border); }
.todo-card.todo-embedded { background: var(--muted, #f6f7f6); }
.todo-card.todo-embedded #todo-heading { font-size: .95rem; }
.todo-card.todo-embedded .todo-list li { padding-top: 6px; padding-bottom: 6px; font-size: .95rem; }
.todo-add-toggle { margin-left: auto; }
.todo-add[hidden] { display: none; }

/* v1.8.34 — Prioriteit: rode bewegende gloed rond de rand */
@property --prio-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.is-priority { position: relative; border-color: transparent !important; box-shadow: 0 0 0 2px #e11d48, 0 0 18px 2px rgba(225, 29, 72, .35); }
.is-priority::before { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 3px;
  background: conic-gradient(from var(--prio-angle), #e11d48, #fb7185, #f43f5e, #be123c, #fda4af, #e11d48);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: prio-spin 3s linear infinite; pointer-events: none; }
.is-priority::after { content: ''; position: absolute; inset: -8px; z-index: -2; border-radius: inherit; pointer-events: none; padding: 8px;
  background: conic-gradient(from var(--prio-angle), rgba(225,29,72,.55), rgba(251,113,133,.15), rgba(225,29,72,.55));
  filter: blur(10px); animation: prio-spin 3s linear infinite, prio-pulse 2s ease-in-out infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes prio-spin { to { --prio-angle: 360deg; } }
@keyframes prio-pulse { 50% { opacity: .45; } }
.is-priority.is-done, .is-priority:has(.badge-done) { box-shadow: 0 0 0 2px #e11d48; opacity: .7; }
.is-priority.is-done::before, .is-priority.is-done::after, .is-priority:has(.badge-done)::before, .is-priority:has(.badge-done)::after { display: none; }
@media (prefers-reduced-motion: reduce) { .is-priority::before, .is-priority::after { animation: none; } }
.prio-label { display: inline-block; background: #e11d48; color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.prio-flag { border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground, #888); border-radius: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; flex-shrink: 0; }
.prio-flag.is-on { background: #e11d48; border-color: #e11d48; color: #fff; }
.day-planned > .card.is-priority { border-left: 6px solid #e11d48 !important; }
/* 1.8.37 — Venster Niet afgehandeld */
.pending-item.od-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.65rem .75rem}
.od-item .overdue-check{margin:0}
.od-main{min-width:0}
.od-main strong{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.od-main .pending-people{flex-direction:row;flex-wrap:wrap;margin-top:.3rem}
.od-actions{display:grid;grid-template-columns:auto 5.6rem 5.6rem 2.4rem;gap:.35rem;align-items:center}
.od-actions .btn{justify-content:center}
.od-actions .pending-remind .btn{width:2.4rem;padding:0}
.od-slot{display:block;width:2.4rem}
.overdue-day{justify-content:space-between;background:#fff7ed;border:0;border-radius:.45rem;padding:.35rem .65rem}
.overdue-day em{color:#c2410c;font-weight:600}
@media (max-width:640px){
  .pending-item.od-item{grid-template-columns:auto minmax(0,1fr)}
  .od-actions{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr 2.6rem;width:100%}
}

/* 1.8.38: afwezigheid */
.abs-form-card { margin-bottom: 1.25rem; }
.abs-heading { font-size: 1rem; font-weight: 500; margin: .5rem 0 .75rem; }
.abs-item .card-body { display: grid; gap: .25rem; }
.abs-main { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.abs-actions { margin-top: .35rem; gap: .4rem; }
.abs-item.abs-rejected { opacity: .55; }

/* 1.8.42: afwezigheid in kalender en planning */
.abs-pills{display:flex;flex-wrap:wrap;gap:.2rem;margin:.15rem 0}
.abs-pill{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;line-height:1.3;padding:.05rem .4rem;border-radius:6px;background:var(--destructive);color:var(--destructive-foreground)}
.abs-pill.is-pending{background:transparent;color:var(--destructive);border:1px solid var(--destructive);opacity:.8}
.is-absent-self{background:color-mix(in oklch,var(--destructive) 22%,transparent)!important;box-shadow:inset 0 0 0 2px var(--destructive)}
.is-absent-self.is-absent-part{background:linear-gradient(180deg,color-mix(in oklch,var(--destructive) 22%,transparent) 0 50%,transparent 50%)!important}
.abs-self-tag{display:inline-block;font-size:.7rem;font-weight:600;color:var(--destructive);text-transform:uppercase;letter-spacing:.03em}
.check.is-absent{opacity:.5;cursor:not-allowed}
.abs-modal .modal{max-width:560px;max-height:90vh;overflow:auto}

/* 1.8.39: Avant-pagina vernieuwd */
.avx{max-width:1000px;margin:0 auto}
.avx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.avx-title{font-size:1.9rem;font-weight:500;margin:0 0 .35rem}
.avx-status{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .75rem;border-radius:999px;background:#e6f4ea;color:#1e6b3a;font-size:.85rem;font-weight:500}
.avx-status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.avx-status[data-state=run]{background:#e8f0fe;color:#1a56c4}.avx-status[data-state=run] i{animation:avxPulse 1.4s infinite}
.avx-status[data-state=due]{background:#fdecea;color:#a50e0e}
@keyframes avxPulse{50%{opacity:.25}}
.avx-menu{position:relative}
.avx-menu-pop{position:absolute;right:0;top:110%;background:#fff;border:1px solid #e3e6e8;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.35rem;z-index:20;min-width:190px}
.avx-menu-pop button{display:block;width:100%;text-align:left;background:none;border:0;padding:.6rem .75rem;border-radius:8px;cursor:pointer;font:inherit}
.avx-menu-pop button:hover{background:#f1f3f4}
.avx-hero{margin-bottom:1rem;overflow:hidden}
.avx-hero-body{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:linear-gradient(180deg,#f7faf8,#fff)}
.avx-machine svg{width:100%;height:auto;display:block}
.avx-shadow{fill:rgba(0,0,0,.08)}
.avx-body{fill:#3aa655}.avx-engine{fill:#2f8a4c}.avx-boom{fill:#2b7a43}
.avx-cab-frame{fill:none;stroke:#263238;stroke-width:8}.avx-cab-glass{fill:#d6ecf7;opacity:.8}
.avx-logo{fill:#fff;font:700 18px Roboto,sans-serif;letter-spacing:.06em}
.avx-tyre{fill:#263238}.avx-rim{fill:#b0bec5}
.avx-mower{transition:opacity .3s,filter .3s;opacity:.35}
.avx-mower-body{fill:#2f8a4c}.avx-mower-skid{fill:#455a64}.avx-mower-rotor{fill:#1e6b3a}
.avx-mower-blade{stroke:#c8e6c9;stroke-width:3;stroke-linecap:round}
.avx-arm{stroke:#455a64;stroke-width:7;stroke-linecap:round}
.avx-hero[data-mower=on] .avx-mower{opacity:1;filter:drop-shadow(0 0 10px rgba(58,166,85,.75))}
.avx-hero[data-mower=on][data-running="1"] .avx-mower-blade{transform-origin:78px 189px;transform-box:view-box;animation:avxSpin .6s linear infinite}
@keyframes avxSpin{to{transform:rotate(360deg)}}
.avx-label{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:#5f6368;margin:0}
.avx-hours{font-size:2.6rem;font-weight:400;margin:.2rem 0;font-variant-numeric:tabular-nums;line-height:1.1}
.avx-mower-note{margin:.5rem 0 0;font-size:.85rem;color:#2f8a4c;font-weight:500}
.avx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1rem}
.avx-att-wrap{display:contents}
.avx-card .card-body{display:flex;flex-direction:column;gap:.75rem;height:100%}
.avx-card-head{display:flex;justify-content:space-between;align-items:center}
.avx-card-head strong{font-size:1.05rem;font-weight:500}
.avx-card-main{display:flex;align-items:center;gap:1.25rem}
.avx-card .avant-ring{width:118px;height:118px;margin:0;flex-shrink:0}
.avx-card .avant-ring-inner{width:92px;height:92px}
.avx-card .avant-ring-inner strong{font-size:1.05rem;text-align:center}
.avx-facts{display:grid;grid-template-columns:auto 1fr;gap:.3rem .75rem;margin:0;font-size:.9rem}
.avx-facts dt{color:#5f6368}.avx-facts dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.avx-card-btn{align-self:flex-start;margin-top:auto}
.avx-control{margin-bottom:1rem}
.avx-control-body{display:flex;align-items:center;gap:1.25rem;padding:1rem 1.25rem;flex-wrap:wrap}
.avx-go{min-width:190px;height:52px;border-radius:999px;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;gap:.6rem}
.avx-go.is-running{background:#d93025;border-color:#d93025}
.avx-go-ico{font-size:.9rem}
.avx-control-mid{flex:1;min-width:150px}
.avx-timer{font-size:1.6rem;font-variant-numeric:tabular-nums;margin:0}
.avx-info{margin:.1rem 0 0;font-size:.85rem}
.avx-switch{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;user-select:none;font-size:.95rem}
.avx-switch[hidden]{display:none}
.avx-switch input{position:absolute;opacity:0;pointer-events:none}
.avx-switch-track{width:44px;height:26px;border-radius:999px;background:#c4c7c5;position:relative;transition:background .2s;flex-shrink:0}
.avx-switch-track span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.avx-switch input:checked+.avx-switch-track{background:#2f8a4c}
.avx-switch input:checked+.avx-switch-track span{transform:translateX(18px)}
.avx-switch input:focus-visible+.avx-switch-track{outline:2px solid #2f8a4c;outline-offset:2px}
@media (max-width:720px){
  .avx-hero-body{grid-template-columns:1fr;text-align:center;padding:1rem}
  .avx-hours{font-size:2.1rem}
  .avx-control{position:sticky;bottom:calc(.5rem + env(safe-area-inset-bottom));z-index:15;box-shadow:0 8px 24px rgba(0,0,0,.14)}
  .avx-control-body{gap:.6rem .9rem;padding:.75rem}
  .avx-go{min-width:0;flex:1 1 100%;order:3;height:48px}
  .avx-timer{font-size:1.3rem}
}

/* 1.8.39: snelle Avant-knop */
.avant-fab{position:fixed;right:calc(1rem + env(safe-area-inset-right));bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:flex-end;gap:.5rem;transition:transform .3s,opacity .3s}
.avant-fab.is-tucked{transform:translateY(calc(100% + 1.5rem));opacity:0}
.avant-fab.is-covered{opacity:0;pointer-events:none}
.avant-fab-btn{width:56px;height:56px;border-radius:50%;border:0;background:#2f8a4c;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(47,138,76,.4);position:relative;flex-shrink:0}
.avant-fab-btn svg{width:26px;height:26px}
.avant-fab-badge{display:none;position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;background:#34c759;border:2px solid #fff;animation:avxPulse 1.4s infinite}
.avant-fab.is-running .avant-fab-badge{display:block}
.avant-fab.is-running .avant-fab-btn::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent;border-top-color:#34c759;animation:avxSpin 1.6s linear infinite}
.avant-fab-pill{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid #e3e6e8;border-radius:999px;padding:.45rem .5rem .45rem .9rem;box-shadow:0 6px 20px rgba(0,0,0,.14);white-space:nowrap;font-size:.9rem;max-width:0;opacity:0;overflow:hidden;padding-left:0;padding-right:0;border-width:0;transition:max-width .35s,opacity .25s,padding .35s;margin-bottom:6px;cursor:pointer}
.avant-fab-pill[hidden]{display:none}
.avant-fab.is-expanded .avant-fab-pill{max-width:340px;opacity:1;padding:.45rem .5rem .45rem .9rem;border-width:1px}
.avant-fab-dot{width:8px;height:8px;border-radius:50%;background:#34c759;flex-shrink:0}
.avant-fab-time{font-variant-numeric:tabular-nums;font-weight:500}
.avant-fab-stop{border:0;background:#fdecea;color:#d93025;font:inherit;font-weight:500;padding:.35rem .8rem;border-radius:999px;cursor:pointer}
.avant-fab-stop[hidden]{display:none}
.avant-fab-pop{position:absolute;right:0;bottom:68px;background:#fff;border:1px solid #e3e6e8;border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.16);padding:.85rem;display:flex;flex-direction:column;gap:.75rem;min-width:220px}
.avant-fab-pop[hidden]{display:none}
.avant-fab-start{border-radius:999px;height:44px}
@media (prefers-reduced-motion:reduce){
  .avant-fab,.avant-fab-pill,.avx-mower{transition:none}
  .avant-fab-badge,.avx-status i,.avant-fab.is-running .avant-fab-btn::after,.avx-hero .avx-mower-blade{animation:none!important}
}

.avx-photo{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;mix-blend-mode:multiply;filter:drop-shadow(0 10px 12px rgba(0,0,0,.18))}
[data-running="1"] .avx-photo{filter:drop-shadow(0 0 14px rgba(34,197,94,.55))}

/* Avant deeltjesregen */
.avx-photo{cursor:pointer}
.avx-bounce{animation:avxBounce .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes avxBounce{0%{transform:scale(1)}30%{transform:scale(1.12) rotate(-3deg)}60%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}}
.avx-burst{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.avx-burst span{position:absolute;transform:translate(-50%,-50%);animation:avxFly 1.9s cubic-bezier(.15,.7,.4,1) forwards;opacity:0}
@keyframes avxFly{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 260px)) rotate(var(--r)) scale(1)}}

/* ===== 1.8.46 Kalender: werkbalk, medewerkersknopjes en vier weergavestijlen ===== */
.cal-toolbar { gap: .5rem; align-items: center; }
.cal-toolbar .cal-tabs { margin: 0 .5rem 0 0; }
.cal-toolbar .cal-title { font-size: 1.05rem; font-weight: 600; text-transform: capitalize; }
.cal-toolbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }
.cal-toolbar-right .cal-wide-btn { margin-left: 0; }
.cal-filter-toggle { display: inline-flex !important; gap: .35rem; align-items: center; min-height: 0 !important; }
.cal-filter-toggle .icon { width: 15px; height: 15px; }
.cal-filter-panel { display: none !important; }
.cal-filter-panel.is-open { display: block !important; margin: 0 0 .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.cal-filter-section { margin-bottom: 0; }
.cal-legend { display: none !important; }
.cal-style-wrap { position: relative; }
.cal-style-pop { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; width: min(26rem, 90vw); padding: .75rem; box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.cal-style-head { font-weight: 600; margin: 0 0 .5rem; }
.cal-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cal-style-grid button { display: grid; gap: .15rem; text-align: left; padding: .5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--background); cursor: pointer; font: inherit; color: inherit; }
.cal-style-grid button:hover { border-color: var(--primary); }
.cal-style-grid button.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 30%, transparent); }
.cal-style-grid small { color: var(--muted-foreground); font-size: .72rem; }
.cs-prev { display: grid; height: 54px; border-radius: 8px; background: var(--muted); padding: 5px; gap: 3px; margin-bottom: .25rem; }
.cs-prev i, .cs-prev b { display: block; border-radius: 4px; background: var(--background); }
.cs-quiet { grid-template-columns: repeat(3, 1fr); }
.cs-quiet i { position: relative; background:
  linear-gradient(var(--primary), var(--primary)) 4px 15px / calc(100% - 8px) 6px no-repeat,
  linear-gradient(var(--muted-foreground), var(--muted-foreground)) 4px 24px / calc(70% - 4px) 6px no-repeat,
  linear-gradient(var(--border), var(--border)) 4px 4px / 8px 6px no-repeat,
  var(--background); }
.cs-quiet i:nth-child(2) { background:
  linear-gradient(var(--muted-foreground), var(--muted-foreground)) 4px 15px / calc(85% - 4px) 6px no-repeat,
  linear-gradient(var(--border), var(--border)) 4px 4px / 8px 6px no-repeat, var(--background); }
.cs-quiet i:nth-child(3) { background:
  linear-gradient(var(--primary), var(--primary)) 4px 15px / calc(60% - 4px) 6px no-repeat,
  linear-gradient(var(--primary), var(--primary)) 4px 24px / calc(100% - 8px) 6px no-repeat,
  linear-gradient(var(--muted-foreground), var(--muted-foreground)) 4px 33px / calc(50% - 4px) 6px no-repeat,
  linear-gradient(var(--border), var(--border)) 4px 4px / 8px 6px no-repeat, var(--background); }
.cs-quiet i:nth-child(n+4) { display: none; }
.cs-panel { grid-template-columns: 2fr 1fr; }
.cs-panel i { background: radial-gradient(circle at 30% 40%, var(--primary) 2px, transparent 3px), radial-gradient(circle at 70% 70%, var(--primary) 2px, transparent 3px), var(--background); }
.cs-panel b { box-shadow: inset 0 0 0 1px var(--primary); }
.cs-timeline { grid-template-columns: repeat(3, 1fr); }
.cs-timeline i { background: linear-gradient(var(--background) 30%, color-mix(in oklab, var(--primary) 35%, var(--background)) 30% 65%, var(--background) 65%); }
.cs-agenda { grid-template-rows: 12px 1fr 1fr; }
.cs-agenda i { background: var(--primary); }
.cs-agenda b { box-shadow: inset 3px 0 0 var(--primary); }

.cal-people { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem 0 .6rem; scrollbar-width: none; margin-bottom: .25rem; }
.cal-people::-webkit-scrollbar { display: none; }
.cal-person { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .2rem .7rem .2rem .2rem; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; font: inherit; font-size: .85rem; color: var(--foreground); }
.cal-person:hover { background: var(--muted); }
.cal-person.is-active { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, var(--background)); }
.cal-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 600; }
.cal-av-all { background: var(--primary); }

/* Gemeenschappelijk: rustiger maandraster */
#calendar .month-grid { border-radius: 14px; }
#calendar .month-cell { min-height: 7rem; padding: .45rem; }
#calendar .month-cell.is-weekend:not(.is-other) { background: color-mix(in oklab, var(--primary) 4%, var(--background)); }
#calendar .month-cell .day-num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; font-size: .85rem; font-weight: 600; color: var(--foreground); }
#calendar .month-cell.is-other .day-num { color: var(--muted-foreground); font-weight: 400; }
#calendar .month-cell.is-today .day-num { border-radius: 999px; padding: 0 .4rem; background: var(--primary); color: var(--primary-foreground); }
#calendar .qchip { display: flex; align-items: center; gap: .35rem; background: var(--muted); color: var(--foreground); padding: .2rem .45rem; border-radius: 6px; }
#calendar .qchip .qdot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--secondary-foreground); }
#calendar .qchip.chip-in_progress .qdot { background: var(--amber-fg); }
#calendar .qchip.pc { background: var(--muted); box-shadow: none !important; }
#calendar .qchip.pc .qdot { background: var(--pc); }
#calendar .qchip .qtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#calendar .qchip .qtime { flex: 0 0 auto; color: var(--muted-foreground); font-size: .68rem; }
#calendar .chip-done, #calendar .chip.pc.chip-done, #calendar .day-task.chip-done { background: transparent !important; color: var(--muted-foreground) !important; text-decoration: none !important; opacity: .75; box-shadow: none !important; }
#calendar .qchip.chip-done .qdot { background: var(--muted-foreground) !important; }
#calendar .more-link { font-weight: 600; }
/* Afwezigheid: dunne rode streep i.p.v. volledig rode cel */
#calendar .month-cell.is-absent-self, #calendar .month-cell.is-absent-self.is-absent-part { background: var(--background) !important; box-shadow: inset 0 3px 0 var(--destructive) !important; }
#calendar .abs-pill { background: color-mix(in oklch, var(--destructive) 12%, var(--background)); color: var(--destructive); }
#calendar .abs-pill.is-pending { background: transparent; }
#calendar .day-col.is-absent-self { background: color-mix(in oklch, var(--destructive) 6%, transparent) !important; box-shadow: inset 0 3px 0 var(--destructive) !important; }
/* Daglijst */
.day-agenda .day-agenda-head .small { margin: 0; }
.agenda-rec { margin-top: .6rem; border: 1px solid var(--border); border-radius: 12px; padding: .5rem .75rem; background: var(--muted); }
.agenda-rec summary { cursor: pointer; font-weight: 500; }
.agenda-rec .agenda-list { margin-top: .5rem; }

/* Stijl 2: met dagpaneel */
[data-cal-style="panel"] .dots { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: .35rem; }
[data-cal-style="panel"] .dot { width: 8px; height: 8px; }
[data-cal-style="panel"] .month-cell { min-height: 5.5rem; }
.cal-split { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(16rem, 1fr); gap: 1rem; align-items: start; }
.cal-side { position: sticky; top: 5rem; border: 1px solid var(--border); border-radius: 14px; padding: 1rem; background: var(--background); }
.cal-side .day-agenda { margin-top: 0; }
@media (max-width: 899px) { .cal-split { grid-template-columns: minmax(0, 1fr); } .cal-side { position: static; } }

/* Stijl 3: tijdlijn (en week algemeen) */
.allday-label { font-size: .65rem; color: var(--muted-foreground); padding: .3rem .25rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); text-align: right; }
.allday-cell { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: .2rem; min-height: 1.6rem; }
.allday-cell .chip { margin-top: 0; }
.day-header.is-today { color: var(--primary); font-weight: 700; }
.day-col.is-today { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.day-col.is-weekend { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--destructive); z-index: 3; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--destructive); }
[data-cal-style="timeline"] .day-task { border-radius: 8px; padding: .3rem .45rem; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
[data-cal-style="timeline"] .hour-line { height: 48px; }

/* Stijl 4: agenda */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1rem; touch-action: pan-y; }
.ws-day { display: grid; justify-items: center; gap: .15rem; padding: .5rem 0; border: 1px solid var(--border); border-radius: 14px; background: var(--background); cursor: pointer; font: inherit; color: var(--foreground); }
.ws-day.is-today .ws-num { color: var(--primary); }
.ws-day.is-selected { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.ws-day.is-selected .ws-num { color: var(--primary-foreground); }
.ws-wd { font-size: .72rem; text-transform: capitalize; opacity: .8; }
.ws-num { font-size: 1.15rem; font-weight: 700; }
.ws-dots { display: flex; gap: 3px; min-height: 6px; }
.ws-dots .dot { width: 6px; height: 6px; display: block; }
.ws-day.is-selected .ws-dots .dot { background: var(--primary-foreground) !important; }
.agenda-day.section { padding: 0; border: 0; background: transparent; }
[data-cal-style="agenda"] .agenda-item { padding: .85rem 1rem; border-radius: 14px; }
[data-cal-style="agenda"] .agenda-title { font-size: 1rem; font-weight: 600; }
.cal-fab { position: fixed; right: 1.25rem; bottom: 6rem; z-index: 30; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--primary); color: var(--primary-foreground); font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
@media (max-width: 639px) {
  .cal-toolbar .cal-tabs { width: 100%; margin: 0 0 .25rem; }
  .cal-toolbar-right { margin-left: 0; width: 100%; }
  .cal-style-wrap { position: static; }
  .cal-toolbar-right { position: relative; }
  .cal-style-pop { left: 0; right: 0; width: auto; max-width: calc(100vw - 1.5rem); }
  .cal-style-grid small { font-size: .7rem; }
  .ws-num { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .now-line::before { animation: none; } }

/* 1.8.47: planning – verlof als rustig amber accent i.p.v. rood vlak; rustigere 'Te bevestigen' */
.day-section.is-absent-self,.day-section.is-absent-self.is-absent-part{background:transparent!important;box-shadow:none!important;position:relative}
.day-section.is-absent-self::before{content:"";position:absolute;left:-.75rem;top:.35rem;bottom:.35rem;width:3px;border-radius:3px;background:linear-gradient(180deg,#f59e0b,color-mix(in oklch,#f59e0b 25%,transparent))}
.day-section .abs-self-tag{display:inline-flex;align-items:center;gap:.35rem;margin-left:.6rem;padding:.2rem .65rem;border-radius:999px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:none;vertical-align:middle}
.day-section .abs-self-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#f59e0b;animation:wp-absdot 3.2s ease-in-out infinite}
@keyframes wp-absdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.day-section > .abs-pills{gap:.35rem;margin:.1rem 0 .6rem}
.day-section .abs-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:500;background:color-mix(in oklch,#f59e0b 10%,var(--background));color:#92400e;border:1px solid color-mix(in oklch,#f59e0b 30%,transparent)}
.day-section .abs-pill::before{content:"";width:.8rem;height:.8rem;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M10 14l4 4M14 14l-4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M10 14l4 4M14 14l-4 4'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.85}
.day-section .abs-pill.is-pending{background:transparent;border-style:dashed;color:var(--muted-foreground)}
@keyframes wp-unconf2{0%,100%{border-left-color:#f59e0b;box-shadow:0 1px 2px rgba(0,0,0,.04)}50%{border-left-color:#fbbf24;box-shadow:0 0 0 3px rgba(245,158,11,.10)}}
.is-unconfirmed{border-left:3px solid #f59e0b!important;background:linear-gradient(90deg,rgba(245,158,11,.07),transparent 55%)!important;animation:wp-unconf2 3.6s ease-in-out infinite}
.badge-unconfirmed{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;font-weight:600}
@media (prefers-reduced-motion:reduce){.is-unconfirmed,.day-section .abs-self-tag::before{animation:none}}

/* v1.8.49 — Vaste/extra taken: leesbare titels + instelbare gsm-weergave */
.todo-title { overflow-wrap: anywhere; }
.todo-avatar, .todo-group { display: none; }
.tms-pick { border: 0; padding: 0; display: grid; gap: .5rem; }
.tms-pick legend { margin-bottom: .4rem; }
.tms-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .6rem; cursor: pointer; }
.tms-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 7%, transparent); }
.tms-opt span { display: grid; } .tms-opt small { font-size: .82rem; }
@media (max-width: 640px) {
  .todo-card .todo-item { min-height: 52px; }
  .todo-card .todo-check input[type="checkbox"] { width: 26px; height: 26px; }
  .todo-card .prio-flag, .todo-card [data-todo-del], .todo-card [data-todo-x] { min-width: 44px; min-height: 44px; }
  /* 1. Twee rijen: titel volle breedte, knoppen op tweede rij */
  [data-mobile-style="tworow"] .todo-item:not(.is-pending):not(.report-item) { flex-wrap: wrap; row-gap: 2px; }
  [data-mobile-style="tworow"] .todo-item:not(.is-pending) .todo-check { flex: 1 1 calc(100% - 40px); }
  [data-mobile-style="tworow"] .todo-item .todo-grip { order: -2; }
  [data-mobile-style="tworow"] .todo-item .prio-badge { order: 5; margin-left: 46px; }
  [data-mobile-style="tworow"] .todo-item .prio-flag { order: 6; margin-left: auto; }
  [data-mobile-style="tworow"] .todo-item > :last-child:not(.todo-check) { order: 7; }
  /* 2. Grote kaarten: geen kleine knopjes, vegen voor klaar/wissen */
  [data-mobile-style="cards"] .todo-list { display: grid; gap: 8px; }
  [data-mobile-style="cards"] .todo-item:not(.is-pending) { border: 1px solid var(--border); border-radius: .75rem; padding: 14px; border-bottom: 1px solid var(--border); background: var(--card); }
  [data-mobile-style="cards"] .todo-item .todo-grip,
  [data-mobile-style="cards"] .todo-item .prio-flag,
  [data-mobile-style="cards"] .todo-item:not(.is-done) [data-todo-x] { display: none; }
  [data-mobile-style="cards"] .todo-item .todo-check input[type="checkbox"] { width: 30px; height: 30px; border-radius: 999px; }
  [data-mobile-style="cards"] .todo-item .todo-title { font-size: 1.02rem; font-weight: 600; }
  [data-mobile-style="cards"] .todo-list[data-open-list]::after { content: "Veeg naar rechts = klaar · naar links = wissen"; font-size: .78rem; color: var(--muted-foreground, #6b7280); text-align: center; padding-top: 2px; }
  /* 3. Gegroepeerd: kopjes per prioriteit, initialen rechts */
  [data-mobile-style="grouped"] .todo-group { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-top: 6px; border-radius: .5rem; font-weight: 700; font-size: .85rem; list-style: none; }
  [data-mobile-style="grouped"] .todo-group span { font-size: .75rem; padding: 0 8px; border-radius: 999px; background: var(--background); }
  [data-mobile-style="grouped"] .todo-group.is-urgent { color: #b91c1c; background: #fef2f2; }
  [data-mobile-style="grouped"] .todo-group.is-first { color: #15803d; background: #f0fdf4; }
  [data-mobile-style="grouped"] .todo-group.is-later { color: #475569; background: #f1f5f9; }
  [data-mobile-style="grouped"] .todo-item .prio-badge,
  [data-mobile-style="grouped"] .todo-item .todo-grip { display: none; }
  [data-mobile-style="grouped"] .todo-item .todo-avatar:not(:empty) { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--primary-foreground, #fff); background: var(--primary); }
}

/* 1.8.50: meldingen op gsm bovenaan, niet over de Avant-knop; geen groen bolletje meer */
.avant-fab.is-running .avant-fab-badge{display:none}
/* 1.8.52: meldingen altijd onderaan, boven de Avant-knop als die zichtbaar is */
.toasts{bottom:calc(1rem + env(safe-area-inset-bottom));right:calc(1rem + env(safe-area-inset-right));justify-items:end;transition:bottom .3s ease}
body:has(.avant-fab:not([hidden]):not(.is-covered):not(.is-tucked)) .toasts{bottom:calc(5.25rem + env(safe-area-inset-bottom))}
@media (max-width: 639px) {
  .toasts{left:auto;max-width:calc(100vw - 2rem)}
}

/* 1.8.51: zoekvenster (Ctrl+K) */
.search-btn{position:relative;gap:.4rem}
.search-kbd{display:none;font:500 .7rem/1 inherit;color:var(--muted-foreground);border:1px solid var(--border);border-radius:6px;padding:.2rem .35rem}
@media (min-width:900px){.search-btn{width:auto;padding:0 .6rem}.search-kbd{display:inline-block}}
html.search-open{overflow:hidden}
.search-backdrop{position:fixed;inset:0;z-index:90;background:rgb(15 23 20 / .38);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:10vh 1rem 1rem;opacity:0;transition:opacity .15s}
.search-backdrop.is-open{opacity:1}
.search-backdrop[hidden]{display:none}
.search-dialog{width:100%;max-width:640px;max-height:76vh;display:flex;flex-direction:column;background:var(--background);color:var(--foreground);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px -12px rgb(0 0 0 / .35);overflow:hidden;transform:translateY(-6px) scale(.98);transition:transform .18s}
.search-backdrop.is-open .search-dialog{transform:none}
.search-top{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.search-ico{width:20px;height:20px;color:var(--muted-foreground);flex-shrink:0}
.search-input{flex:1;min-width:0;border:0!important;outline:0;background:transparent;font-size:1.05rem;padding:.2rem 0;box-shadow:none!important}
.search-close{border:0;background:var(--muted);color:var(--muted-foreground);width:30px;height:30px;border-radius:50%;font-size:1.2rem;line-height:1;cursor:pointer}
.search-chips{display:flex;gap:.4rem;padding:.6rem 1rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border)}
.search-chip{flex-shrink:0;border:1px solid var(--border);background:var(--background);color:var(--foreground);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.82rem;cursor:pointer;white-space:nowrap}
.search-chip.is-on{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
select.search-chip{padding-right:1.6rem;max-width:11rem}
.search-body{overflow-y:auto;padding:.4rem .5rem .6rem;flex:1;transition:opacity .15s}
.search-body.is-loading{opacity:.55}
.search-group-head{display:flex;justify-content:space-between;align-items:center;padding:.65rem .6rem .3rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground)}
.search-item{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;padding:.6rem .7rem;border-radius:10px;cursor:pointer;min-height:44px}
.search-item.is-active,.search-item:hover{background:var(--secondary)}
.search-item-title{font-weight:500;overflow-wrap:anywhere}
.search-item-sub{grid-column:1/-1;font-size:.8rem;color:var(--muted-foreground);overflow-wrap:anywhere}
.search-item mark{background:color-mix(in oklab,#facc15 45%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.search-badge{align-self:start;font-size:.7rem;padding:.15rem .5rem;border-radius:999px;background:var(--muted);color:var(--muted-foreground);white-space:nowrap}
.search-badge.is-warn{background:#fff7ed;color:#c2410c}
.search-badge.is-done{background:#ecfdf3;color:#15803d}
.search-badge.is-live{background:#dcfce7;color:#166534}
.search-more{display:block;margin:.2rem .7rem .4rem;border:0;background:none;color:var(--primary);font:inherit;font-size:.85rem;font-weight:500;cursor:pointer}
.search-empty{padding:1.5rem 1rem;text-align:center;color:var(--muted-foreground)}
.search-foot{display:flex;gap:1rem;padding:.5rem 1rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--muted-foreground)}
.search-foot kbd{border:1px solid var(--border);border-radius:5px;padding:0 .3rem;margin-right:.2rem;font:inherit}
@media (max-width:639px){
  .search-backdrop{padding:0}
  .search-dialog{max-width:none;max-height:none;height:100%;border-radius:0;border:0}
  .search-top{padding-top:calc(.85rem + env(safe-area-inset-top))}
  .search-input{font-size:16px}
  .search-foot{display:none}
}
@media (prefers-reduced-motion:reduce){.search-backdrop,.search-dialog,.search-body{transition:none}}
.search-top,.search-chips,.search-foot{flex-shrink:0}
.search-chips{overflow-y:hidden}
.search-body{min-height:0}

/* 1.8.54 compactere takenlijst + duidelijke veegacties */
.todo-item{padding:7px 10px}
.todo-check{gap:9px}
.todo-check input[type="checkbox"]{width:19px;height:19px}
.todo-title{font-size:.93rem;line-height:1.3}
@media (max-width:768px){
  .todo-card .todo-item{min-height:42px}
  .todo-card .todo-check input[type="checkbox"]{width:21px;height:21px}
  [data-mobile-style="cards"] .todo-item:not(.is-pending){padding:9px 11px}
  [data-mobile-style="cards"] .todo-item .todo-check input[type="checkbox"]{width:22px;height:22px}
  [data-mobile-style="cards"] .todo-item .todo-title{font-size:.94rem}
}
.todo-item.is-swiping,.swipe-task.is-swiping{position:relative;overflow:visible}
.todo-item.swipe-done::before,.swipe-task.swipe-done::before,
.todo-item.swipe-delete::before,.swipe-task.swipe-delete::before{
  position:absolute;top:0;bottom:0;width:var(--sw,0);display:flex;align-items:center;justify-content:center;
  overflow:hidden;white-space:nowrap;font-size:.8rem;font-weight:700;color:#fff;border-radius:.5rem;
  opacity:.75;transition:opacity .15s,font-size .15s;pointer-events:none}
.todo-item.swipe-done::before,.swipe-task.swipe-done::before{content:"✓ Voltooien";left:calc(var(--sw,0) * -1);background:#16a34a}
.todo-item.swipe-delete::before,.swipe-task.swipe-delete::before{content:"🗑 Verwijderen";right:calc(var(--sw,0) * -1);background:#dc2626}
.swipe-ready::before{opacity:1!important;font-size:.88rem!important}

/* 1.8.55 rustigere titels + ingedrukt houden voor prioriteit */
.todo-title,.rec-row-title,.swipe-task .card-body .row>strong{font-weight:450}
@media (max-width:768px){[data-mobile-style="cards"] .todo-item .todo-title{font-weight:450}}
.todo-item.is-done .todo-title{font-weight:400}
[data-swipe-task],li.todo-item{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.is-holding{position:relative}
.is-holding::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:#e11d48;border-radius:2px;animation:wp-hold var(--hold,5s) linear forwards;pointer-events:none}
@keyframes wp-hold{to{width:100%}}
/* 1.8.56: achterstallig compact, in stijl van de takenkaarten */
.overdue-group summary{flex-wrap:wrap;gap:.15rem .5rem;padding:.6rem .8rem}
.overdue-group .rec-group-title{font-size:.95rem;font-weight:500}
.overdue-group .rec-group-meta{font-size:.75rem;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overdue-group .rec-rows{padding:0;margin:0}
.overdue-row{align-items:center;gap:.6rem;padding:.55rem .8rem;border-top:1px solid #eef0f2}
.overdue-row .overdue-check{margin:0;width:1.15rem;height:1.15rem}
.overdue-row .rec-row-link{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;flex:1 1 auto;min-width:0}
.overdue-row .rec-row-title{font-size:.92rem;font-weight:450;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overdue-row .rec-row-sub{font-size:.75rem;line-height:1.35;width:100%;white-space:normal;text-align:left}
.overdue-row .overdue-late{font-weight:600}
.overdue-row.is-new .rec-row-title{font-weight:600}

/* Planning: compacte kop + statusstrook (1.8.59) */
.status-strip{display:flex;gap:.5rem;overflow-x:auto;margin:-.75rem 0 1rem;padding-bottom:2px;scrollbar-width:none}
.status-strip::-webkit-scrollbar{display:none}
.status-strip .btn{flex-shrink:0;white-space:nowrap}
@media (max-width:640px){
  .page-head{flex-wrap:nowrap}
  .page-head h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .page-actions{flex-wrap:nowrap;flex-shrink:0}
}

/* 1.8.60 – Probleem of idee melden */
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; }
.btn-link:disabled { opacity: .5; cursor: default; }
.fb-modal { --modal-width: 30rem; }
.fb-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.fb-kind-btn { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .85rem .5rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--background); font: inherit; font-weight: 500; cursor: pointer; color: var(--foreground); }
.fb-kind-btn .fb-kind-ico { font-size: 1.6rem; line-height: 1; }
.fb-kind-btn.is-active { border-color: var(--primary); background: var(--secondary); }
.fb-modal textarea { width: 100%; }
.fb-attach { display: grid; gap: .6rem; margin-top: .75rem; }
.fb-att { display: flex; gap: .75rem; align-items: center; padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius); }
.fb-att-body { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; min-width: 0; }
.fb-att-note { font-size: .8rem; }
.fb-thumb { flex: 0 0 6.5rem; height: 4.5rem; border-radius: calc(var(--radius) / 2); background: var(--muted); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: .7rem; text-align: center; }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fb-thumb.is-off { opacity: .35; }
.fb-tech { font-size: .85rem; }
.fb-tech summary { cursor: pointer; color: var(--muted-foreground); }
.fb-tech-list { margin: .5rem 0 .5rem 1.1rem; color: var(--muted-foreground); display: grid; gap: .2rem; }
.fb-editor { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / .85); display: flex; flex-direction: column; }
.fb-editor-bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; padding: .6rem; background: var(--background); }
.fb-tools { display: flex; gap: .25rem; }
.fb-tool { display: flex; flex-direction: column; align-items: center; font: inherit; font-size: 1.1rem; border: 1px solid var(--border); background: var(--background); border-radius: calc(var(--radius) / 2); padding: .3rem .6rem; cursor: pointer; color: var(--foreground); }
.fb-tool span { font-size: .65rem; }
.fb-tool.is-active { border-color: var(--primary); background: var(--secondary); }
.fb-editor-actions { display: flex; gap: .4rem; }
.fb-editor-stage { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: .75rem; }
.fb-editor-stage canvas { max-width: 100%; max-height: 100%; touch-action: none; cursor: crosshair; border-radius: 4px; }
.fb-rec { position: fixed; z-index: 90; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem .5rem .9rem; border-radius: 999px; background: var(--foreground); color: var(--background); box-shadow: var(--shadow-google); font-size: .875rem; }
.fb-rec-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--destructive); animation: fbpulse 1s infinite; }
@keyframes fbpulse { 50% { opacity: .3; } }
/* Beheer */
.fb-admin { display: grid; gap: 1rem; }
.fb-row { display: flex; align-items: center; gap: .75rem; text-align: left; width: 100%; padding: .8rem 1rem; border: 1px solid var(--border); font: inherit; cursor: pointer; color: var(--foreground); }
.fb-row:hover { background: var(--accent); }
.fb-kind { flex: 0 0 auto; font-size: .75rem; font-weight: 500; }
.fb-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fb-row-msg { overflow: hidden; text-overflow: ellipsis; }
.fb-row-meta { font-size: .75rem; color: var(--muted-foreground); }
.fb-st-new { background: var(--amber-bg); color: var(--amber-fg); }
.fb-st-busy { background: var(--secondary); color: var(--secondary-foreground); }
.fb-st-solved { background: var(--primary); color: var(--primary-foreground); }
.fb-st-rejected { background: var(--muted); color: var(--muted-foreground); }
.fb-msg { white-space: pre-wrap; margin-bottom: .5rem; }
.fb-shot, .fb-video { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); margin-top: .75rem; }
.fb-more { margin-top: .75rem; font-size: .85rem; }
.fb-more summary { cursor: pointer; font-weight: 500; }
.fb-steps { margin: .5rem 0 0 1.2rem; display: grid; gap: .15rem; }
.fb-step-t { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.fb-step-fout b, .fb-step-foutmelding b, .fb-step-server b { color: var(--destructive); }
.fb-ctx th { text-align: left; padding-right: 1rem; color: var(--muted-foreground); font-weight: 400; vertical-align: top; }
.fb-ctx td { word-break: break-all; }
.fb-status-pick { display: flex; flex-wrap: wrap; gap: .4rem; }

/* v1.8.61 — één lijst vaste & extra taken, doorklik-pijltje, compacter op gsm */
.rec-merged{list-style:none;margin:.5rem 0;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--background);overflow:hidden}
.rec-merged .rec-row-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rec-sym{color:var(--primary);font-size:.8em;opacity:.8}
.rec-row-link{position:relative;padding-right:2rem!important;min-height:44px;align-content:center}
.rec-row-link:active,.card-link:active{background:var(--muted)}
.row-chev{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);font-size:1.5rem;line-height:1;color:var(--muted-foreground);pointer-events:none}
.card-link .card-body{position:relative;padding-right:2.2rem}
.rec-check{min-width:22px;min-height:22px;margin-left:.6rem}
.rec-row-edit{font-size:.8rem;padding:.45rem .5rem}
@media (max-width:640px){
  .section.is-today{margin-left:-.5rem;margin-right:-.5rem;padding-left:.5rem!important;padding-right:.5rem!important}
  .card-link .card-body{padding:.6rem 2rem .6rem .75rem}
  .swipe-task .card-body .row{flex-wrap:wrap;gap:.3rem .4rem}
  .swipe-task .card-body .row>strong{flex:1 0 100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .swipe-task .card-body .row .spacer{margin-left:auto}
  .todo-card.todo-embedded .card-body{padding:.6rem}
  .rec-row-link{padding:.4rem 2rem .4rem .6rem!important}
}

/* 1.8.63: subtiel volgordenummer + vloeiend verslepen op gsm */
.todo-item { position: relative; }
.todo-num { position: absolute; top: 4px; right: 8px; font-size: 11px; line-height: 1; font-weight: 600; color: var(--muted-fg, #9ca3af); opacity: .75; pointer-events: none; font-variant-numeric: tabular-nums; }
.todo-item.is-lifted { background: var(--card, #fff); box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: box-shadow .15s ease; }
.todo-item.is-touch-drag { z-index: 5; box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: none; -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) { .todo-list[data-open-list] .todo-grip { display: none; } .todo-list[data-open-list] .todo-item { -webkit-touch-callout: none; } }

/* 1.8.65: rustige preloader bij terugkeren, inhoud verschijnt pas op de juiste plek */
html.wp-restoring .main{opacity:0}
.main{transition:opacity .22s ease}
html.wp-restoring::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;background:linear-gradient(90deg,transparent,var(--primary),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:wp-restore-bar 1s ease-in-out infinite}
@keyframes wp-restore-bar{0%{background-position:-40% 0}100%{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.main{transition:none}html.wp-restoring::before{animation:none;background:var(--primary);opacity:.4}}

/* Strobbo-tikklok (v1.8.71) — timer in bovenbalk + venster */
.tik-btn { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.tik-btn .icon { width: 1rem; height: 1rem; }
.tik-btn.is-running { background: var(--primary, #2f8a4c); color: var(--primary-foreground, #fff); border-color: transparent; }
.tik-btn.is-done { background: var(--muted, #eee); color: var(--muted-foreground, #666); border-color: transparent; }
.tik-btn.is-todo { background: #fff4e5; color: #b45309; border: 1px solid #f59e0b; }
.tik-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: .75rem; }
.tik-dialog { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; padding: .75rem; gap: .6rem; }
.tik-head { display: flex; align-items: center; justify-content: space-between; }
.tik-frame { width: 100%; height: min(70vh, 600px); border: 1px solid var(--border); border-radius: .5rem; background: #f5f5f5; }
.tik-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }

/* Rondleiding */
.tour-veil{position:fixed;inset:0;background:rgba(15,23,20,.55);z-index:9998}
.tour-hole{position:fixed;z-index:9998;border-radius:12px;box-shadow:0 0 0 9999px rgba(15,23,20,.55);pointer-events:none;transition:all .2s ease;outline:2px solid #fff}
.tour-box.card{position:fixed;z-index:9999;padding:1rem 1.1rem;max-width:calc(100vw - 24px);box-shadow:0 12px 32px rgba(0,0,0,.25)}
.tour-box.card.is-center{bottom:auto!important;right:auto!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 24px))}
.tour-title{margin:.15rem 0 .35rem;font-size:1.05rem}
.tour-body{margin:0 0 .9rem;line-height:1.45}
.tour-actions{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.tour-nav{display:flex;gap:.4rem}

/* 1.8.76 — compacte statusknoppen */
.status-strip{display:flex;gap:.5rem;overflow:visible;margin:-.75rem 0 1rem;padding-top:6px}
.status-strip .pending-btn,.status-strip .overdue-btn{height:34px;padding:0 .7rem;font-size:.85rem;gap:.35rem;color:var(--muted-foreground);border-color:var(--border)}
.status-strip .btn svg{width:16px;height:16px}
.pending-count,.overdue-count{position:absolute;top:-7px;right:-7px;margin:0;min-width:1.15rem;height:1.15rem;font-size:.68rem;padding:0 .3rem;box-shadow:0 0 0 2px var(--background)}
.pending-count[hidden],.overdue-count[hidden]{display:none!important}
.status-strip .pending-btn.has-pending{border-color:#dc2626;color:#dc2626;background:#fef2f2}
.status-strip .overdue-btn.has-overdue{border-color:#ea580c;color:#c2410c;background:#fff7ed}
.pb-short{display:none}
@media (max-width:640px){
  .status-strip{display:grid;grid-template-columns:1fr 1fr}
  .status-strip .btn{justify-content:center;width:100%}
  .pb-long{display:none}.pb-short{display:inline}
}
/* 1.8.76 — rondleiding mobiel */
.tour-box.card{transform:none}
.tour-box.card.is-center{transform:translate(-50%,-50%)}
@media (max-width:640px){
  .tour-box.card:not(.is-center){left:12px!important;right:12px!important;top:auto!important;width:auto!important;bottom:calc(12px + env(safe-area-inset-bottom))}
}
body.tour-lock{overflow:hidden;touch-action:none}

/* Terugkerende taken – strakke lijst (v1.8.95) */
.rec-info { margin: -.25rem 0 1rem; font-size: .875rem; }
.rec-info > summary { cursor: pointer; list-style: none; }
.rec-info > summary::-webkit-details-marker { display: none; }
.rec-info-more { color: var(--primary); font-weight: 500; margin-left: .25rem; }
.rec-info[open] .rec-info-more { display: none; }
.rec-info p { margin-top: .35rem; }
.tab-count { font-size: .75rem; opacity: .6; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.rec-search-wrap { margin: .25rem 0 1rem; }
.rec-search-wrap input { width: 100%; max-width: 24rem; }
.rec-more { min-width: 2.25rem; justify-content: center; }
#rec-page-menu { min-width: 13rem; }
#rec-page-menu button { display: flex; align-items: center; gap: .5rem; }
.rec-group-head, .rec-group-head:hover { background: transparent; filter: none; }
.rec-group-head td { padding: 1.1rem .875rem .4rem !important; display: table-cell; }
.rec-group-head td > * { vertical-align: middle; }
.rec-group-label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.rec-group-n { font-weight: 500; opacity: .8; }
.rec-caret { float: right; width: auto; color: var(--muted-foreground); transition: transform .15s; transform: rotate(-90deg); }
.rec-group-head.is-open .rec-caret { transform: none; }
.rec-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--muted); color: var(--foreground); font-size: .72rem; font-weight: 600; margin-right: .45rem; vertical-align: middle; flex: 0 0 auto; }
.rec-status { display: inline-flex; align-items: center; gap: .35rem; }
.rec-dot-s { width: .55rem; height: .55rem; border-radius: 999px; background: var(--muted-foreground); }
.st-active .rec-dot-s { background: var(--primary); }
.st-paused .rec-dot-s { background: var(--amber-fg, #b45309); }
.st-draft .rec-dot-s { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted-foreground); }
.rec-icon { display: inline-flex; align-items: center; vertical-align: middle; opacity: .35; }
.rec-icon.is-on, .rec-icon[data-act="menu"] { opacity: 1; }
.rec-icon.is-on { color: var(--primary); }
.rec-icon[data-act="menu"] { color: var(--muted-foreground); }
.rec-menu .icon { flex: 0 0 auto; }
.st-row-paused .rec-t, .st-row-draft .rec-t { color: var(--muted-foreground); }

@media (max-width: 720px) {
  .rec-table thead { display: none; }
  .rec-table, .rec-table tbody { display: block; width: 100%; }
  .rec-table-wrap { max-height: none !important; overflow: visible !important; }
  .rec-group-head { display: block; }
  .rec-group-head td { display: block; }
  .rec-row-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "task who" "plan end"; align-items: center; column-gap: .75rem; padding: .7rem .875rem; border-top: 1px solid var(--border); }
  .rec-row-item td { display: block; padding: 0 !important; border: 0 !important; background: none !important; }
  .rec-c-task { grid-area: task; min-width: 0; }
  .rec-c-task .rec-sub { display: none; }
  .rec-c-plan { grid-area: plan; min-width: 0; font-size: .8rem; color: var(--muted-foreground); }
  .rec-c-plan .rec-plan { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rec-c-who { grid-area: who; justify-self: end; }
  .rec-who-name { display: none; }
  .rec-avatar { margin-right: 0; }
  .rec-end { grid-area: end; justify-self: end; }
  .rec-status-l { display: none; }
  .rec-icon[data-act="monthly"], .rec-icon[data-act="confirm"], .rec-icon[data-act="notify"] { display: none; }
  .rec-row-item:hover, .rec-row-item:focus-visible { background: var(--muted); }
}

/* 1.8.97: bulk bewerken terugkerende taken */
.rec-sel{width:1rem;height:1rem;margin:0 .6rem 0 0;vertical-align:middle;accent-color:var(--primary);cursor:pointer;flex:none}
.rec-c-task .rec-sel{float:left;margin-top:.2rem}
.rec-row-item.is-selected{background:color-mix(in oklch,var(--primary) 7%,transparent)}
.rec-bulk-bar{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 1.5rem);padding:.55rem .8rem;border-radius:14px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.rec-bulk-bar.hidden{display:none}
.rec-bulk-acts{display:flex;gap:.35rem;flex-wrap:wrap}
.rec-bulk-all{font-weight:600;font-size:.85rem;white-space:nowrap}
.bulk-field{border-bottom:1px solid var(--border);padding-bottom:.6rem}
.bulk-inner{margin-top:.5rem}
@media (max-width:640px){.rec-bulk-bar{left:.5rem;right:.5rem;transform:none;bottom:calc(4.5rem + env(safe-area-inset-bottom))}}

/* v1.8.98: automatisch intikken */
.tik-actions .tik-manual { font-size: .85rem; }
.tik-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1300; display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 12px; background: var(--text, #1f2a1f); color: var(--bg, #fff); box-shadow: 0 8px 24px rgba(0,0,0,.2); font-weight: 600; }
.tik-toast button { background: none; border: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }
.tik-hint { font-size: .8rem; color: var(--muted, #667); margin-right: auto; align-self: center; }
/* Gebruikersacties in instellingen: compact raster, geen overlap */
.user-actions { display: grid; grid-template-columns: repeat(3, auto); gap: .35rem; justify-content: end; }
.user-actions .btn { white-space: nowrap; line-height: 1.2; height: auto; min-height: 2rem; justify-content: center; }
@media (max-width: 720px) {
  .user-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 15rem; }
  .user-actions .btn { padding: .35rem .5rem; font-size: .8rem; }
}

/* PWA-banner (installatie / update) */
.pwa-banner{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:#1f2937;color:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:.9rem;max-width:560px;margin:0 auto}
.pwa-banner span{flex:1}
.pwa-banner .pwa-x{background:none;border:0;color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .2rem}
.pwa-wake,.pwa-share{margin:.25rem .35rem .25rem 0}
.pwa-wake[aria-pressed="true"]{background:#fef3c7;color:#78350f}

/* 1.8.85 – volledige titel op mobiel, subtiele deelknop */
.pwa-share{color:var(--muted-foreground)}
@media (max-width:640px){
  .page-head{align-items:flex-start}
  .page-head h1{white-space:normal;text-overflow:clip;font-size:1.25rem;line-height:1.3;overflow-wrap:anywhere;flex:1}
}

/* 1.8.86 – Activiteitenlog en mediabibliotheek */
.act-filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.act-filters input[type=search]{flex:1;min-width:12rem}
.act-date{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--muted-foreground)}
.act-count{font-size:.8rem;margin:.75rem 0 .35rem}
.act-list{display:flex;flex-direction:column;gap:.5rem}
.act-row{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.7rem .9rem}
.act-row.is-undone{opacity:.65}
.act-main{min-width:0}
.act-sum{font-weight:500;overflow-wrap:anywhere}
.act-meta{font-size:.78rem;margin-top:.15rem}
.act-undone{font-size:.78rem;color:var(--destructive);margin-top:.15rem}
.act-btns{display:flex;gap:.35rem;flex-shrink:0}
.act-pager{justify-content:center;gap:.75rem;margin:1rem 0}
.act-retention{margin-top:1rem}
.act-warn{background:var(--secondary);border-radius:var(--radius);padding:.6rem .8rem;font-size:.88rem;margin:.5rem 0}
.act-diff td,.act-diff th{font-size:.82rem;vertical-align:top;overflow-wrap:anywhere;max-width:16rem}
.media-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.75rem}
.media-stats .card-body{display:flex;flex-direction:column;padding:.7rem .9rem}
.media-stats b{font-size:1.2rem}
.media-stats span{font-size:.78rem}
.media-bar{gap:.5rem;flex-wrap:wrap;margin:.75rem 0;align-items:center}
.media-check{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.6rem}
.media-item{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.media-item.is-selected{outline:2px solid var(--primary)}
.media-item.is-orphan{border-style:dashed}
.media-pick{position:absolute;top:.35rem;left:.35rem;z-index:1;background:var(--background);border-radius:.35rem;padding:.15rem .3rem;line-height:1}
.media-thumb{display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;background:var(--muted);cursor:pointer}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media-missing{display:flex;align-items:center;justify-content:center;height:100%;font-size:.8rem;color:var(--muted-foreground)}
.media-info{padding:.4rem .55rem;font-size:.78rem}
.media-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-big{display:block;max-width:100%;max-height:65vh;margin:0 auto;border-radius:var(--radius)}
@media (max-width:640px){
  .act-row{flex-direction:column;align-items:stretch}
  .act-btns{justify-content:flex-end}
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .media-stats b{font-size:1rem}
}

/* v1.8.88 kalender: desktop 80% breedte, mobiel rand tot rand */
@media (min-width: 900px) { body:has(#calendar):not(.cal-wide) .main { max-width: 80vw; } }
@media (max-width: 639px) {
  body:has(#calendar) .main { padding-left: .25rem; padding-right: .25rem; }
  #calendar .month-grid { border-left: 0; border-right: 0; border-radius: 0; }
  #calendar .month-cell { padding: .15rem .1rem; }
  .cal-toolbar { gap: .3rem; }
  .cal-toolbar .btn-sm { padding: .3rem .55rem; }
  [data-cal-style="panel"] .month-cell { min-height: 3.2rem; text-align: center; }
  [data-cal-style="panel"] .dots { justify-content: center; gap: 3px; }
  .cal-side { border: 0; padding: .75rem .25rem; }
  [data-cal-style="quiet"] .month-cell { min-height: 5.6rem; text-align: left; }
  [data-cal-style="quiet"] .month-cell .day-num { display: block; width: fit-content; margin: 0 auto .1rem; }
  [data-cal-style="quiet"] .dots { display: none !important; }
  [data-cal-style="quiet"] .month-cell .chip { display: flex !important; width: 100%; margin: 0 0 2px; padding: .05rem .2rem; font-size: .62rem; line-height: 1.25; border-radius: 3px; border-left: 2px solid var(--secondary-foreground); }
  [data-cal-style="quiet"] .month-cell .chip.pc { border-left-color: var(--pc); }
  [data-cal-style="quiet"] .month-cell .chip.chip-in_progress { border-left-color: var(--amber-fg); }
  [data-cal-style="quiet"] .qchip .qdot, [data-cal-style="quiet"] .qchip .qtime { display: none; }
  [data-cal-style="quiet"] .qchip .qtitle { white-space: nowrap; }
  [data-cal-style="quiet"] .month-cell .more-link { display: block !important; font-size: .6rem; padding: 0; color: var(--muted-foreground); background: none; border: 0; }
}

/* v1.8.89 meer tekst per dag op mobiel */
@media (max-width: 639px) {
  #calendar[data-cal-style="quiet"] .month-cell { padding: .1rem 0; }
  #calendar[data-cal-style="quiet"] .month-cell .chip.qchip { padding: 0 .12rem; margin: 0 0 1px; border-radius: 0; font-size: .62rem; line-height: 1.2; box-shadow: none; }
  #calendar[data-cal-style="quiet"] .qchip .qtitle { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
  #calendar[data-cal-style="quiet"] .qchip.chip-done .qtitle { text-decoration: line-through; color: var(--muted-foreground); }
  #calendar[data-cal-style="quiet"] .month-cell .chip-rec { display: block !important; font-size: .6rem; padding: 0 .12rem; border-radius: 0; width: 100%; text-align: left; }
}

/* v1.8.90 kleur stipjes + legende */
.cal-dotbar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.cal-dotbar-label { font-size: .75rem; color: var(--muted-foreground); }
.cal-seg { display: inline-flex; background: var(--muted); border-radius: 999px; padding: 2px; overflow-x: auto; max-width: 100%; }
.cal-seg button { border: 0; background: transparent; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; color: var(--muted-foreground); white-space: nowrap; cursor: pointer; }
.cal-seg button.is-active { background: var(--background); color: var(--foreground); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.cal-dot-legend { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; }
.cal-leg { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); background: var(--background); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; cursor: pointer; }
.cal-leg i { width: 8px; height: 8px; border-radius: 50%; }
.cal-leg.is-active { border-color: var(--foreground); font-weight: 600; }
.cal-leg.is-dim { opacity: .45; }
@media (max-width: 639px) { #calendar[data-cal-style="panel"] .dot { width: 7px; height: 7px; } .cal-dotbar, .cal-dot-legend { padding: 0 .25rem; } }

/* v1.8.91 kleuren in filterpaneel, kleur kiezen via bolletje */
.cal-colorbox { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.cal-colorbox:empty { display: none; }
.cal-leg { padding: .1rem .5rem .1rem .3rem; }
.cal-leg button { border: 0; background: none; padding: .1rem 0; font: inherit; color: inherit; cursor: pointer; }
.cal-leg-dot { position: relative; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.cal-leg-dot i, .cal-leg > i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.cal-leg-dot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cal-leg-hint { margin: .25rem 0 0; font-size: .72rem; color: var(--muted-foreground); }

/* 1.8.93 – kopbalk op mobiel: titel volle breedte, knoppen mogen omlopen */
@media (max-width:640px){
  .page-head{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem}
  .page-head h1{flex:1 1 auto;min-width:0;margin:0}
  .page-actions{flex-wrap:wrap;flex-shrink:1;max-width:100%}
  .page-head:has(.page-actions > :nth-child(3)) h1{flex-basis:100%}
}

/* 1.8.94 Avant verwijderen + knoppen boven toetsenbord */
.avant-del{border:0;background:none;color:var(--muted-foreground);padding:.2rem;margin-left:.35rem;cursor:pointer;vertical-align:middle;opacity:.6;border-radius:6px}
.avant-del:hover{opacity:1;color:var(--destructive)}
@media (max-width:640px){
  .modal-backdrop{height:100dvh;align-items:flex-start;overflow-y:auto}
  .modal{max-height:calc(100dvh - 2rem);margin:auto 0}
  .modal-actions{position:sticky;bottom:-1.5rem;z-index:4;background:var(--background);margin:1rem -1.5rem -1.5rem;padding:.75rem 1.5rem calc(.75rem + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
}

/* Ingeklapte keuzes in het formulier voor terugkerende taken */
.rec-fold { border: 1px solid var(--border, #e5e7eb); border-radius: .6rem; padding: .55rem .75rem; }
.rec-fold > summary { cursor: pointer; list-style: none; display: flex; gap: .4rem; align-items: baseline; font-weight: 600; }
.rec-fold > summary::-webkit-details-marker { display: none; }
.rec-fold > summary::after { content: '›'; margin-left: auto; transition: transform .15s; }
.rec-fold[open] > summary::after { transform: rotate(90deg); }
.rec-fold > summary .muted { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-fold[open] > summary { margin-bottom: .5rem; }
.rec-fold > .check { display: flex; margin: .3rem 0; }
.rec-fold.hidden { display: none; }

/* Opstartscherm (PWA) */
#wp-splash{position:fixed;inset:0;z-index:99999;background:#fbf9f5;color:#c25327;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transition:opacity .45s ease}
#wp-splash.out{opacity:0;pointer-events:none}
.wp-splash-logo{width:min(80vw,22rem);height:auto}
.wp-splash-logo path{stroke-dasharray:1;stroke-dashoffset:1;animation:wpDraw 1.1s ease forwards}
.wp-splash-logo path:nth-child(2){animation-delay:.35s}.wp-splash-logo path:nth-child(3){animation-delay:.7s}.wp-splash-logo path:nth-child(4){animation-delay:.9s}
.wp-splash-name{fill:currentColor;font:400 21px Georgia,'Times New Roman',serif;letter-spacing:.06em;opacity:0;animation:wpFade .6s ease 1.1s forwards}
.wp-splash-bar{width:7rem;height:2px;background:rgba(194,83,39,.15);overflow:hidden;border-radius:2px;position:relative}
.wp-splash-bar::after{content:"";position:absolute;inset:0;width:40%;background:#c25327;animation:wpBar 1.2s ease-in-out infinite}
@keyframes wpDraw{to{stroke-dashoffset:0}}@keyframes wpFade{to{opacity:1}}@keyframes wpBar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.wp-splash-logo path,.wp-splash-name{animation:none;stroke-dashoffset:0;opacity:1}}

/* 1.8.107: ronde kleurencirkel */
.cal-leg-dot { border: 0; background: none; padding: 0; }
.cw-backdrop { z-index: 80; }
.cw-modal { max-width: 20rem !important; padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; }
.cw-head { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.cw-preview { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.15); flex: none; }
.cw-wheel { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; cursor: crosshair; }
.cw-wheel canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
.cw-pin { position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.cw-bright input { width: 100%; -webkit-appearance: none; appearance: none; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #000, var(--cw-top, #fff)); }
.cw-bright input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cw-bright input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--border); }
.cw-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.cw-quick button { aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.cw-modal .modal-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.cw-modal [data-cw="reset"] { margin-right: auto; }

/* 1.8.107: subtiele categorie-tag in het taakformulier */
.cat-tag-row { position: relative; margin: .25rem 0 .5rem; }
.cat-tag { display: inline-flex; align-items: center; gap: .3rem; border: 1px dashed var(--border); background: none; color: var(--muted-foreground); border-radius: 999px; padding: .15rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; }
.cat-tag.has-cat { border-style: solid; color: var(--foreground); background: var(--muted); }
.cat-tag-ic { font-size: .8rem; }
.cat-tag-auto { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: 0 .3rem; }
.cat-pop { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.cat-chip { border: 1px solid var(--border); background: var(--background); border-radius: 999px; padding: .2rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; }
.cat-chip.is-active { border-color: var(--foreground); font-weight: 600; }
.cat-none { color: var(--muted-foreground); }
.cat-new { flex: 1 1 8rem; min-width: 7rem; border: 1px solid var(--border); border-radius: 999px; padding: .2rem .6rem; font: inherit; font-size: .78rem; background: var(--background); color: var(--foreground); }

/* 1.8.112 terugkerend formulier: rustige rangschikking */
.rec-inline{display:flex;align-items:center;gap:.5rem}
.rec-inline input{width:4.5rem;flex:0 0 auto}
.rec-inline select{flex:1 1 auto;min-width:0}

/* 1.8.113 terugkerend: dagknoppen en subtiele inklapregels */
.rec-inline .muted{white-space:nowrap}
.day-pills{display:flex;flex-wrap:nowrap;gap:.3rem}
.day-pills .day-pill{position:relative;cursor:pointer;padding:0;background:transparent;border:0;border-radius:999px;display:inline-flex}
.day-pills .day-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.day-pills .day-pill span{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;border:1px solid var(--border);font-size:.78rem;font-weight:500;letter-spacing:.01em;color:var(--muted-foreground);background:var(--background);transition:background .15s,color .15s,border-color .15s}
.day-pills .day-pill:hover span{border-color:color-mix(in oklab,var(--primary) 50%,var(--border));color:var(--foreground)}
.day-pills .day-pill input:checked+span{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);font-weight:600}
.day-pills .day-pill input:focus-visible+span{outline:2px solid var(--ring);outline-offset:2px}
#r-days-wrap.hidden{display:none}
.rec-fold.rec-soft{border:1px solid var(--border);border-radius:.6rem;padding:0;background:var(--background)}
.rec-fold.rec-soft>summary{list-style:none;display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;font-weight:600;font-size:.9rem;cursor:pointer;border-radius:.6rem}
.rec-fold.rec-soft>summary::-webkit-details-marker{display:none}
.rec-fold.rec-soft>summary::before{display:none!important;content:none!important}
.rec-fold.rec-soft>summary>.muted{margin-left:auto;font-weight:400;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rec-fold.rec-soft>summary::after{content:"\25BE";flex:none;color:var(--muted-foreground);transition:transform .2s}
.rec-fold.rec-soft[open]>summary::after{transform:rotate(180deg)}
.rec-fold.rec-soft>summary:hover{background:color-mix(in oklab,var(--foreground) 4%,var(--background))}
.rec-fold.rec-soft[open]>summary{border-bottom:1px solid var(--border);border-radius:.6rem .6rem 0 0}
.rec-fold.rec-soft>:not(summary){margin-left:.75rem;margin-right:.75rem}
.rec-fold.rec-soft>:last-child:not(summary){margin-bottom:.6rem}
.rec-fold.rec-soft>summary+*{margin-top:.6rem}

/* 1.8.120 — optionele extra kaartpunten + notities */
.map-extra { margin-top: .4rem; }
.map-extra-actions { display: flex; gap: 1rem; justify-content: flex-end; font-size: .85rem; }
.map-extra-actions .is-active { color: var(--primary); font-weight: 600; }
.map-pt-list, .map-points { list-style: none; margin: 0 0 .35rem; padding: 0; display: grid; gap: .3rem; }
.map-pt-list li, .map-points li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.map-pt-list input { flex: 1; min-width: 0; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--background); color: var(--foreground); }
.mp-num { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #ea4335; color: #fff; font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.mp-del { border: 0; background: transparent; color: var(--muted-foreground); font-size: 1.1rem; cursor: pointer; padding: 0 .25rem; }
.map-points { margin-top: .5rem; }
.map-points li { cursor: pointer; padding: .2rem 0; }

/* 1.8.121 */
.map-points li { border-radius: .4rem; padding: .2rem .35rem; transition: background .3s; }
.map-points li.is-active { background: var(--border, #eee); }