/* Theme tokens */
:root{
  --pink: #ff4b91;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fafafa;
  color: #222;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid #e3e3e3;
  position: sticky;
  top: 0;
  z-index: 10;
  gap: 0.75rem;
}
.logo-wrap {
  display: flex;
  align-items: center;
  height: 75px;
  overflow: hidden;
}
.logo-img {
  height: 200px;
  width: auto;
  display: block;
}
.logo-link { display: inline-flex; align-items: center; }
.search {
  flex: 1 1 auto;
  max-width: 420px;
}
.search input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
.btn.primary {
  background: #ff4b91;
  color: white;
}
.btn.secondary {
  background: #ffffff;
  border-color: #ddd;
  color: #333;
}

.btn.danger {
  background: #ffffff;
  border-color: #c62828;
  color: #c62828;
}
.btn.danger:hover {
  border-color: #8e0000;
  color: #8e0000;
}
.user-menu .user-name {
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #f1f1f1;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid #e3e3e3;
}
.main-nav a {
  text-decoration: none;
  color: #555;
  font-size: 0.9rem;
  padding-bottom: 0.2rem;
}
.main-nav a:hover {
  color: #ff4b91;
}

.main-nav a.active {
  color: #ff4b91;
  border-bottom: 2px solid #ff4b91;
}

/* Main-nav dropdowns (Contacten / Rapporten) */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #555;
  font-size: 0.9rem;
  cursor: pointer;
  padding-bottom: 0.2rem;
}
.nav-dropdown-toggle:hover {
  color: #ff4b91;
}
.nav-dropdown-toggle.active {
  color: #ff4b91;
  border-bottom: 2px solid #ff4b91;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 210px;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(15,23,42,0.10);
  padding: 0.35rem;
  z-index: 20;
}
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
}
.nav-dropdown-menu a:hover {
  background: #fff5fb;
  color: #ff4b91;
}
.nav-dropdown-menu a.active {
  background: #fff5fb;
  color: #ff4b91;
}

.page {
  /* Minder verticale "lucht" onder het menu */
  padding: 0.7rem 1rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Pagina titels (H1) iets compacter (~20% kleiner) */
h1 {
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0.35rem 0 0.7rem;
}

/* Layouts */
.columns-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}
.card {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 20px rgba(15,23,42,0.04);
  border: 1px solid #f0f0f0;
}
.card h2 {
  margin-top: 0;
  font-size: 1rem;
}

/* Dashboard: pink title bars */
.dashboard-card > h2 {
  background: #ff4b91;
  color: #fff;
  padding: 0.65rem 1rem;
  margin: -1rem -1.25rem 0.85rem;
  border-radius: 0.75rem 0.75rem 0 0;
}
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid #f2f2f2;
}
.activity-list li:last-child {
  border-bottom: none;
}

/* Activity detail: participants list should be compact without divider lines */
.participants-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
.participants-list li {
  padding: 0.2rem 0;
  border: 0 !important;
  line-height: 1.25;
}
.activity-meta {
  font-size: 0.8rem;
  color: #777;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table thead {
  background: #f7f7f7;
}
.table th, .table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.table tr:hover {
  background: #fff5fb;
}

/* Filters & chips */
.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.chip-group {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.chip-label {
  font-size: 0.85rem;
  margin-right: 0.25rem;
}
.chip {
  border-radius: 999px;
  border: 1px solid #ddd;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  background: #fff;
}
.chip.active {
  background: #ff4b91;
  border-color: #ff4b91;
  color: #fff;
}

/* Calendar mock */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}
.calendar-views {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.calendar-views .btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  border: 1px solid #eee;
  border-radius: 0.75rem;
  overflow: hidden;
}

.calendar-grid table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.calendar-grid th,
.calendar-grid td {
  border: 1px solid #f1f1f1;
  padding: 0.4rem;
  vertical-align: top;
  height: 90px;
}
.calendar-day {
  font-weight: 600;
  font-size: 0.75rem;
  color: #777;
}
.cal-activity {
  margin-top: 0.3rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.35rem;
  background: #e9fbe7;
  font-size: 0.75rem;
}

