/* scheduling — the board, route view and crews. Builds on platform.css's
 * .board / .cell / .ticket-chip / .capacity-bar. No inline styles (CSP):
 * crew colours and bar fills arrive as CSS custom properties set via CSSOM. */

.sched-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.sched-layout.with-side { grid-template-columns: minmax(0, 1fr) 320px; }
.sched-main { min-width: 0; }
.week-label { margin-left: 8px; font-family: var(--font-heading, inherit); font-size: 18px; }

/* The grid: a crew column plus seven days; scrolls sideways on a laptop. */
.sched-board { grid-template-columns: 170px repeat(7, minmax(150px, 1fr)); }
.sched-board .cell.head { background: var(--color-surface, #e9e9ea); font-weight: 600; min-height: 0; padding: 8px; font-size: 13px; }
.sched-board .cell.head.corner { position: sticky; left: 0; z-index: 2; }
.sched-board .cell.row-label { position: sticky; left: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; background: #fff; }
.sched-board .cell.row-label .small { font-size: 11px; }
.sched-board .cell.bucket { background: var(--color-neutral-100, #f5f5f8); }
.sched-board .cell.bucket-label { background: var(--color-neutral-100, #f5f5f8); }
.sched-board .cell.sched-cell { display: flex; flex-direction: column; min-height: 96px; }
.sched-board .cell.sched-cell.over { box-shadow: inset 0 0 0 2px var(--color-bad-100, #f7e9e4); }
.bucket-empty { margin: auto; }
.cell-foot { font-size: 11px; line-height: 1.3; margin-top: 2px; min-height: 14px; }
.cell-actions { margin-top: auto; padding-top: 4px; }
.text-over { color: var(--color-bad, #8a3b2e); font-weight: 600; }

.crew-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--crew-color, #2f5d8a); margin-right: 4px; vertical-align: baseline; }
.capacity-bar > i { width: var(--fill, 0%); transition: width .15s ease; }

/* Chips: time / property / meta; greyed once the night is running or done. */
.ticket-chip { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; line-height: 1.3; }
.ticket-chip:focus-visible { outline: 2px solid var(--color-accent-600, #597ea3); outline-offset: 1px; }
.ticket-chip .chip-time { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; color: var(--color-muted); }
.ticket-chip .chip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-chip .chip-meta { grid-column: 1 / -1; font-size: 11px; color: var(--color-muted); }
.ticket-chip.routed { border-left-color: #2e7d32; }
.ticket-chip.status-in_progress, .ticket-chip.status-complete { cursor: default; opacity: .7; border-left-color: var(--color-neutral-400, #b7b7ba); }
.ticket-chip.status-in_progress .chip-name::after { content: " · on site"; font-weight: 400; }
.ticket-chip.status-complete .chip-name::after { content: " · done"; font-weight: 400; }
.ticket-chip:not([draggable]) { cursor: pointer; }

/* Side panel. */
.sched-side { position: sticky; top: 12px; }
.sched-side .panel-body .kv dd { margin: 0; }
.move-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-hairline); }

/* Route view. */
.route-stats { margin-bottom: 16px; }
.route-stats .stat-card.over .stat-value { color: var(--color-bad, #8a3b2e); }
.route-stops { list-style: none; margin: 0; padding: 0; }
.route-stop { display: grid; grid-template-columns: 32px minmax(0, 1fr) 80px auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--color-hairline); background: #fff; }
.route-stop[draggable] { cursor: grab; }
.route-stop.drop-target { outline: 2px dashed var(--color-accent-600, #597ea3); outline-offset: -2px; }
.route-stop .stop-pos { width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent-100, #eef6ff); color: var(--color-accent-800, #2c455d); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.route-stop .stop-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.route-stop .stop-body > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-stop .stop-leg { text-align: right; font-size: 12px; color: var(--color-muted); }
.route-stop .stop-nudge { gap: 2px; }
ul.plain { margin: 0; padding-left: 18px; }

@media (max-width: 900px) {
  .sched-layout.with-side { grid-template-columns: 1fr; }
  .sched-side { position: static; }
  .route-stop { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .route-stop .stop-leg, .route-stop .stop-nudge { display: none; }
}