/* Schedule grid: agents as rows, time as columns. Activity tints appear only here, always with a code. */

.schedule {
  --slot: 14px;               /* width of one 15-minute interval */
  --name-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: auto; font-size: var(--text-xs);
}

.schedule__row { display: grid; grid-template-columns: var(--name-width) calc(var(--slots) * var(--slot)); min-height: 30px; }
.schedule__row + .schedule__row { border-top: 1px solid var(--border); }
.schedule__name {
  position: sticky; left: 0; z-index: 1;
  display: flex; align-items: center; padding: 0 var(--space-3);
  background: var(--surface); border-right: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.schedule__lane {
  position: relative;
  background-image: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(var(--slot) * 4));
}

.schedule__head .schedule__name, .schedule__head .schedule__lane { background-color: var(--surface-muted); color: var(--text-secondary); font-weight: 500; }
.schedule__hour { position: absolute; top: 7px; transform: translateX(4px); }

.shift, .activity {
  position: absolute; top: 4px; bottom: 4px;
  left: calc(var(--from) * var(--slot)); width: calc(var(--span) * var(--slot));
  border-radius: var(--radius-sm);
}
.shift { background: var(--surface); border: 1px solid var(--border-strong); }
.shift--draft { opacity: .6; border-style: dashed; }
.activity {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.activity--unpaid { background-image: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, currentColor 35%, transparent) 3px 5px); }
.activity--violation { box-shadow: inset 0 0 0 2px var(--danger); }

.activity--break    { background-color: var(--activity-break-bg);    color: var(--activity-break-text); }
.activity--lunch    { background-color: var(--activity-lunch-bg);    color: var(--activity-lunch-text); }
.activity--training { background-color: var(--activity-training-bg); color: var(--activity-training-text); }
.activity--coaching { background-color: var(--activity-coaching-bg); color: var(--activity-coaching-text); }
.activity--meeting  { background-color: var(--activity-meeting-bg);  color: var(--activity-meeting-text); }
.activity--nesting  { background-color: var(--activity-nesting-bg);  color: var(--activity-nesting-text); }
.activity--late     { background-color: var(--activity-late-bg);     color: var(--activity-late-text); }
.activity--vto      { background-color: var(--activity-vto-bg);      color: var(--activity-vto-text); }
.activity--sick     { background-color: var(--activity-sick-bg);     color: var(--activity-sick-text); }
.activity--overtime { background-color: var(--activity-overtime-bg); color: var(--activity-overtime-text); }

/* Coverage row: staffing heat against the requirement (status colours, no rainbow) */
.coverage { display: grid; grid-template-columns: repeat(var(--slots), var(--slot)); height: 100%; }
.coverage__cell { border-right: 1px solid var(--surface); }
.coverage__cell--under { background: var(--danger-tint); box-shadow: inset 0 -3px 0 var(--danger); }
.coverage__cell--short { background: var(--warning-tint); box-shadow: inset 0 -3px 0 var(--warning); }
.coverage__cell--over { background: var(--info-tint); }

.now-line { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * var(--slot)); width: 2px; background: var(--accent); z-index: 2; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 14px; height: 14px; border-radius: var(--radius-sm); }

/* Full grid: scrolls inside the page with a sticky header, names and coverage */
.schedule--scroll { max-height: calc(100vh - 260px); }
.schedule__head { position: sticky; top: 0; z-index: 3; }
.schedule__head--coverage { top: 30px; }
.schedule__head .schedule__name { z-index: 4; }
.schedule--week { --slot: 4px; }
.schedule--week .schedule__lane { background-image: repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px calc(var(--slot) * 64)); }
.schedule--week .activity { font-size: 0; }
.shift { cursor: pointer; }
.shift:hover { border-color: var(--text); }
.activity { pointer-events: none; }
.schedule__rows { display: block; border-top: 1px solid var(--border); } /* a page of rows; a lazy frame needs a box to be seen */