/* ===== Activities ===== */
/* ===== Agenda / kalender (Google Calendar-stijl) ===== */
.cal { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav-btn {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
}
.cal-nav-btn:hover { background: var(--bg-warm); color: var(--ink); }
.cal-today-btn {
  border: 1px solid var(--border); border-radius: 8px; background: var(--white);
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-soft); padding: 6px 12px;
}
.cal-today-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-title { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 500; color: var(--ink); min-width: 180px; margin-left: 4px; }
.cal-viewswitch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: auto; }
.cal-viewswitch button { border: none; background: var(--white); padding: 6px 14px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.cal-viewswitch button + button { border-left: 1px solid var(--border); }
.cal-viewswitch button.active { background: var(--accent); color: #fff; }

/* Tijd-grid (dag/week) — zachte, warme look passend bij de rest van de CRM */
/* Geen interne scroll: JS zet de hoogte op de resterende viewport-ruimte, en de
   body vult die met 24 fractionele rijen → de hele dag past zonder scrollen. */
.cal { --cal-gutter-w: 56px; }
.cal-timegrid-wrap { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); }
.cal-head-row { display: grid; flex: none; z-index: 5; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border-bottom: 1px solid var(--border-soft); }
.cal-head-gutter { border-right: 1px solid var(--border-soft); }
.cal-head-day { text-align: center; padding: 10px 4px 8px; border-left: 1px solid var(--border-soft); }
.cal-head-day .cal-dow { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.cal-head-day .cal-dnum { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 500; color: var(--ink-soft); margin-top: 3px; }
.cal-head-day.today .cal-dnum { background: var(--accent); color: #fff; width: 29px; height: 29px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.cal-head-day.today .cal-dow { color: var(--accent); }

/* eigen scroll-gutter: reserveert exact dezelfde breedte als de scrollbar van
   .cal-scrollarea, zodat de drie rijen altijd dezelfde kolombreedte hebben. */
.cal-allday { display: grid; flex: none; border-bottom: 1px solid var(--border-soft); min-height: 28px; max-height: 84px; overflow-y: auto; scrollbar-gutter: stable; }
.cal-allday-gutter { font-size: 10px; color: var(--ink-mute); text-align: right; padding: 5px 8px 0 0; border-right: 1px solid var(--border-soft); }
/* Klikken in een lege plek van deze cel maakt een activiteit zonder tijdstip; daarom
   dezelfde aanwijzer als de dagkolommen eronder. */
.cal-allday-cell { border-left: 1px solid var(--border-soft); padding: 4px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }

/* Google-agenda: de uren hebben een VASTE hoogte (--cal-hour-h) en het
   tijd-grid scrollt binnen .cal-scrollarea; kop en hele-dag-rij blijven staan.
   De scrollbar-breedte wordt door JS als padding op die twee rijen gezet, zodat
   de dagkolommen exact onder hun dagnaam blijven. */
.cal-scrollarea { flex: 1; min-height: 0; overflow-y: scroll; overflow-x: hidden; scrollbar-gutter: stable; }
.cal-body { display: grid; position: relative; flex: none; }
.cal-gutter { border-right: 1px solid var(--border-soft); display: grid; grid-template-rows: repeat(24, 1fr); }
.cal-gutter-hour { position: relative; }
.cal-gutter-hour span { position: absolute; top: 0; right: 8px; transform: translateY(-50%); font-size: 10px; color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-daycol { position: relative; border-left: 1px solid var(--border-soft); }
/* uurlijnen — zachte hairline (vol uur) + nog lichtere halfuurlijn */
.cal-hourlines { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(24, 1fr); pointer-events: none; }
.cal-hourline { border-top: 1px solid rgba(57, 57, 57, 0.08); }
.cal-hourline:first-child { border-top: none; }
.cal-daycol.today { background-color: rgba(245, 119, 34,0.035); }
.cal-now-line { position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; z-index: 4; pointer-events: none; border-radius: 2px; }
.cal-now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.18); }

.cal-event {
  position: absolute; box-sizing: border-box;
  border-radius: 7px; padding: 3px 7px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--white);
  font-size: 11.5px; line-height: 1.3; color: #fff;
  box-shadow: 0 1px 2px rgba(57, 57, 57,0.12);
  transition: box-shadow 0.12s, transform 0.06s;
}
.cal-event:hover { box-shadow: 0 4px 12px rgba(57, 57, 57,0.22); z-index: 6 !important; }
.cal-event { min-height: 14px; }
/* Bij fit-to-height is een half-uur-blok maar ~14px hoog: geen verticale padding
   en verticaal gecentreerd, anders valt de tekst onder de rand van het blokje. */
.cal-event.compact { display: flex; align-items: center; gap: 5px; padding: 0 6px; line-height: 1.15; }
.cal-event .cal-ev-time { font-size: 10px; opacity: 0.9; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-event .cal-ev-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event.compact .cal-ev-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-event.done { opacity: 0.5; }
.cal-event.done .cal-ev-title { text-decoration: line-through; }
.cal-event-more {
  position: absolute; box-sizing: border-box; border-radius: 7px; padding: 3px 6px;
  background: var(--ink-soft); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 5;
  box-shadow: 0 1px 2px rgba(57, 57, 57,0.12);
}
.cal-event-more:hover { background: var(--ink); }
.cal-allday .cal-event { position: static; height: auto; white-space: nowrap; }

/* ===== Maandweergave (Google Agenda-kloon) =====
   Eén beeld, geen scroll: _calFitHeight zet de resterende viewport-hoogte op de
   container en het raster verdeelt die over het aantal weken dat de maand nodig
   heeft (5 of 6). Kop en raster hebben identieke kolommen en er is nergens een
   scrollbar, dus de dagen staan altijd exact boven hun kolom. */
/* flex: none — met `flex: 1` zou flex-basis:0 de hoogte uit _calFitHeight
   negeren en zakten de rijen terug naar hun inhoud (~30px op lege dagen).
   De kop staat IN de scroll-container (sticky), zodat kop en raster altijd
   dezelfde breedte hebben, mét of zonder scrollbar. */
.cal-month {
  flex: none; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--white); box-shadow: var(--shadow-sm);
}
.cal-month-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: none;
  position: sticky; top: 0; z-index: 3;
  background: var(--white); border-bottom: 1px solid var(--border-soft);
}
.cal-month-head div {
  text-align: center; padding: 9px 0 7px; font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
}
/* flex-basis 0 → het raster vult exact de vrije hoogte (rijen = 1fr), en de
   inline min-height (nWeeks × rij-bodem) voorkomt dat cellen dun worden; is er
   te weinig ruimte, dan scrollt .cal-month i.p.v. de rijen plat te drukken. */
