:root{
  --left: 220px;
  --dayw: 100px;
}

/* ===== Titel & maandnavigatie ===== */
.o4r-headerbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
  font-size:1rem;
  font-weight:600;
  color:#000;
}
.o4r-monthname{
  text-transform:capitalize;
  letter-spacing:.5px;
}
.o4r-nav{
  border:none;
  background:#000;
  color:#fff;
  font-size:1rem;
  line-height:1;
  width:30px;
  height:30px;
  border-radius:6px;
  cursor:pointer;
  transition:background .2s;
}
.o4r-nav:hover{ background:#d6fa53; color:#000; }

/* ===== Legenda wrapper ===== */
.o4r-legendwrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}

.o4r-legendbar{
  background:none;
  border-radius:10px;
  padding:4px 6px;
  display:flex;
  flex-wrap:nowrap; /* alles op 1 regel */
  gap:6px;
  justify-content:center;
  overflow-x:auto; /* horizontaal scrollen indien nodig */
  flex:1;
}

/* ===== Compactere badges zodat alles op 1 regel past ===== */
.o4r-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:70px;          /* kleiner */
  padding:3px 6px;         /* compacter */
  border-radius:999px;
  font-weight:500;
  font-size:0.70rem;       /* kleiner lettertype */
  line-height:1.1;
  text-align:center;
  color:#000;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  height:38px;             /* iets lager */
}

.o4r-badge small{
  font-size:0.60rem;       /* kleiner */
  opacity:.85;
  margin-top:1px;
}

/* ===== Scrollbalken ===== */
.o4r-scroll-top, .o4r-scroll-bottom{
  overflow-x:auto;
  overflow-y:hidden;
  width:100%;
  height:14px;
  margin-top:2px;
}
.o4r-scroll-inner{height:1px;}

/* ===== Hoofdscroller ===== */
.o4r-scroller{
  overflow-y:auto;
  overflow-x:hidden;
  background:#dbeafe;
  padding:6px;
  border-radius:10px;
  width:100%;
  cursor:grab;
}
.o4r-scroller.o4r-dragging{
  cursor:grabbing;
  user-select:none;
}

/* ===== Tabel & rode lijn op vandaag ===== */
.o4r-table{
  position:relative;
  width:max-content;
  background:#fff;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.o4r-table::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:2px;
  background:#dc2626;
  z-index:4;
  left:calc(var(--left) + var(--today)*var(--dayw) + (var(--dayw)/2));
}

/* ===== Grid ===== */
.o4r-row{
  display:grid;
  grid-template-columns:var(--left) repeat(var(--days),var(--dayw));
  align-items:center;
}
.o4r-cell{
  border:1px solid #eee;
  min-height:34px;
  padding:.3rem .5rem;
  text-align:center;
  font-size:.85rem;
  box-sizing:border-box;
  overflow:visible;
}

/* Sticky kolom links */
.o4r-col-emp{
  position:sticky;
  left:-7px;
  z-index:10;
  background:#fff;
  text-align:left;
  padding-left:17px;
  box-shadow:2px 0 4px rgba(0,0,0,.08);
}

/* Dagenheader */
.o4r-head .o4r-col-day{
  background:#fafafa;
  font-weight:600;
  position:sticky;
  top:0;
  z-index:4;
}
.o4r-daydate{font-weight:600;}
.o4r-dayname{font-size:.8rem;opacity:.75}

