/* MAANDKALENDER */
.card{background:#fff;border-radius:24px;padding:20px 24px;box-shadow:0 2px 12px rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.04);}
.card-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#ccc;margin-bottom:14px;font-weight:600;}
.komende-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#ccc;font-weight:600;margin-bottom:10px;}
.month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.month-title{font-size:16px;font-weight:500;color:#1e1c1a;}
.month-btn{background:none;border:none;cursor:pointer;font-size:18px;color:#ccc;padding:0 8px;}
.month-btn:hover{color:#1e1c1a;}
.cal-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:6px;}
.cal-header span{font-size:11px;color:#ccc;font-weight:600;text-transform:uppercase;padding:4px 0;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-day{border-radius:12px;padding:8px 4px;text-align:center;background:#f5f3f0;cursor:pointer;transition:background .2s;min-height:52px;display:flex;flex-direction:column;align-items:center;}
.cal-day:hover{background:#ebe8e3;}
.cal-day .dn{font-size:13px;color:#888;font-weight:400;}
.cal-day .ddots{display:flex;justify-content:center;gap:3px;margin-top:4px;flex-wrap:wrap;min-height:7px;}
.cal-day .ddot{width:6px;height:6px;border-radius:50%;}
.cal-day.today{background:#1e1c1a;}
.cal-day.today .dn{color:#fff;font-weight:700;}
.cal-day.today.has-events{background:#1e1c1a;box-shadow:0 0 0 2px #1e1c1a,0 0 0 4px #fff;}
.cal-day.today .dn{color:#fff;font-weight:600;}
.cal-day.othermonth .dn{color:#ddd;}
.cal-day.has-events{background:#ede8f5;}
.cal-day.today.has-events{background:#1e1c1a;}

/* POPUP */
.popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:100;align-items:flex-end;justify-content:center;}
.popup-overlay.open{display:flex;}
.popup{background:#fff;border-radius:28px 28px 0 0;padding:28px 24px 40px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;}
.popup-datum{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#bbb;font-weight:600;margin-bottom:6px;}
.popup h3{font-size:20px;font-weight:600;margin-bottom:20px;color:#1e1c1a;}
.popup-events{margin-bottom:18px;display:flex;flex-direction:column;gap:8px;}
.popup-event-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#f5f3f0;border-radius:14px;}
.popup-event-left{width:4px;align-self:stretch;border-radius:4px;flex-shrink:0;}
.popup-event-body{flex:1;}
.popup-event-titel{font-size:14px;font-weight:500;color:#1e1c1a;}
.popup-event-meta{font-size:12px;color:#bbb;margin-top:2px;display:flex;gap:8px;align-items:center;}
.popup-event-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;}
.popup-event-item .del{cursor:pointer;color:#ddd;font-size:18px;padding:0 4px;flex-shrink:0;}
.popup-event-item .del:hover{color:#e87090;}
.popup-divider{height:1px;background:#f0ede8;margin:16px 0;}
.popup-add-titel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bbb;font-weight:600;margin-bottom:10px;}
.popup-add{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.popup-add input,.popup-add select{padding:12px 14px;border-radius:14px;border:1.5px solid #ede8e3;font-family:Poppins,sans-serif;font-size:14px;outline:none;color:#1e1c1a;}
.popup-add input:focus,.popup-add select:focus{border-color:#1e1c1a;}
.popup-btns{display:flex;gap:8px;}
.btn-cancel{flex:1;padding:12px;border-radius:14px;border:1.5px solid #ede8e3;background:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:14px;color:#888;}
.btn-save{flex:2;padding:12px;border-radius:14px;border:none;background:#1e1c1a;color:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:14px;font-weight:500;}
.btn-save:hover{background:#3a3633;}

.icoon-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.icoon-btn{
  width:38px;height:38px;border-radius:10px;border:1.5px solid #ede8e3;
  background:#f5f3f0;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .15s;padding:6px;
}
.icoon-btn:hover{border-color:#1e1c1a;background:#f0ede8;}
.icoon-btn.actief{border-color:#1e1c1a;background:#1e1c1a;box-shadow:0 0 0 2px rgba(30,28,26,0.15);}
.icoon-btn.actief img{filter:invert(1);}
.icoon-btn img{width:22px;height:22px;object-fit:contain;}
.edit-btn{cursor:pointer;color:#bbb;font-size:13px;padding:0 4px;background:none;border:none;font-family:Poppins,sans-serif;}
.edit-btn:hover{color:#1e1c1a;}
.popup-edit-form{background:#f5f3f0;border-radius:14px;padding:14px;margin-top:6px;display:flex;flex-direction:column;gap:8px;}
.popup-edit-form input,.popup-edit-form select{padding:10px 14px;border-radius:12px;border:1.5px solid #ede8e3;font-family:Poppins,sans-serif;font-size:13px;outline:none;}
.popup-edit-form input:focus,.popup-edit-form select:focus{border-color:#1e1c1a;}
.popup-edit-btns{display:flex;gap:8px;}
.btn-edit-save{flex:2;padding:10px;border-radius:12px;border:none;background:#1e1c1a;color:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:13px;font-weight:500;}
.btn-edit-cancel{flex:1;padding:10px;border-radius:12px;border:1.5px solid #ede8e3;background:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:13px;color:#888;}
.icoon-gekozen{display:flex;align-items:center;gap:8px;margin-bottom:8px;min-height:24px;}
.icoon-gekozen img{width:20px;height:20px;}
.icoon-gekozen span{font-size:11px;color:#bbb;}

/* AGENDA */
.event-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid #f0ebe3;}
.event-row:last-child{border:none;}
.pbadge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:10px;}
.etitle{font-size:13px;font-weight:500;}
.etime{font-size:11px;color:#bbb;margin-top:1px;}

/* Nieuwe afspraak knop */
.btn-nieuw-afspraak{
  width:100%;padding:12px;border-radius:14px;
  border:1.5px dashed #e0e0e0;background:transparent;
  font-family:Poppins,sans-serif;font-size:13px;
  color:#bbb;cursor:pointer;transition:all .2s;
  margin-top:4px;
}
.btn-nieuw-afspraak:hover{border-color:#1e1c1a;color:#1e1c1a;background:#f5f3f0;}