.cal-month-grid { flex: 1 1 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.cal-mcell {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  padding-bottom: 2px; cursor: pointer;
  border-top: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft);
}
.cal-mcell:nth-child(7n+1) { border-left: none; }
.cal-mcell:nth-child(-n+7) { border-top: none; }   /* kop heeft al een border-bottom */
.cal-mcell:hover { background: rgba(57, 57, 57, 0.018); }
.cal-mcell-top { display: flex; justify-content: center; padding: 4px 0 2px; flex-shrink: 0; }
.cal-mcell-num {
  min-width: 22px; height: 20px; line-height: 20px; padding: 0 6px; border-radius: 999px;
  text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cal-mcell-num:hover { background: var(--bg-warm); color: var(--ink); }
.cal-mcell.other-month .cal-mcell-num { color: var(--ink-mute); font-weight: 400; }
.cal-mcell.today .cal-mcell-num { background: var(--accent); color: #fff; font-weight: 600; }
.cal-mcell.today .cal-mcell-num:hover { background: #e2650f; color: #fff; }

.cal-mcell-events { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 6px; overflow: hidden; }
/* Getimede events: puntje + tijd + titel op transparante achtergrond (Google) */
.cal-mchip {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 18px; padding: 0 5px; border-radius: 4px;
  font-size: 11.5px; line-height: 18px; color: var(--ink); cursor: pointer; overflow: hidden;
}
.cal-mchip:hover { background: var(--bg-warm); }
.cal-mchip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-mchip-time { color: var(--ink-mute); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-mchip-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Hele-dag-events: gevulde balk met witte tekst (Google) */
.cal-mchip.allday { color: #fff; }
.cal-mchip.allday .cal-mchip-dot { display: none; }
.cal-mchip.allday .cal-mchip-time { color: rgba(255, 255, 255, 0.85); }
.cal-mchip.allday:hover { filter: brightness(0.93); }
.cal-mchip.done { opacity: 0.55; }
.cal-mchip.done .cal-mchip-title { text-decoration: line-through; }
.cal-mmore {
  flex-shrink: 0; height: 17px; line-height: 17px; padding: 0 5px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-mmore:hover { background: var(--bg-warm); color: var(--ink); }

/* "Meer"-popover bij veel events op hetzelfde moment */
.cal-pop { position: fixed; z-index: 4000; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 36px rgba(57, 57, 57,.18); padding: 10px; width: 248px; max-height: 320px; overflow-y: auto; }
.cal-pop-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cal-pop-item { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 7px; cursor: pointer; font-size: 12.5px; }
.cal-pop-item:hover { background: var(--bg-warm); }
.cal-pop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-pop-item.done .cal-pop-text { text-decoration: line-through; opacity: 0.6; }

.view-toggle {
  display: inline-flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
}
.view-toggle button {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 5px;
  cursor: pointer;
}
.view-toggle button.active {
  background: var(--bg-warm);
  color: var(--ink);
}

.act-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.act-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.act-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--border-soft);
}
.act-section-header.overdue { color: var(--danger); }
.act-section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-cream);
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0;
}
.act-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
}
.act-pager button {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
}
.act-pager button:hover:not(:disabled) { background: var(--bg-cream); }
.act-pager button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.act-pager button:disabled { opacity: 0.4; cursor: default; }
.act-pager-ellipsis { padding: 0 2px; color: var(--ink-mute); font-size: 12px; }
.act-row {
  display: grid;
  grid-template-columns: 36px 100px 130px 1fr 220px 110px;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  cursor: pointer;
}
.act-linked { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-linked-org { color: var(--ink-mute); font-weight: 400; }
.act-row:last-child { border-bottom: none; }
.act-row:hover { background: var(--bg-cream); }
.act-row.done { opacity: 0.55; }
.act-row.done .act-subject { text-decoration: line-through; }
.act-checkbox-circle {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  transition: all 0.15s;
}
.act-checkbox-circle:hover { border-color: var(--success); }
.act-checkbox-circle.checked {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.act-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: capitalize;
}
.act-due { font-size: 12px; color: var(--ink-soft); }
.act-due.overdue { color: var(--danger); font-weight: 600; }
.act-subject { color: var(--ink); font-weight: 500; }
.act-linked { font-size: 12px; color: var(--accent); }
.act-owner { font-size: 12px; color: var(--ink-mute); }

.page-view { display: none; height: 100%; }
/* min-height:0 lets the active view shrink to its flex parent so descendant
   scroll areas (e.g. board columns) can bound their height instead of
   overflowing the viewport. */
.page-view.active { display: flex; flex: 1; min-height: 0; }


/* ===== Agenda-modus: zo veel scherm als mogelijk voor de kalender =====
   Google heeft één balk boven het raster; wij hadden er drie (page-header,
   filters, agenda-navigatie). In agenda-modus schuift de navigatie in de
   page-header (#cal-toolbar-slot) en verdwijnt de bodem-padding die de
   lijstweergave voor haar pager nodig heeft. */
.act-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
#cal-toolbar-slot:empty { display: none; }
#cal-toolbar-slot { flex: 1; min-width: 0; }
#cal-toolbar-slot .cal-toolbar { margin-bottom: 0; }

.page-body.cal-open { padding-top: 14px; padding-bottom: 18px; }
.page-body.cal-open .page-header { align-items: center; margin-bottom: 10px; }
.page-body.cal-open .act-header-left { flex: 1; }
.page-body.cal-open #activities-summary { display: none; }   /* telling hoort bij de lijst */
.page-body.cal-open .toolbar { margin-bottom: 8px; }
.page-body.cal-open #activities-week-view { margin-top: 0 !important; }

/* Filterchips staan in agenda-modus IN de agenda-balk (JS verhuist ze), rechts
   naast de weergave-switch — zoals Google zijn hulpmiddelen rechts groepeert.
   De balk mag afbreken op smalle schermen i.p.v. de titel te verdringen. */
#cal-toolbar-slot #act-filters-toolbar { margin: 0 0 0 auto; flex-wrap: wrap; }
#cal-toolbar-slot .cal-viewswitch { margin-left: 12px; }

/* ===== Items uit een gekoppelde agenda =====
   Bewust niet gevuld met een reekskleur zoals CRM-activiteiten: een omlijnd blok met een
   streep links leest meteen als "dit hoort niet bij het CRM en is hier niet te wijzigen". */
.cal-event.ext {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-mute);
  color: var(--ink-soft);
  box-shadow: none;
}
.cal-event.ext .cal-ev-time { color: var(--ink-mute); opacity: 1; }
.cal-event.ext .cal-ev-title { font-weight: 500; }
.cal-event.ext:hover { box-shadow: 0 2px 8px rgba(57,57,57,.14); }

.cal-mchip.ext {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-mute);
  color: var(--ink-soft);
}
.cal-pop-item.ext { color: var(--ink-soft); }

