/* TOP1 — Resource Calendar (day timeline: rows = staff, columns = time).
   18 columns = 09:00 → 18:00 in 30-min slots. Appointments span columns. */
.cal-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); overflow:hidden;}
.cal-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); flex-wrap:wrap;}
.cal-date{display:flex; align-items:center; gap:10px;}
.cal-date .d-main{font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); letter-spacing:-0.02em;}
.cal-date .d-sub{font-size:var(--text-xs); color:var(--muted);}
.cal-nav{display:flex; gap:4px;}
.cal-nav button{width:32px; height:32px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); display:grid; place-items:center; color:var(--muted);}
.cal-nav button:hover{border-color:var(--border-strong); color:var(--fg);}

.cal-scroll{overflow-x:auto;}
/* grid layout var: first col = staff (180px), then N time columns */
.cal-grid{--slots:18; --slot-w:96px; --staff-w:200px; display:grid; grid-template-columns:var(--staff-w) repeat(var(--slots),var(--slot-w)); min-width:max-content;}

/* header row */
.cal-corner{position:sticky; left:0; z-index:3; background:var(--surface-2); border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:10px 14px; font-size:11px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; align-items:center;}
.cal-time{position:sticky; top:0; z-index:1; background:var(--surface-2); border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:8px 0 8px 8px; font-family:var(--font-mono); font-size:12px; color:var(--muted);}

/* staff cell (sticky first column) */
.cal-staff{position:sticky; left:0; z-index:2; background:var(--surface); border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:10px 14px; display:flex; align-items:center; gap:10px; min-height:84px;}
.cal-staff .nm{font-weight:600; font-size:var(--text-sm); color:var(--fg-strong); line-height:1.2;}
.cal-staff .role{font-size:11px; color:var(--muted);}
.cal-staff .util{margin-top:3px; font-size:10px; font-family:var(--font-mono); color:var(--subtle);}

/* lane = the time track for one staff row. spans all slot columns */
.cal-lane{position:relative; grid-column:2 / -1; border-bottom:1px solid var(--border); min-height:84px;
  background-image:repeating-linear-gradient(to right, transparent 0, transparent calc(var(--slot-w) - 1px), var(--border) calc(var(--slot-w) - 1px), var(--border) var(--slot-w));}
.cal-lane.off{background-color:var(--surface-2);}

/* appointment block — positioned via inline left/width (1 slot=96px,30min) */
.appt{position:absolute; top:6px; bottom:6px; border-radius:8px; padding:7px 9px; overflow:hidden; cursor:pointer;
  border:1px solid transparent; border-left-width:3px; font-size:12px; line-height:1.25;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast); display:flex; flex-direction:column; gap:2px;}
.appt:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); z-index:5;}
.appt .a-cust{font-weight:600; color:var(--fg-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.appt .a-svc{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.appt .a-time{font-family:var(--font-mono); font-size:10px; color:var(--muted);}

/* status colorways */
.appt.confirmed{background:var(--primary-soft); border-color:var(--brand-200); border-left-color:var(--primary);}
.appt.pending{background:var(--warning-bg); border-color:#f4d58a; border-left-color:var(--warning);}
.appt.cancelled{background:var(--surface-2); border-color:var(--border); border-left-color:var(--subtle); opacity:.7;}
.appt.cancelled .a-cust{text-decoration:line-through; color:var(--muted);}
.appt.noshow{background:var(--danger-bg); border-color:#f3b0b0; border-left-color:var(--danger);}
.appt.done{background:var(--success-bg); border-color:#a7e0b8; border-left-color:var(--success);}

/* now-line */
.cal-now{position:absolute; top:0; bottom:0; width:2px; background:var(--accent); z-index:4; pointer-events:none;}
.cal-now::before{content:""; position:absolute; top:-4px; left:-4px; width:10px; height:10px; border-radius:50%; background:var(--accent);}

/* legend */
.legend{display:flex; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-xs); color:var(--muted);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block;}

/* mini detail rows in drawer */
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:var(--text-sm);}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--muted);} .kv .v{font-weight:500; text-align:right;}