/* ===== Alerts: rode glow ===== */
.o4r-daydate.o4r-alert{
  animation:o4r-glow 2s ease-in-out infinite alternate;
}
@keyframes o4r-glow{
  from { text-shadow:0 0 4px #ef4444,0 0 8px #ef4444; color:#000; }
  to   { text-shadow:0 0 14px #ef4444,0 0 26px #ef4444; color:#c00; }
}

/* Tooltip voor glow-dagen */
.o4r-tip{
  position:absolute;
  max-width:460px;
  background:#111827;
  color:#fff;
  padding:.8rem 1rem;
  border-radius:10px;
  font-size:.85rem;
  line-height:1.35;
  z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  white-space:pre-line;
  pointer-events:none;
  opacity:.95;
}

/* Zebra’s */
.o4r-func .o4r-cell,
.o4r-emp .o4r-cell{ background:#fff; }
.o4r-func.is-alt .o4r-cell,
.o4r-emp.is-alt .o4r-cell{ background:#f7f9fb; }

/* Interactie + pillen */
.o4r-cell--interactive{cursor:pointer;}
.o4r-pill{
  display:inline-block;
  min-width:90px;
  padding:.22rem .5rem;
  border-radius:10px;
  font-size:.78rem;
  line-height:1.1;
  color:#000;
  position:relative;
}
.o4r-dot{opacity:.45}

/* Popover */
.o4r-pop{
  position:absolute;
  background:#fff;
  border:1px solid #ccc;
  border-radius:10px;
  padding:12px 14px;
  z-index:99;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  width:420px;
  max-width:92vw;
}
.o4r-pop hr{border:none;border-top:1px solid #eee;margin:8px 0;}
.o4r-pop div{display:flex;justify-content:center;gap:8px;flex-wrap:nowrap;}
.o4r-btn{
  border:1px solid #ddd;
  background:#fff;
  padding:.35rem .75rem;
  border-radius:6px;
  cursor:pointer;
  font-size:.83rem;
  white-space:nowrap;
}
.o4r-btn:hover{background:#f3f4f6}
.o4r-danger{color:#b91c1c;border-color:#fecaca}
.o4r-danger:hover{background:#fee2e2}

/* Toast */
.o4r-toast{
  position:fixed;
  right:12px;
  bottom:12px;
  background:#111827;
  color:#fff;
  padding:.5rem .7rem;
  border-radius:8px;
  font-size:.85rem;
  opacity:.95;
}

/* Responsive */
@media (max-width:900px){
  :root{ --left:180px; --dayw:88px; }
  .o4r-badge{
    min-width:68px;
    padding:2px 6px;
    font-size:.68rem;
  }
}

@media (max-width:600px){
  :root{
    --left:160px;
    --dayw:80px;
  }
  .o4r-badge{
    min-width:64px;
    font-size:.65rem;
  }
  .o4r-pill{
    min-width:70px;
    font-size:.72rem;
  }
}

/* === NOTITIE POPUP AANPASSINGEN === */

.o4r-note-editor textarea,
.o4r-note-editor .wp-editor-area {
  width: 100% !important;
  min-height: 90px;
  box-sizing: border-box;
}

.o4r-note-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.o4r-note-btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #f8f8f8;
  transition: 0.15s;
}
.o4r-note-btn:hover { background:#e5e5e5; }
.o4r-note-btn.delete {
  border-color:#d22;
  color:#d22;
}
.o4r-note-btn.delete:hover { background:#ffe6e6; }

.o4r-pill.has-note::after {
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d62828;
  top:4px;
  right:6px;
  border:2px solid #fff;
}

.o4r-pill[data-note]:hover::before {
  content:attr(data-note);
  white-space:pre-wrap;
  background:#222;
  color:#fff;
  padding:5px 8px;
  border-radius:4px;
  position:absolute;
  top:125%;
  left:0;
  font-size:11px;
  z-index:100;
  min-width:120px;
  max-width:200px;
}

/* Onderste header */
.o4r-head-bottom {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fafafa;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.08);
}

/* =========================== */
/*     EXPORT BUTTON STYLING   */
/* =========================== */

.o4r-export-wrapper{
  text-align:center;
  margin:20px 0 10px 0;
}

#o4r-export{
  background:#1e3a8a;
  color:white;
  border:none;
  padding:10px 26px;
  border-radius:8px;
  font-size:1rem;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:.2s;
}
#o4r-export:hover{
  background:#3b82f6;
  transform:translateY(-2px);
}

.o4r-export-wrapper{
    text-align:center;
    margin:25px 0;
}

.o4r-export-btn{
    background:#1e3a8a;
    color:#fff;
    font-size:1rem;
    padding:12px 28px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    box-shadow:0 3px 8px rgba(0,0,0,.18);
    transition:.2s;
}

.o4r-export-btn:hover{
    background:#3b82f6;
    transform:translateY(-2px);
}