html, body {
  margin: 0;
  padding: 0;
  background: #0b1220;
  color: #eaf2ff;
  font-family: system-ui, Segoe UI, Roboto, Arial;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.sub {
  opacity: .8;
  margin-bottom: 16px;
}

.card {
  background: #121a2a;
  border: 1px solid #1b2942;
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary {
  font-weight: 600;
  font-size: 18px;
}

.date {
  opacity: .9;
}

.btn {
  background: #1f3b7a;
  border: none;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(9, 14, 25, .78);
  z-index: 9999;
}

.overlay.active {
  display: flex;
}

.toast {
  background: #182540;
  border: 1px solid #27406c;
  color: #fff;
  padding: 24px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  min-width: min(90vw, 520px);
}

.toast h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.toast p {
  margin: 0;
  font-size: 18px;
  opacity: .95;
}

details {
  margin-top: 20px
}

details > summary {
  cursor: pointer;
  margin-bottom: 10px
}

.field {
  display: flex;
  gap: 8px;
  margin: 8px 0
}

.field input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #27406c;
  background: #0e172a;
  color: #fff
}

.field label {
  width: 160px;
  padding-top: 10px;
  opacity: .85
}

.fc-col-header-cell{
  color: #0b1220;
}
#calendar { max-width: 900px; margin: 1rem auto; }
/* === FullCalendar mobile tuning === */

/* Toolbar compacter en responsive */
.fc .fc-toolbar.fc-header-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  row-gap:6px;
}
.fc .fc-toolbar-title{
  margin:0;
  font-weight:700;
  /* schaal tussen 16 en 22px op basis van viewport */
  font-size:clamp(16px, 4.2vw, 22px);
  line-height:1.2;
}

/* Buttons kleiner, minder padding */
.fc .fc-button, .fc .fc-button-primary{
  padding:6px 10px;
  font-size:14px;
  border-radius:10px;
  box-shadow:none;
}
.fc .fc-button-group>.fc-button{
  padding:6px 10px;
}

/* Hele kleine schermen: nog compacter */
@media (max-width:480px){
  .fc .fc-button, .fc .fc-button-primary{ padding:4px 8px; font-size:12px; }
  .fc .fc-toolbar-title{ font-size:16px; }
}

/* Dagkoppen + dag-nummers iets kleiner */
.fc .fc-col-header-cell-cushion{ font-size:13px; padding:6px 0; }
.fc .fc-daygrid-day-number{ font-size:12px; padding:4px 6px; }

/* Minimale celhoogte zodat events passen zonder te rekken */
.fc .fc-daygrid-day-frame{ min-height:64px; }

/* Events als nette pilltjes */
.fc .fc-event{
  border:0;
  border-radius:8px;
  padding:2px 6px;
  font-size:12px;
  line-height:1.3;
}
.fc .fc-event .fc-event-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Donkere kaart / randje voor je calendar-wrapper (optioneel) */
.calendar-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:16px;
}

/* FullCalendar in dark theme: subtiele randen */
.fc-theme-standard td, .fc-theme-standard th{
  border-color: rgba(255,255,255,0.08);
}
.fc .fc-scrollgrid{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
/* Today highlight — dark mode zichtbaar en toegankelijk */
:root{
  /* pas gerust aan naar je eigen palet */
  --today-bg: rgba(80,160,255,0.20);   /* blauwe gloed */
  --today-br: rgba(80,160,255,0.55);   /* rand */
  --today-text: #e6f0ff;               /* dagnummer-kleur op today */
}

/* cel zelf */
.fc .fc-day-today{
  background: var(--today-bg) !important;
  position: relative;
  outline: 1px solid var(--today-br);
  outline-offset: -1px;
}

/* subtiele glow aan binnenkant */
.fc .fc-day-today .fc-daygrid-day-frame{
  box-shadow: inset 0 0 0 1px rgba(80,160,255,0.25),
  inset 0 0 18px rgba(80,160,255,0.18);
}

/* dagnummer beter contrast op 'today' */
.fc .fc-day-today .fc-daygrid-day-number{
  color: var(--today-text);
  font-weight: 700;
}

/* eventchips op 'today' iets meer pop */
.fc .fc-day-today .fc-event{
  filter: brightness(1.05) saturate(1.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

/* wanneer today ook is-selected (bv. via keyboard) */
.fc .fc-daygrid-day.fc-day-today.fc-daygrid-day-focus{
  outline: 2px solid var(--today-br);
  outline-offset: -2px;
}

/* kleine schermen: iets sterkere achtergrond */
@media (max-width: 480px){
  .fc .fc-day-today{ background: rgba(80,160,255,0.25) !important; }
}