/* Mijn rooster — dag-, week- en maandweergave */

.roster-head { flex: none; padding: 14px 17px 0; border-bottom: 1px solid var(--line-soft); }
.roster-head__top { display: flex; justify-content: flex-end; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.icon-btn:active { background: rgba(255, 255, 255, 0.06); }
.icon-btn .ms { font-size: 30px; }
.roster-head__sub { font-size: 15.5px; color: var(--text-2); margin-top: 18px; }
.roster-head__row { display: flex; align-items: center; gap: 12px; margin: 10px 0 22px; }
.roster-head__month { flex: 1; font-size: 23px; font-weight: 700; }
.roster-head__row .icon-btn .ms { font-size: 28px; }

.segmented { display: flex; padding: 2px; border-radius: 12px; background: var(--surface-2); }
.segmented button {
  width: 34px; height: 30px; border-radius: 9px;
  font-size: 15px; color: var(--text-2);
  transition: background 180ms, color 180ms;
}
.segmented button.is-active { background: var(--accent); color: #0e2a4d; }

/* Dagstrip (dagweergave) en weekkop */
.daystrip { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 10px 3px; border-bottom: 1px solid var(--line-soft); }
.weekhead { flex: none; display: grid; grid-template-columns: var(--label-w) repeat(5, 1fr); padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.day-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 0 8px; border-radius: 14px;
  font-size: 13px; color: var(--text-muted);
  transition: background 180ms;
}
.day-btn__num { font-size: 13.5px; color: var(--text-2); padding: 2px 9px; border-radius: 10px; }
.day-btn__dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.day-btn.has-items .day-btn__dot { background: var(--primary); }
.day-btn.is-today .day-btn__num { background: var(--today-pill); }
.day-btn.is-selected { background: var(--primary); color: #fff; }
.day-btn.is-selected .day-btn__num { background: none; color: #fff; }
.day-btn.is-selected .day-btn__dot { background: #fff; }
.weekhead .day-btn { padding: 0; }
.weekhead .day-btn.is-today .day-btn__num { padding: 2px 14px; }

/* Tijdlijn */
.timeline { position: relative; }
.timeline__slot { position: absolute; left: 0; right: 0; height: 0; }
.timeline__slot::after { content: ''; position: absolute; left: var(--label-w); right: 0; top: 0; border-top: 1px solid var(--line-soft); }
.timeline__label { position: absolute; left: 0; width: var(--label-w); top: -9px; padding-left: 4px; font-size: 13.5px; color: #a7b1c6; }
.timeline__cols { position: absolute; left: var(--label-w); right: 8px; top: 0; bottom: 0; display: grid; }
.timeline__col { position: relative; }
.timeline__col + .timeline__col { border-left: 1px solid var(--line-soft); }
.work-strip { position: absolute; left: 3px; width: 14px; background: var(--work-strip); border-left: 1px solid var(--work-strip-edge); }

.event {
  position: absolute;
  border-radius: 14px;
  background: var(--event-bg);
  color: var(--event-text);
  overflow: hidden;
  text-align: left;
  padding: 10px 10px 10px 26px;
  transition: filter 150ms;
}
.event:active { filter: brightness(0.92); }
.event::before { content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 4px; border-radius: 3px; background: #121418; }
.event__title { font-size: 16px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.event .chips { margin-top: 6px; gap: 6px 6px; }
.event .chip { background: var(--event-chip); color: #f4f6fa; padding: 2px 7px; }
.event--unavailable { background: var(--orange); color: #fff; }
.event--unavailable::before { background: #fff; }
.event--unavailable .event__title { font-weight: 400; }

/* Kort blok (< 30 min): titel verticaal gecentreerd, streepje loopt mee */
.timeline .event--kort { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.timeline .event--kort::before { top: 4px; bottom: 4px; }

/* Vandaag (uit Mijn dag): realisatie vs planning (R3).
   Realisatie = gestart, op de werkelijke tijd, gevuld (zoals de app). Planning = nog te doen, open omlijnd. */
.event--realisatie { background: var(--event-bg); color: var(--event-text); }
.event--planning { background: rgba(227, 235, 246, .07); color: var(--text-2); box-shadow: inset 0 0 0 1.5px rgba(227, 235, 246, .42); }
.event--planning::before { background: var(--accent); opacity: .75; }
.event--planning .chip { background: var(--chip-dark); color: var(--text-2); }
.event--unavailable.event--planning { background: rgba(227, 131, 0, .1); color: #ffd3a1; box-shadow: inset 0 0 0 1.5px var(--orange); }
.event--unavailable.event--planning::before { background: var(--orange); }
.event--loopt { box-shadow: inset 0 0 0 2px var(--primary); }

/* Niet gedaan, maar blijft staan: gaat niet door of no show (altijd een keuze van de gebruiker) */
.event--vervallen, .event--noshow { background: var(--surface-2); color: var(--text-dim); box-shadow: none; opacity: .8; }
.event--vervallen::before, .event--noshow::before { background: var(--text-dim); }
.event--vervallen .event__title, .event--noshow .event__title { text-decoration: line-through; font-weight: 400; }
.event--vervallen .chip, .event--noshow .chip { background: transparent; color: var(--text-dim); }

/* Ongepland toegevoegd via "+" in Mijn dag: realisatie, met een gestippelde rand om het te onderscheiden */
.event--ongepland { outline: 1.5px dashed var(--primary); outline-offset: -1.5px; }
.event--ongepland::before { background: var(--primary); }
.event--ongepland .event__teken { color: var(--primary); }

/* Knelpunt (R4): staat nog open, of een realisatie valt eroverheen. Geen actie, alleen zichtbaar. */
.event.event--knelpunt { background: rgba(244, 151, 142, .1); color: var(--text); box-shadow: inset 0 0 0 2px var(--salmon); }
.event.event--knelpunt::before { background: var(--salmon); opacity: 1; }
.event__teken { font-size: 14px; margin-right: 3px; vertical-align: -2px; color: #2b6cb0; }
.event--planning .event__teken, .event--knelpunt .event__teken { color: var(--accent); }
.event__teken--knel, .event--knelpunt .event__teken--knel { color: var(--salmon); }

/* Detailblad van een activiteit van vandaag: laag, tijden, locatie en handmatig verplaatsen (R8) */
.dagregel__laag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); color: var(--text-2); }
.dagregel__laag--realisatie { background: var(--event-bg); color: var(--event-text); border-color: transparent; }
.dagregel__laag--knel { border-color: var(--salmon); color: var(--salmon); }
.verplaats { display: flex; gap: 10px; padding: 14px 17px 4px; }
.verplaats button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 700; }
.verplaats button:active { transform: scale(.98); }
.verplaats button .ms { font-size: 18px; }

/* Dag: zoals de echte app — titel + twee compacte chiprijen passen binnen één half uur */
.timeline:not(.timeline--week) .event { padding: 5px 8px 5px 28px; border-radius: 10px; }
.timeline:not(.timeline--week) .event::before { left: 12px; top: 5px; bottom: 5px; }
.timeline:not(.timeline--week) .event__title { font-size: 15px; line-height: 18px; }
.timeline:not(.timeline--week) .event .chips { margin-top: 3px; gap: 5px; }
.timeline:not(.timeline--week) .event .chip { gap: 5px; padding: 0 6px; font-size: 11px; line-height: 17px; border-radius: 4px; }
.timeline:not(.timeline--week) .event .chip .ms { font-size: 13px; }

/* Week: compacte events met alleen iconen */
.timeline--week .event { padding: 8px 6px 8px 22px; border-radius: 10px; }
.timeline--week .event::before { left: 8px; top: 8px; bottom: 8px; }
.timeline--week .event__title { word-break: break-all; }
.timeline--week .event .chips { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.timeline--week .event .chip { width: 28px; height: 22px; padding: 0; justify-content: center; border-radius: 6px; }

.now-line { position: absolute; left: -6px; right: -8px; height: 0; border-top: 2px solid var(--primary); z-index: 5; pointer-events: none; }
.now-line::before { content: ''; position: absolute; left: -6px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }

/* Maand */
.month { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.month__head { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--text-muted); text-align: center; }
.month__grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; }
.month__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 10px 0 14px;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  font-size: 18px; font-weight: 700;
}
.month__cell:nth-child(7n) { border-right: 0; }
.month__cell.is-outside { color: var(--text-dim); font-weight: 400; }
.month__cell.is-today { background: #0e2f57; }
.month__num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.month__cell.is-today .month__num { background: var(--primary); }
.month__dots { display: flex; gap: 3px; min-height: 7px; }
.month__dots i { width: 7px; height: 7px; border-radius: 50%; background: #e3e5ea; }
.month__dots i.is-orange { background: var(--orange); }