/* ==========================================================================
   Planner-showcase — de Royaal Planner zoals die in InSite staat.
   Klantherkenning gebeurt via een 3px kleurlijn links van een blok, niet via
   een gekleurd vlak. Zie afwijking E onderaan css/royaal.css.
   ========================================================================== */

.planner{display:grid;gap:var(--sp-5)}

/* kleurlijnen per klant — ontzadigde functionele kleuren uit het design system */
.planner{
  --k1:var(--royaal-blue-600);
  --k2:var(--royaal-green-600);
  --k3:#9A6E14;
  --k4:var(--royaal-grey-400);
  --k5:#9B3A32;
  --k6:var(--royaal-gold-600);
}

/* ----------------------------------------------------------- kopbalk app */
.pl-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);
  padding:var(--sp-4);border-bottom:1px solid var(--color-border-inverse)
}
.pl-title{font-size:var(--fs-h4);font-weight:300}
.pl-title strong{font-weight:700;color:var(--royaal-gold-600)}
.pl-title span{margin-left:var(--sp-3);font-size:var(--fs-caption);color:var(--color-text-inverse-muted);font-weight:400}
.pl-views{margin-left:auto;display:flex;gap:2px;border:1px solid var(--color-border-inverse);border-radius:var(--radius-md);padding:2px}
.pl-views span{
  font-size:var(--fs-caption);padding:5px var(--sp-3);border-radius:2px;
  color:var(--color-text-inverse-muted);white-space:nowrap
}
.pl-views span[data-on]{background:var(--royaal-white);color:var(--royaal-black);font-weight:700}

/* -------------------------------------------------------------- raster */
.pl-grid{padding:var(--sp-4);overflow-x:auto;min-height:430px}
.pl-row{
  display:grid;grid-template-columns:168px repeat(5,minmax(96px,1fr));
  border-top:1px solid var(--color-border-inverse)
}
.pl-row:first-child{border-top:0}
.pl-row.pl-days{border-top:0}
.pl-days>div{
  padding:0 var(--sp-2) var(--sp-3);font-size:var(--fs-metadata);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-inverse-muted)
}
.pl-days .pl-day b{display:block;font-size:var(--fs-body);letter-spacing:0;color:var(--royaal-white);font-weight:300;margin-top:2px}
.pl-days .pl-day[data-today] b{color:var(--royaal-gold-600)}

.pl-who{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;display:grid;gap:2px;align-content:center}
.pl-who .n{font-size:var(--fs-body-sm);font-weight:700}
.pl-who .b{font-size:var(--fs-metadata);color:var(--color-text-inverse-muted);font-variant-numeric:tabular-nums}
.pl-who .b i{font-style:normal;opacity:0;transition:opacity var(--dur-base) var(--ease)}

.pl-cell{padding:var(--sp-2) 3px;display:grid;gap:3px;align-content:start;min-height:56px}

