/* css/scheduling.css — styles owned by New visit, the visit page, Scheduling, Block time and Choose seats */

/* ---------- New visit: the visit customer and seats later ---------- */
.nv-cust{justify-content:space-between;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;gap:8px;flex-wrap:wrap}
.nv-new{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--muted-2)}
.nv-seathead{justify-content:space-between;gap:8px;flex-wrap:wrap}

/* ---------- Timeline: no seat yet and the cleaning gap ---------- */
.tl-row.room.unassigned{background:color-mix(in srgb,var(--warning) 8%,var(--card))}
.blk.unassigned{background:var(--card);border:1px dashed var(--warning);color:var(--text)}
.blk.unassigned .st{background:var(--warning)}
.gap{position:absolute;top:9px;bottom:9px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:repeating-linear-gradient(-45deg,transparent 0 3px,color-mix(in srgb,var(--info) 45%,transparent) 3px 5px);pointer-events:none}
.sw.gap-sw{background:repeating-linear-gradient(-45deg,transparent 0 2px,color-mix(in srgb,var(--info) 60%,transparent) 2px 4px)}

/* ---------- Visit page: package use messages ---------- */
.pkg-use{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.pkg-use p{margin:0}
.pu-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm)}

/* ---------- Block time: the visits in the way ---------- */
.way{margin-top:12px}
.way .way-note{margin:0;padding:0 var(--pad) 8px}
.way-list{list-style:none;margin:0;padding:0}
.way-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px var(--pad);border-top:1px solid var(--border)}
.way-list .who{display:flex;flex-direction:column;min-width:0}
.way-list .who a{font-weight:500}
.way-list .facts{grid-column:1;display:flex;gap:4px 14px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-soft)}
.way-list .facts span{display:inline-flex;align-items:center;gap:6px}
.way-list .facts .lucide{width:14px;height:14px;color:var(--text-muted)}
.way-list .acts{grid-column:2;grid-row:1 / span 2;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.way .anyway,.way .way-short{margin:12px var(--pad)}
.anyway-pick{border:0;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.anyway-pick label{gap:8px;align-items:flex-start}
.dialog .body .anyway-pick label{flex-wrap:nowrap} /* the radio stays beside its words, also in a narrow dialog */
.anyway-note{margin:8px 0 0}
@media (max-width:640px){ .way-list li{grid-template-columns:1fr} .way-list .acts{grid-column:1;grid-row:auto;justify-content:flex-start} }

/* ---------- Timeline bars: one bar across seat rows; the parts of a visit highlight together ---------- */
.blk.span,.gap.span{z-index:1}
.blk .lbl-parts{overflow:hidden;text-overflow:ellipsis;min-width:0}
.blk.span{align-items:flex-start;padding-top:6px}
.blk.span .lbl-parts{display:flex;flex-direction:column;white-space:nowrap;line-height:1.35}
.blk.span .lp{overflow:hidden;text-overflow:ellipsis}
.blk.span .sep{display:none}
.blk.span .st{margin-top:4px}
.blk.hl{outline:2px solid var(--info);outline-offset:-1px;z-index:2}

/* ---------- By room, like the staff's paper board: room boxes in fixed places, short rows; no free time ----------
   The grid keeps the admin's room order: one column under 768 px, two from 768 px, four from 1280 px. Boxes in a line share a height. */
.by-room{display:flex;flex-direction:column;gap:12px}
.br-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:768px){ .br-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1280px){ .br-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.card.tight .by-room{padding:0 var(--pad) var(--pad)}
.br-room{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);overflow:hidden;container-type:inline-size}
.br-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--muted-2);border-bottom:1px solid var(--border)}
.br-head h2,.br-head h3{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:600}
.br-head .muted{font-weight:400}
.br-room ul{list-style:none;margin:0;padding:0}
.br-room li+li{border-top:1px solid var(--border)}
/* A row: the start time, the name and the group, the mark; a "Private room" tag goes on a second line under the name. */
.br-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 8px;width:100%;min-height:var(--row-h);padding:6px 12px;border:0;background:none;color:inherit;font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
.br-row:hover{background:var(--muted-2)}
.br-row:focus-visible{outline-offset:-2px}
.br-row .t{min-width:5.25em;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.br-row .lbl-parts{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-row .nm{font-weight:600}
.br-row .tag{grid-column:2;justify-self:start;height:20px}
.br-none{margin:0;padding:10px 12px;font-size:var(--fs-sm);color:var(--text-muted)}
/* In a narrow box (four across) the name has its own line and the group type and number of people go under it. */
@container (max-width:340px){ .br-row .lbl-parts{display:flex;flex-direction:column;line-height:1.35} .br-row .lp{overflow:hidden;text-overflow:ellipsis} .br-row .sep{display:none} }
/* Today's switch, Room timeline | By room. The slot for the window buttons is empty in By room. On a phone the heading has its own line. */
.rooms-head > span:empty{display:none}
@media (max-width:640px){ .rooms-head h2{flex-basis:100%} .rooms-head > span{display:none} }

/* ---------- The receipt picture: the preview in its dialog ---------- */
.rp-preview{max-height:60vh;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--muted-2)}
.rp-preview img{display:block;width:100%;height:auto}