/* Detail layout */
.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.5rem;
}
.detail-title {
  font-size: 1.4rem;
  margin-bottom: 0.1rem;
}
.detail-subtitle {
  color: #ff4b91;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.detail-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.detail-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.meta-muted {
  font-size: 0.75rem;
  color: #999;
  /* Was 1.5rem (zorgde voor veel lege ruimte o.a. bij "Maandoverzicht") */
  margin: 0.15rem 0 0;
}

/* Form styles */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.form-group label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid #ddd;
  font-size: 0.9rem;
}
.form-group textarea {
  min-height: 100px;
  resize: vertical;
}
.form-toolbar {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}
.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  border-radius: 999px;
  background: #f3f3f3;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1rem 0 0.4rem;
}
.checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
}
.checkbox-list label {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.docs-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}
.docs-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid #f2f2f2;
}
.docs-list li:last-child {
  border-bottom: none;
}
.doc-meta {
  font-size: 0.75rem;
  color: #888;
}

/* Login page */
.login-page {
  max-width: 380px;
  margin: 4rem auto;
}
.login-page h1 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.login-footer {
  font-size: 0.8rem;
  color: #777;
  margin-top: 0.75rem;
}

/* Responsive */
@media (max-width: 900px) {
  .columns-2,
  .two-column {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -----------------------------
   Activiteiten – mobiele lijstweergave
   (desktop blijft kalender/grid)
------------------------------*/
.mobile-only { display: none; }

.mobile-agenda {
  margin-top: 0.75rem;
}
.mob-day {
  margin: 0.75rem 0;
}
.mob-day-head {
  font-weight: 800;
  margin: 0 0 0.4rem 0;
}
.mob-events {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mob-event {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.75rem;
  padding: 0.55rem 0.6rem;
  border-left: 6px solid #94a3b8;
  background: #f8fafc;
}
.mob-event-top {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

/* Mobile month/week: show the date inside each activity card (instead of above) */
.mob-date{
  font-weight: 800;
  opacity: 0.8;
  min-width: 3.2rem;
  white-space: nowrap;
}
.mob-time {
  font-weight: 800;
  min-width: 3.4rem;
}
.mob-title {
  font-weight: 700;
  line-height: 1.15;
}
.mob-event-meta {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.mob-chip {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 0.78rem;
  font-weight: 700;
}
.mob-loc {
  font-size: 0.82rem;
  opacity: 0.9;
}

@media (max-width: 720px) {
  /* Alleen op de Activiteiten pagina: kalender/grid verbergen en lijst tonen */
  .activities-page .calendar-grid { display: none; }
  /* Standaard (dag/week/maand): tabel verbergen en mobiele cards tonen */
  .activities-page:not(.view-list) table.table { display: none; }
  .activities-page:not(.view-list) .mobile-only { display: block; }

  /* Lijst-weergave: tabel behouden op mobiel (eventueel horizontaal scrollen) */
  .activities-page.view-list table.table { display: table; font-size: 0.85rem; min-width: 560px; }
  .activities-page.view-list .mobile-only { display: none; }
  .activities-page.view-list section.card { overflow-x: auto; }

  /* Filters/toolbar iets compacter */
  .activities-page .toolbar-row { flex-wrap: wrap; gap: 0.75rem; }
  .activities-page .toolbar-left,
  .activities-page .toolbar-right { width: 100%; }
  .activities-page .toolbar-right { align-items: flex-start; }
  .activities-page .view-buttons { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .search {
    order: 3;
    width: 100%;
  }
  .top-actions {
    margin-left: auto;
  }
}
@media (max-width: 480px) {
  .main-nav {
    font-size: 0.85rem;
  }
  .page {
    padding: 0.75rem;
  }
  .calendar-grid th,
  .calendar-grid td {
    height: 70px;
  }
}


/* Flash messages */
.flash {
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.flash-success {
  background: #e0f7e9;
}
.flash-error {
  background: #ffe3e3;
}


/* Inline text button for small actions */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: #ff4b91;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover {
  color: #d93670;
}

.btn-link-danger {
  color: #c62828;
}
.btn-link-danger:hover {
  color: #8e0000;
}

/* Map embed */
.map-embed iframe {
  display: block;
}


/* Top search & actions */
.top-search {
  flex: 1;
  max-width: 420px;
  padding: 0 1rem;
}
.top-search form {
  width: 100%;
}
.top-search input[type="text"] {
  width: 100%;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* User menu dropdown */
.user-menu {
  position: relative;
}
.user-menu-toggle {
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  padding: 0;
}
.user-menu .user-name {
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #f1f1f1;
}
.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: 130%;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 0.35rem 0;
  min-width: 160px;
  display: none;
  z-index: 20;
}
.user-menu.open .user-menu-dropdown {
  display: block;
}
.user-menu-dropdown a {
  display: block;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: #333;
  text-decoration: none;
}
.user-menu-dropdown a:hover {
  background: #f8f8f8;
}

/* Toolbar & view buttons */
.toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}

/* Contacts: search bar */
.search-form {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.search-form .form-group {
  /* ~2x wider than the default small search field, but still responsive */
  width: min(620px, 90vw);
}

/* Contact form: company selector row */
.company-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.company-row .company-select {
  flex: 1;
}

/* Activities: filter-chips (multi-select) */
.chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 520px;
}
.chipcheck {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.chipcheck input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chipcheck .chip-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 0.8rem;
  line-height: 1;
}
.chipcheck input:checked + .chip-pill {
  background: #ff4b91;
  border-color: #ff4b91;
  color: #fff;
  box-shadow: 0 2px 10px rgba(255,75,145,0.18);
}
.chipcheck .chip-pill:hover {
  border-color: #bbb;
}

/* Group filterchips in groepskleur */
.chipcheck-group .chip-pill{
  /* Inactief = neutraal (geen groepskleur) */
  border-color: #ddd;
}
.chipcheck-group input:checked + .chip-pill{
  background: var(--chip-color, #ff4b91);
  border-color: var(--chip-color, #ff4b91);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.toolbar-left {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.toolbar-right {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.view-buttons {
  display: inline-flex;
  border-radius: 999px;
  background: #f3f3f3;
  padding: 0.15rem;
}
.btn-tab {
  border: none;
  background: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 999px;
}
.btn-tab.active {
  background: #ff4b91;
  color: #fff;
}

/* Calendar (nieuwe structuur met divs) */
.calendar-card {
  margin-bottom: 1rem;
}
.calendar-card.card {
  /* Card-padding iets compacter (boven de maandtitel) */
  padding-top: 0.65rem;
}
.calendar-card .calendar-header {
  margin-bottom: 0.25rem;
}
.calendar-card .cal-subtitle {
  text-align: center;
  margin: 0.05rem 0 0.45rem;
}
.calendar-grid .calendar-cell {
  min-height: 75px;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-radius: 0.75rem;
  border: 1px solid #eee;
  overflow: hidden;
  font-size: 0.8rem;
}
.calendar-day-name {
  padding: 0.4rem;
  text-align: center;
  background: #fafafa;
  border-bottom: 1px solid #eee;
  font-weight: 600;
}
.calendar-cell {
  min-height: 90px;
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  padding: 0.3rem;
  position: relative;
}
.calendar-cell:nth-of-type(7n) {
  border-right: none;
}
.calendar-cell.is-other-month {
  background: #fcfcfc;
  color: #aaa;
}
.calendar-cell.is-today {
  box-shadow: inset 0 0 0 1px #ff4b91;
}
.calendar-date {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.calendar-events {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.calendar-event {
  padding: 0.15rem 0.3rem;
  border-radius: 0.4rem;
  background: #f8fafc;
  cursor: pointer;
  border-left: 4px solid transparent;
}
.calendar-event:hover {
  filter: brightness(0.98);
}
.calendar-event-line1 {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
}
.calendar-event-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.calendar-event-line2 {
  margin-top: 0.05rem;
}
.calendar-event-group {
  font-size: 0.74rem;
  opacity: 0.85;
}

/* Kalenderkleuren: gebaseerd op groep (inline style vanuit backend) */

/* Vandaag iets duidelijker */
.calendar-cell.is-today {
  box-shadow: inset 0 0 0 2px #ff4b91;
  background: #fff7fb;
}

/* Tooltip */
.sta-tooltip {
  position: absolute;
  z-index: 9999;
  display: none;
  max-width: 320px;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  font-size: 0.82rem;
  line-height: 1.25;
}
.sta-tooltip.is-visible { display: block; }
.sta-tooltip-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.sta-tooltip-row { margin: 0.15rem 0; }
.sta-tooltip-desc {
  margin-top: 0.35rem;
  opacity: 0.9;
}
.sta-tooltip-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #f3f3f3;
  border: 1px solid #e8e8e8;
  font-size: 0.75rem;
}

/* Kalender title als button */
.cal-title-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.1rem 0.25rem;
  border-radius: 0.5rem;
}
.cal-title-btn:hover {
  background: #f6f6f6;
}
.calendar-event-time {
  font-weight: 600;
  margin-right: 0.25rem;
}
.calendar-event-group {
  font-size: 0.75rem;
}

/* Kleine knoppen */
.btn-small {
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
}

/* Alias gebruikt in templates */
.btn-sm {
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
}

/* -----------------------------
   Template WYSIWYG + Media modal
------------------------------*/

.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.6rem 0;
}

.wysiwyg-editor {
  min-height: 300px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 0.75rem;
  background: #fff;
  outline: none;
}

.wysiwyg-editor:focus {
  border-color: #ff4b91;
  box-shadow: 0 0 0 3px rgba(255, 75, 145, 0.15);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.modal-card {
  width: min(980px, 100%);
  max-height: min(80vh, 820px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
}

.modal-body {
  padding: 1rem;
  overflow: auto;
}

.media-upload-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.media-item {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 0.35rem;
  background: #fafafa;
  cursor: pointer;
}

.media-item:hover {
  border-color: #ff4b91;
  box-shadow: 0 0 0 3px rgba(255, 75, 145, 0.12);
}

.media-item img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  display: block;
}

/* Inline link-knop (document verwijderen, etc.) */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: #ff4b91;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover {
  color: #d93670;
}


.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}


/* Dashboard: maak datum/tijd-kolom iets breder */
.columns-2 .card .table th:first-child,
.columns-2 .card .table td:first-child {
  width: 180px;
}


/* Extra klasse voor actieve chips (groep/soort selectie) */
.chip-active {
  background: #ff4b91;
  border-color: #ff4b91;
  color: #fff;
}


/* Twee-koloms layout voor formulierblokken */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 1rem;
}


/* Checkbox-lijsten in filters (activiteiten) */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 140px;
  overflow: auto;
}

/* Kalender header met pijltjes en gecentreerde maandnaam */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.calendar-header .cal-current {
  flex: 1;
  text-align: center;
}

.calendar-header .cal-current .small {
  font-size: 0.8rem;
}

.calendar-header .cal-nav {
  text-decoration: none;
  font-size: 1.4rem;
  padding: 0 0.4rem;
  line-height: 1;
}


/* ===== Agenda: compacte header + custom maand/jaar picker ===== */
.calendar-card .calendar-header.calendar-header-compact{
  justify-content: center;
  gap: 0.4rem;
}
.calendar-card .calendar-header.calendar-header-compact .cal-current{
  flex: 0 0 auto;
}
.calendar-card .calendar-header.calendar-header-compact .cal-nav{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 1.2rem;
  padding: 0;
}
.calendar-card .calendar-header.calendar-header-compact .cal-nav:hover{
  background: #f6f6f6;
}

/* Backdrop */
.sta-picker-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px 16px;
  background: rgba(0,0,0,0.18);
  z-index: 10000;
}
.sta-picker-backdrop.is-open{
  display: flex;
}

/* Picker panel */
.sta-picker{
  width: min(720px, 96vw);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  padding: 14px 14px 10px;
}

.sta-picker-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 10px;
}

.sta-picker-year{
  font-weight: 700;
  font-size: 1.05rem;
}

.sta-picker-year-nav{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.sta-picker-year-nav:hover{
  background: #f6f6f6;
}

.sta-picker-months{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 6px;
}

.sta-picker-month{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  text-transform: lowercase;
}
.sta-picker-month:hover{
  background: #fafafa;
}
.sta-picker-month.is-selected{
  background: #ff4b91;
  border-color: #ff4b91;
  color: #fff;
  font-weight: 700;
}

.sta-picker-actions{
  display: flex;
  justify-content: flex-end;
  padding: 6px 6px 4px;
}



/* ===== Activities: header layout tweaks ===== */
.cal-period{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.cal-subtitle{
  text-align: center;
  margin-top: 0.15rem;
  margin-bottom: 0.6rem;
}
.toolbar-actions-inline{
  display: flex;
  justify-content: flex-end;
}
.list-range-inline{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.list-range-inline input[type="date"]{
  width: 160px;
}

/* ===== Picker: week/day/range ===== */
.sta-picker-weeks{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 6px;
}
.sta-picker-week{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  text-transform: lowercase;
}
.sta-picker-week:hover{ background: #fafafa; }
.sta-picker-week.is-selected{
  background: #ff4b91;
  border-color: #ff4b91;
  color: #fff;
  font-weight: 700;
}

.sta-picker-days{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
}
.sta-day-head{
  text-align: center;
  font-weight: 700;
  color: #777;
  font-size: 0.78rem;
  padding: 4px 0;
}
.sta-day-blank{
  min-height: 34px;
}
.sta-day{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.sta-day:hover{ background: #fafafa; }
.sta-day.is-selected{
  background: #ff4b91;
  border-color: #ff4b91;
  color: #fff;
  font-weight: 700;
}

.sta-picker-range{
  padding: 6px;
}
.sta-picker-range .range-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.sta-picker-range label{
  font-size: 0.85rem;
}
.sta-picker-range input[type="date"]{
  width: 170px;
}


/* Page-wide override (used by agenda) */
.page.page-wide{
  max-width: 100%;
}


.calendar-day-name,
.calendar-cell{
  min-width: 0;
}

.calendar-cell{
  height: auto; /* allow content to define row height */
}

.calendar-event-title{
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.calendar-event-line1{
  align-items: flex-start;
}

.calendar-event-time{
  white-space: nowrap;
}


/* Search tabs */
.search-tabs{
  display:flex;
  gap:8px;
  align-items:flex-end;
  border-bottom:1px solid #e3e3e3;
  margin: 1rem 0 0.5rem 0;
}
.search-tab{
  border:1px solid #e3e3e3;
  border-bottom:none;
  background:#fff;
  padding:0.5rem 0.75rem;
  border-radius:10px 10px 0 0;
  cursor:pointer;
  font-weight:600;
}
.search-tab.active{
  background:#f7f7f7;
}
.search-panel{ display:none; }
.search-panel.active{ display:block; }

/* Clickable rows */
.table-clickable tbody tr{ cursor:pointer; }
.table-clickable tbody tr:hover{ background: rgba(0,0,0,0.04); }


/* Today button in agenda view buttons */
.btn-tab.btn-today{
  font-weight: 700;
}

/* === Activiteit form: wanneer-mode + compacte datumvelden + contact typeahead === */
.when-mode-bar{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 0.25rem 0 0.75rem 0;
}
.when-mode-btn{
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.when-mode-btn.active{
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  color: #fff !important;
  font-weight: 600;
}
.when-pane{ display:none; }
.when-pane.active{ display:block; }

/* Compacte datumvelden zodat het kalender-icoon mooi aansluit */
.when-pane .date-compact{
  width: 160px !important;
  max-width: 160px !important;
}

/* Start/eind velden dichter naast elkaar (niet uit elkaar getrokken) */
.time-row, .period-row{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  justify-content: flex-start;
}
.time-row .form-group, .period-row .form-group{
  flex: 0 0 auto;
  min-width: unset;
}
.time-row input[type="time"]{
  width: 140px;
}

.form-group.has-typeahead{ position: relative; }
.form-group.has-typeahead .typeahead{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 4px);
  z-index: 50;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow:hidden;
  max-height: 320px;
  overflow-y:auto;
}
.typeahead-item{
  padding: 10px 12px;
  cursor:pointer;
}
.typeahead-item:hover{
  background: rgba(0,0,0,.04);
}
.typeahead-item .t{ font-weight: 700; }
.typeahead-item .s{ font-size: 12px; opacity: .75; margin-top: 2px; }



/* Activity detail layout polish */
.detail-actions-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.6rem;
  flex-wrap:wrap;
  width:100%;
}
.detail-actions-right{
  display:flex;
  gap:0.4rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.kv-row{
  display:flex;
  align-items:center;
  gap:0.6rem;
  flex-wrap:wrap;
  margin:0.15rem 0 0.35rem;
}
.kv-label{
  font-size:0.85rem;
  color:#555;
  min-width:70px;
}
.kv-value{
  font-size:0.95rem;
}
.badge.pink{
  background: var(--pink);
  color:#fff;
}
.section-title{
  margin:0.75rem 0 0.25rem;
}
.details-text{
  white-space:pre-wrap;
  line-height:1.35;
}
.label-small{
  font-size:0.8rem;
  color:#666;
  margin-top:0.65rem;
  margin-bottom:0.15rem;
}
.note-text{
  font-size:0.9rem;
  line-height:1.35;
  white-space:pre-wrap;
}

/* Tighten spacing inside cards */
.card h2{
  margin:0.6rem 0 0.25rem;
}
.card h2:first-child{
  margin-top:0;
}
.card h3{
  margin:0.55rem 0 0.2rem;
}
.card p{
  margin:0.15rem 0 0.45rem;
}
.card hr{
  margin:0.75rem 0;
}

/* ===== STA compactness overrides (v8) ===== */
/* Make page titles smaller and reduce vertical whitespace */
h1, .page h1 {
  font-size: 1.6rem !important;
  line-height: 1.15 !important;
  margin: 0.25rem 0 0.55rem !important;
}

/* Reduce space between calendar title (e.g., December 2025) and subtitle (Maandoverzicht) */
.calendar-card .cal-title-btn{
  padding: 0 !important;
  line-height: 1.05 !important;
}

.calendar-card .meta-muted.cal-subtitle,
.calendar-card .meta-muted.small.cal-subtitle,
.calendar-card .cal-subtitle{
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.1 !important;
}

/* ====== STA overrides: mobile-friendly month arrows + tighter subtitle spacing ====== */
.calendar-card .calendar-header.calendar-header-compact{
  margin-bottom: 0.15rem !important; /* tighter space between month row and subtitle */
}

/* Month navigation arrows: make tap targets larger (esp. mobile) */
.calendar-card .cal-nav{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 !important;
  font-size: 1.9rem !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

.calendar-card .cal-nav:focus,
.calendar-card .cal-nav:hover{
  background: rgba(0,0,0,0.06);
}

@media (max-width: 640px){
  .calendar-card .cal-nav{
    width: 2.75rem !important;
    height: 2.75rem !important;
    font-size: 2.1rem !important;
  }
  .calendar-card .calendar-header.calendar-header-compact{
    margin-bottom: 0.1rem !important;
  }
}

/* Subtitle ("Maandoverzicht") even closer to title */
.calendar-card .meta-muted.cal-subtitle,
.calendar-card .meta-muted.small.cal-subtitle,
.calendar-card .cal-subtitle{
  margin-top: 0 !important;
  margin-bottom: 0.2rem !important;
}


/* === v10: smaller month arrow boxes (28x28) but larger arrow glyph === */
.calendar-card .cal-nav{
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 640px){
  .calendar-card .cal-nav{
    width: 28px !important;
    height: 28px !important;
    font-size: 26px !important;
    line-height: 28px !important;
  }
  .calendar-card .calendar-header.calendar-header-compact{
    margin-bottom: 0.05rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .calendar-card .meta-muted.cal-subtitle{
    margin-top: 0 !important;
    margin-bottom: 0.1rem !important;
    line-height: 1.05 !important;
  }
}


/* ===== v11: kalender pijlen als SVG (geen font-whitespace) ===== */
.calendar-card .cal-nav{
  width:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:0 !important; /* voorkomt baseline/whitespace van tekst-glyphs */
}
.calendar-card .cal-nav .cal-icon{
  width:24px !important;
  height:24px !important;
  display:block !important;
}
.calendar-card .cal-title-btn{
  padding:0 !important;
  margin:0 !important;
  line-height:1.05 !important;
}
.calendar-card .calendar-header.calendar-header-compact{
  margin-bottom:0.05rem !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.calendar-card .meta-muted.small.cal-subtitle{
  margin-top:-3px !important; /* trekt 'Maandoverzicht' dichter naar de maand */
  margin-bottom:0.08rem !important;
  line-height:1.05 !important;
}


/* --- Fix13: Activiteit detail header spacing + group pill + navigation link --- */
.detail-header-actions .detail-subtitle{
  margin-bottom: 0.15rem !important;
}

.detail-groupline{
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pink);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.detail-group-label{
  font-weight: 600;
}

.group-pill{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--group-color, var(--pink));
  background: var(--group-bg, rgba(255, 75, 145, 0.10));
  color: var(--group-color, var(--pink));
  font-size: 0.8rem;
  line-height: 1.2;
}

.group-pill.filled{
  background: var(--group-color, #ff4b91);
  border-color: var(--group-color, #ff4b91);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.location-line{
  margin: 0 0 0.5rem 0;
}

.location-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.location-link:hover{
  color: var(--pink);
}



/* ===== v14: TomTom knop naast adres (Google Maps op adres klik) ===== */
.location-line{
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important; /* keep TomTom button on the same line */
}

/* Allow the address to wrap inside its flex item while keeping the TomTom button visible */
.location-link{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.tomtom-btn,
.nav-btn{
  flex: 0 0 auto !important;
  margin-top: 1px !important;
}

.tomtom-btn,
.nav-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  text-decoration: none !important;
  color: inherit !important;
  background: rgba(0,0,0,0.03) !important;
}

.tomtom-btn:hover{
  border-color: rgba(0,0,0,0.22) !important;
  background: rgba(0,0,0,0.05) !important;
}

/* --- Dashboard mobile: make Date/Time column narrower so Group/Location can breathe --- */
@media (max-width: 640px) {
  .dashboard-table { table-layout: fixed; }
  .dashboard-table th:first-child,
  .dashboard-table td:first-child {
    width: 92px !important;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .dashboard-table th:last-child,
  .dashboard-table td:last-child {
    width: 68px !important;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
  .dashboard-table th:nth-child(2),
  .dashboard-table td:nth-child(2) {
    width: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


.location-name{
  font-weight: 600;
  display: inline-block;
}


/* Dashboard group color cues */
.group-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;vertical-align:middle;}
.dash-group-cell{border-left:4px solid transparent;}


/* STA DASH NAV CSS */
.sta-group-dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
#nav-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Dashboard tweaks */
.card.dashboard-card { padding: 0; }
.card.dashboard-card > h2 { margin: 0; padding: 12px 16px 0 16px; }
.dashboard-table { margin: 0; }
.dashboard-table td { vertical-align: middle; }
.dashboard-table .dash-datetime { width: 120px; white-space: nowrap; text-align: center; }
.dashboard-table .dash-time { font-weight: 400; }
.dashboard-table .dash-kind-col { width: 48px; text-align: center; }
.vertical-text { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; }