.pl-block{
  position:relative;
  border-left:3px solid var(--k4);background:rgba(255,255,255,.06);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:5px var(--sp-2);display:grid;gap:1px;
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),background-color var(--dur-fast) var(--ease)
}
.pl-block .t{font-size:var(--fs-metadata);font-weight:700;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-block .s{font-size:10px;line-height:13px;color:var(--color-text-inverse-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-block[data-k="1"]{border-left-color:var(--k1)}
.pl-block[data-k="2"]{border-left-color:var(--k2)}
.pl-block[data-k="3"]{border-left-color:var(--k3)}
.pl-block[data-k="4"]{border-left-color:var(--k4)}
.pl-block[data-k="5"]{border-left-color:var(--k5)}
.pl-block[data-k="6"]{border-left-color:var(--k6)}
.pl-block[data-vrij]{background:transparent;border-left-color:transparent;border-left-style:dashed;
  border-left-color:var(--color-border-inverse)}
.pl-block[data-vrij] .t{color:var(--color-text-inverse-muted);font-weight:400}

/* dubbele boeking */
.pl-block[data-conflict]{position:relative}
.pl-warn{
  display:none;align-items:center;gap:4px;margin-top:3px;
  font-size:10px;line-height:13px;font-weight:700;color:var(--royaal-gold-600)
}
.pl-warn svg{width:11px;height:11px;flex:0 0 auto}

/* ------------------------------------------------------- rechtenbanner */
.pl-rights{
  margin:0 var(--sp-4) var(--sp-4);
  border:1px solid var(--color-border-inverse);border-top:3px solid var(--royaal-gold-600);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:var(--sp-4);
  display:none;gap:var(--sp-2);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)
}
.pl-rights .tag{font-size:var(--fs-metadata);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--royaal-gold-600)}
.pl-rights h5{margin:0;font-size:var(--fs-body);font-weight:700;line-height:22px}
.pl-rights p{font-size:var(--fs-body-sm);line-height:21px;color:var(--color-text-inverse-muted);max-width:72ch}

.pl-foot{padding:0 var(--sp-4) var(--sp-4);font-size:var(--fs-metadata);color:var(--color-text-inverse-muted)}

/* ---------------------------------------------------------- staten */
/* leeg: alleen het raster */
/* plannen: blokken komen binnen, per kolom iets later */
.planner[data-step="plannen"] .pl-block,
.planner[data-step="bezetting"] .pl-block,
.planner[data-step="slepen"] .pl-block,
.planner[data-step="conflict"] .pl-block,
.planner[data-step="rechten"] .pl-block{opacity:1;transform:none}
.pl-cell[data-c="1"] .pl-block{transition-delay:0ms}
.pl-cell[data-c="2"] .pl-block{transition-delay:90ms}
.pl-cell[data-c="3"] .pl-block{transition-delay:180ms}
.pl-cell[data-c="4"] .pl-block{transition-delay:270ms}
.pl-cell[data-c="5"] .pl-block{transition-delay:360ms}

/* bezetting: percentages verschijnen */
.planner[data-step="bezetting"] .pl-who .b i,
.planner[data-step="slepen"] .pl-who .b i,
.planner[data-step="conflict"] .pl-who .b i,
.planner[data-step="rechten"] .pl-who .b i{opacity:1}

/* conflict: de dubbele boeking wordt gemarkeerd */
.planner[data-step="conflict"] .pl-block[data-conflict],
.planner[data-step="rechten"] .pl-block[data-conflict]{background:rgba(201,168,76,.14);border-left-color:var(--royaal-gold-600)}
.planner[data-step="conflict"] .pl-warn,
.planner[data-step="rechten"] .pl-warn{display:flex}

/* rechten: dezelfde pagina, andere gebruiker — alleen de eigen regel */
.planner[data-step="rechten"] .pl-row[data-emp]:not([data-self]){display:none}
.planner[data-step="rechten"] .pl-rights{display:grid;opacity:1;transform:none}
.planner[data-step="rechten"] .pl-grid{min-height:0}
.planner[data-step="rechten"] .pl-views span{background:transparent;color:var(--color-text-inverse-muted);font-weight:400}
.planner[data-step="rechten"] .pl-views span[data-self-on]{background:var(--royaal-white);color:var(--royaal-black);font-weight:700}
.planner[data-step="rechten"] .pl-user{color:var(--royaal-gold-600)}

.pl-user{font-size:var(--fs-caption);color:var(--color-text-inverse-muted);transition:color var(--dur-base) var(--ease)}
.pl-name[data-role="self"]{display:none}
.planner[data-step="rechten"] .pl-name[data-role="planner"]{display:none}
.planner[data-step="rechten"] .pl-name[data-role="self"]{display:inline}

@media (max-width:640px){
  .pl-row{grid-template-columns:120px repeat(5,minmax(84px,1fr))}
  .pl-grid{padding:var(--sp-3)}
}

/* ------------------------------------------------- slepen en overdragen */
/* Een blok schuift naar de gestippelde landingsplek; daarna is de landing
   het echte blok. Motion is functioneel: het laat de handeling zien. */
.pl-block[data-move],.pl-block[data-handover]{
  transition:opacity var(--dur-base) var(--ease),transform 520ms var(--ease),
             box-shadow var(--dur-base) var(--ease),background-color var(--dur-fast) var(--ease);
}
.pl-ghost{
  border-left-style:dashed;background:transparent;
  opacity:0!important;transition:opacity var(--dur-base) var(--ease)
}
.pl-ghost .t,.pl-ghost .s{opacity:.55}

/* stap 4: het blok wordt opgepakt en verplaatst */
.planner[data-step="slepen"] .pl-ghost{opacity:1!important}
/* tijdens het slepen is de landingsplek een leeg gestippeld vak */
.planner[data-step="slepen"] .pl-ghost .t,
.planner[data-step="slepen"] .pl-ghost .s{opacity:0}
.planner[data-step="slepen"] .pl-block[data-move]{
  transform:translate(calc(100% + 10px),-7px);
  box-shadow:0 10px 24px rgba(0,0,0,.55);background:rgba(255,255,255,.16);z-index:3
}
.planner[data-step="slepen"] .pl-block[data-handover]{
  transform:translate(6px,116px);
  box-shadow:0 10px 24px rgba(0,0,0,.55);background:rgba(255,255,255,.16);z-index:3
}
.planner[data-step="slepen"] .pl-hint{display:grid;opacity:1;transform:none}

/* na het slepen: de landing is het blok, het origineel is weg */
.planner[data-step="conflict"] .pl-block[data-move],
.planner[data-step="rechten"] .pl-block[data-move],
.planner[data-step="conflict"] .pl-block[data-handover],
.planner[data-step="rechten"] .pl-block[data-handover]{opacity:0;pointer-events:none}
.planner[data-step="conflict"] .pl-ghost,
.planner[data-step="rechten"] .pl-ghost{
  opacity:1!important;border-left-style:solid;background:rgba(255,255,255,.06)
}
.planner[data-step="conflict"] .pl-ghost .t,
.planner[data-step="conflict"] .pl-ghost .s,
.planner[data-step="rechten"] .pl-ghost .t,
.planner[data-step="rechten"] .pl-ghost .s{opacity:1}

/* toelichting bij de sleepstap */
.pl-hint{
  margin:0 var(--sp-4) var(--sp-4);
  border:1px solid var(--color-border-inverse);border-top:3px solid var(--royaal-gold-600);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:var(--sp-4);
  display:none;gap:var(--sp-2);opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)
}
.pl-hint .tag{font-size:var(--fs-metadata);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--royaal-gold-600)}
.pl-hint p{font-size:var(--fs-body-sm);line-height:21px;color:var(--color-text-inverse-muted);max-width:72ch}