/* ══════════════════════════════════════════════════════════
   RIO'S BARBERSHOP — staff availability calendar
   ══════════════════════════════════════════════════════════ */

.calbar-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.calnav{display:flex; align-items:center; gap:7px}
.calnav button{
  min-width:32px; height:32px; padding:0 11px;
  border:1px solid var(--line); border-radius:2px; background:var(--card); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.calnav button:hover:not(:disabled){border-color:var(--white)}
.calnav button:disabled{opacity:.3; cursor:default}
.callabel{
  font-family:"Barlow Condensed",sans-serif; font-size:19px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; margin:0 6px; white-space:nowrap;
}

/* barber picker */
.calwhos{display:flex; gap:6px; flex-wrap:wrap}
.calwho{
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px;
  border:1px solid var(--line); border-radius:20px; background:var(--card); color:var(--dim);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.calwho img{width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:center 35%}
.calwho__av{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.3); color:var(--red); font-size:11px;
}
.calwho:hover{border-color:rgba(255,255,255,.4); color:var(--white)}
.calwho.is-on{border-color:var(--red); background:rgba(215,25,32,.13); color:var(--white)}

/* ── team summary ──────────────────────────────────────── */
.calteam{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:20px}
.calcard{padding:14px 15px; border:1px solid var(--line); border-radius:3px; background:var(--card)}
.calcard__top{display:flex; align-items:center; gap:11px}
.calcard__top img{width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:center 35%; border:1px solid var(--line)}
.calcard__n{font-family:"Barlow Condensed",sans-serif; font-size:17px; font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.calcard__r{font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-top:2px}
.calbar{height:4px; margin:13px 0 9px; background:rgba(255,255,255,.09); border-radius:2px; overflow:hidden}
.calbar span{display:block; height:100%; background:linear-gradient(90deg,var(--red),#F2565D)}
.calcard__m{font-size:11.5px; color:var(--muted)}
.calcard__m b{color:var(--white); font-weight:700}
.calcard__m i{font-style:normal; color:var(--red); margin:0 3px}
.calcard__d{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line-soft)}
.calcard__d dt{font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); padding-top:2px}
.calcard__d dd{font-size:12px; font-weight:600; text-align:right}
.calcard__next{color:var(--white); border-bottom:1px solid rgba(215,25,32,.6); transition:color .2s var(--ease)}
.calcard__next em{font-style:normal; color:var(--red)}
.calcard__next:hover{color:var(--red)}
.calcard__next.is-none{color:var(--muted); font-weight:400; border:0}

/* ── the grid ──────────────────────────────────────────── */
.calwrap{
  border:1px solid var(--line); border-radius:3px; background:var(--card);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
}
.calgrid{display:grid; grid-template-columns:52px repeat(7,minmax(96px,1fr)); min-width:740px}
.calcol{display:flex; flex-direction:column; border-left:1px solid var(--line-soft)}
.calcol--time{border-left:0; position:sticky; left:0; z-index:3; background:var(--card)}
.calcol.is-today{background:rgba(215,25,32,.045)}

.calhead{
  position:sticky; top:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  height:52px; padding:5px 4px;
  background:#0D121A; border-bottom:1px solid var(--line);
}
.calhead > span:first-child:not(.calhead__d){font-size:8.5px; letter-spacing:.14em; color:var(--muted)}
.calhead__d{font-size:9.5px; font-weight:700; letter-spacing:.16em; color:var(--muted)}
.calhead__n{font-family:"Barlow Condensed",sans-serif; font-size:19px; font-weight:700; line-height:1}
.calhead__t{font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#5C636C}
.calhead__t.is-off{color:#D08A34}
.calhead.is-today{background:#17121A; box-shadow:inset 0 -2px 0 var(--red)}
.calhead.is-today .calhead__d{color:var(--red)}

.calt{
  height:26px; display:flex; align-items:center; justify-content:flex-end;
  padding-right:8px; font-size:9.5px; font-variant-numeric:tabular-nums; color:#4E555E;
  border-top:1px solid transparent;
}
.calt.is-hour{color:var(--muted); border-top-color:var(--line-soft)}

.calc{height:26px; border-top:1px solid rgba(255,255,255,.045); position:relative}
.calc.is-closed{background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.03) 5px 10px)}
.calc.is-off{background:repeating-linear-gradient(45deg,rgba(208,138,52,.05) 0 5px,rgba(208,138,52,.11) 5px 10px)}
.calc.is-past{background:rgba(255,255,255,.02)}
.calc.is-booked{background:rgba(255,255,255,.055)}
.calc.is-mine{background:rgba(30,90,168,.28); border-top-color:rgba(30,90,168,.5)}
.calc.is-cont{border-top-color:transparent}

.calc__go{
  position:absolute; inset:1px; display:flex; align-items:center; justify-content:center;
  border-radius:2px; background:rgba(38,150,88,.16); border:1px solid rgba(56,190,116,.32);
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7FDCA4;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.calc__go:hover{background:var(--red); border-color:var(--red); color:#fff}
.calc__bk{
  position:absolute; inset:1px; display:flex; flex-direction:column; justify-content:center;
  padding:0 6px; overflow:hidden; white-space:nowrap;
}
.calc__bk b{font-size:10px; font-weight:700; letter-spacing:.04em}
.calc__bk em{font-style:normal; font-size:8.5px; color:#9DC2EE; text-overflow:ellipsis; overflow:hidden}

/* team view: one pip per barber */
.calc__pips{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px}
.calpip{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.13)}
.calpip.is-on{background:#4FCB86; box-shadow:0 0 5px rgba(79,203,134,.5)}
.calc.is-lvl0{background:rgba(255,255,255,.05)}
.calc.is-lvl1{background:rgba(38,150,88,.07)}
.calc.is-lvl2{background:rgba(38,150,88,.13)}
.calc.is-lvl3{background:rgba(38,150,88,.2)}
.calc .calc__go:has(.calc__pips){background:none; border:0}
.calc__go .calc__pips{position:static; inset:auto}

/* ── legend ────────────────────────────────────────────── */
.callegend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:11px; color:var(--muted)}
.callegend span{display:flex; align-items:center; gap:7px}
.calkey{width:17px; height:11px; border-radius:2px; flex:none}
.calkey--open{background:rgba(38,150,88,.2); border:1px solid rgba(56,190,116,.45)}
.calkey--booked{background:rgba(255,255,255,.075); border:1px solid var(--line)}
.calkey--mine{background:rgba(30,90,168,.35); border:1px solid rgba(30,90,168,.6)}
.calkey--off{background:repeating-linear-gradient(45deg,rgba(208,138,52,.08) 0 4px,rgba(208,138,52,.2) 4px 8px); border:1px solid rgba(208,138,52,.3)}
.calkey--closed{background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(255,255,255,.07) 4px 8px); border:1px solid var(--line)}

@media (max-width:900px){
  .calteam{grid-template-columns:1fr}
  .calbar-top{gap:12px}
  .callabel{font-size:16px}
  .calgrid{grid-template-columns:46px repeat(7,minmax(84px,1fr))}
}

.crew__cal{margin-top:11px}
.crew__cal a{
  font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--red); transition:color .2s var(--ease);
}
.crew__cal a:hover{color:var(--red-hi); text-decoration:underline; text-underline-offset:3px}