/* Aan/uit voor de gekoppelde agenda, naast de dag/week/maand-schakelaar. */
.cal-ext-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px; margin-left: 8px;
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 12.5px; color: var(--ink-mute); cursor: pointer;
  white-space: nowrap;
}
.cal-ext-toggle:hover { color: var(--ink); border-color: var(--ink-mute); }
.cal-ext-toggle .cal-ext-dot {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--white);
}
.cal-ext-toggle.on { color: var(--ink); border-color: var(--ink-mute); font-weight: 500; }
.cal-ext-toggle.on .cal-ext-dot { background: var(--ink-mute); border-color: var(--ink-mute); }

/* Keuzelijst met agenda's (eigen + van collega's), zoals de zijbalk van Google Agenda. */
.cal-cals-wrap { position: relative; display: inline-flex; }
.cal-cals-pop {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 500;
  min-width: 232px; padding: 6px;
  background: var(--white); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: 0 12px 32px rgba(57,57,57,.16);
}
.cal-cals-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--ink-soft);
}
.cal-cals-item:hover { background: var(--bg-warm); }
.cal-cals-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cal-cals-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-cals-hint { font-size: 10.5px; color: var(--ink-mute); flex-shrink: 0; }
.cal-cals-foot { border-top: 1px solid var(--border-soft); margin-top: 5px; padding: 7px 8px 3px; }
.cal-cals-foot span { font-size: 11.5px; color: var(--accent); cursor: pointer; font-weight: 600; }
.cal-cals-foot span:hover { text-decoration: underline; }

/* Kort oplichten van het verzoek waar een melding naar verwees, zodat je op een volle
   instellingenpagina meteen ziet waar het over gaat. */
@keyframes calShareFocus {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,119,34,0); }
  15%, 65% { box-shadow: 0 0 0 3px rgba(245,119,34,.35); }
}
.cal-share-focus { animation: calShareFocus 2.4s ease-out; border-radius: 8px; }