/* The work schedule: the month grid on screen, the palette above it, and the
   landscape sheet it prints as. Prefix 55 so these land after 50_admin (they
   override .a-table's cell padding) and before the counter's own styles.

   Every cell takes its colour from --ws-cell-bg, set one rule per shift by
   admin/work_schedules/_shift_colors — one small stylesheet instead of a style
   attribute on a hundred and fifty cells. */

.ws-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.ws-bar .a-filters { margin-right: auto; }
.ws-bar form { margin: 0; }
.ws-plan { display: flex; align-items: center; gap: 7px; }

/* Starting the month over, kept well away from Auto-plan. */
.ws-danger {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 22px; padding: 12px 14px;
  border: 1px solid var(--a-line); border-left: 3px solid var(--a-bad); border-radius: 10px;
}
.ws-danger strong { display: block; font-size: 14px; }
.ws-danger small { color: var(--a-muted); }
.ws-danger form { margin: 0; }
.ws-plan__rotation {
  padding: 6px 9px; border: 1px solid var(--a-line); border-radius: 7px;
  background: var(--a-surface); font: inherit; font-size: 13.5px; color: var(--a-ink);
}

.ws-months { margin-bottom: 18px; }

/* The too-long-a-stretch warning, kept off the legend under it. */
.ws-notice { margin-bottom: 14px; }

/* --- Legend and palette --------------------------------------------------- */

.ws-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-bottom: 14px; font-size: 13.5px;
}
.ws-legend__item { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ws-legend__item small { display: block; color: var(--a-muted); font-weight: 400; }

.ws-chip {
  display: inline-grid; place-items: center; min-width: 58px; padding: 4px 9px;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 6px;
  background: var(--ws-cell-bg, #EEF1F0); color: #16211F;
  font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.ws-cell--off { --ws-cell-bg: #F4EFE6; }
.ws-cell--none { --ws-cell-bg: transparent; }
.ws-cell--none.ws-chip { border-style: dashed; color: var(--a-muted); }

.ws-palette {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--radius-sm);
}
.ws-palette__label { font-size: 13px; font-weight: 700; color: var(--a-muted); }
.ws-palette__hint { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--a-muted); }
.ws-palette button { cursor: pointer; }
.ws-palette button.is-active {
  outline: 2px solid var(--a-accent); outline-offset: 2px;
}

/* --- Busy days (Settings → People) --------------------------------------- */

.bd-week { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bd-week label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.bd-week input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--a-accent); }

.bd-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 16px; }
.bd-add .a-field { margin: 0; }
.bd-add__note { flex: 1 1 220px; }

.bd-past { margin-top: 14px; }
.bd-past summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--a-muted); }

.ws-plan__busy { font-size: 12.5px; color: var(--a-muted); }

/* --- The grid ------------------------------------------------------------- */

.ws-wrap { overflow-x: auto; margin-bottom: 16px; }

.ws-grid {
  border-collapse: separate; border-spacing: 0;
  background: var(--a-surface); font-size: 12px;
}
.ws-grid th, .ws-grid td {
  border-right: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line);
  padding: 0; text-align: center;
}
.ws-grid thead th { border-top: 1px solid var(--a-line); background: #F7FAF9; }
.ws-grid th:first-child, .ws-grid td:first-child { border-left: 1px solid var(--a-line); }

/* The name column stays put while the month scrolls sideways. */
.ws-who, .ws-corner {
  position: sticky; left: 0; z-index: 2;
  min-width: 132px; padding: 6px 10px !important;
  background: var(--a-surface); text-align: left !important;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ws-corner { z-index: 3; background: #F7FAF9; line-height: 1.25; }
.ws-corner__year { display: block; font-size: 15px; font-weight: 700; }
.ws-corner__month { display: block; color: var(--a-muted); font-weight: 600; }

/* Wide enough for the longest label a cell can hold, "12:00-9:00", without
   clipping it. The printed sheet overrides this — it is table-layout: fixed
   and shares the width out evenly instead. */
.ws-day { min-width: 80px; padding: 4px 2px !important; line-height: 1.2; }
.ws-day__num { display: block; font-size: 13px; font-weight: 700; }
.ws-day__name { display: block; font-size: 10px; letter-spacing: .4px; color: var(--a-muted); }
.ws-day.is-weekend, td.ws-cell.is-weekend { background-color: #F2F6F5; }
.ws-day.is-today, .ws-grid td.is-today { box-shadow: inset 0 0 0 2px var(--a-accent); }
/* A busy day: nobody is auto-planned off. A dot beside the number as well as the
   tint, so colour is not the only cue. */
.ws-day.is-busy { background-color: #FFF4DC; }
.ws-day.is-busy .ws-day__num::after { content: " •"; color: #B7791F; }

.ws-cell {
  height: 34px; min-width: 80px;
  background-color: var(--ws-cell-bg, transparent);
  font-size: 11.5px; font-weight: 600; color: #16211F; white-space: nowrap;
}

/* The select is the real control — paint mode only sets its value — so it has
   to stay reachable by keyboard even while it looks like a plain coloured box. */
.ws-pick {
  width: 100%; height: 34px; padding: 0 2px;
  border: 0; border-radius: 0; background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 600; color: inherit;
  text-align: center; text-align-last: center; text-overflow: ellipsis;
  appearance: none; cursor: pointer;
}
.ws-pick:focus-visible { outline: 2px solid var(--a-accent); outline-offset: -2px; }
.ws-grid--editable { user-select: none; }

.ws-form .a-form__actions { margin-top: 4px; margin-bottom: 24px; }
.ws-form + .a-panel { margin-bottom: 24px; }

/* --- The colour swatches on the shift form -------------------------------- */

.ws-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ws-swatch {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--a-line); border-radius: 8px;
  background: var(--ws-swatch); font-size: 13px; font-weight: 600; color: #16211F;
  cursor: pointer;
}
.ws-swatch:has(input:checked) { outline: 2px solid var(--a-accent); outline-offset: 1px; }
.ws-swatch input { accent-color: var(--a-accent-d); }

/* --- The printed sheet ---------------------------------------------------- */

.ws-sheet { max-width: 1180px; margin: 0 auto; padding: 16px; }
.ws-half { margin-bottom: 14px; break-inside: avoid; }
.ws-half .ws-wrap { overflow: visible; margin-bottom: 0; }
.ws-half .ws-grid { width: 100%; table-layout: fixed; }

@media print {
  /* Colour is how the sheet is read, so it has to survive the print dialog. */
  .ws-grid, .ws-cell, .ws-chip, .ws-day {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.sched { background: #fff; }
  .pr-toolbar { display: none; }
  .ws-sheet { max-width: none; padding: 0; }
  .ws-grid { font-size: 9.5px; }
  .ws-who, .ws-corner { min-width: 0; position: static; }
  .ws-day, .ws-cell { min-width: 0; }
  .ws-cell { height: 26px; }
  .ws-grid th, .ws-grid td { border-color: #999; }
  .ws-legend { font-size: 10px; break-inside: avoid; }
}