/* Shifts (#shifts, week and month) — docs/design/Atlas_Experience_Redesign.md §7.9, §8.4.
 * Module layout only. Buttons, segmented controls, tabs, pills, rows, alerts,
 * empty states, sheets, dialogs, toggles and inputs are the shared components
 * from atlas-components.css. No tokens are defined here. */
@layer atlas.modules {

.shifts-host { display: block; }
.shifts-head .page-head__actions { flex-wrap: wrap; align-items: center; }
.shifts-nav { display: inline-flex; align-items: center; gap: var(--s-1); }
.shifts-publish { display: inline-flex; align-items: center; gap: var(--s-3); }
.shifts-publish__caption { font: var(--type-caption); color: var(--text-2); }
.shifts-tabs { margin-top: var(--s-4); }
.shifts-body { margin-top: var(--s-5); }
.shifts-alert { margin-bottom: var(--s-4); }
.shifts-toolbar { margin-bottom: var(--s-3); }
.shifts-toolbar__note { margin: 0; font: var(--type-meta); color: var(--text-2); }
.shifts-toolbar__legend { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--type-caption); color: var(--text-2); }
.shifts-inline-field { min-width: 220px; }
.shifts-skel { display: grid; gap: var(--s-2); }
.shifts-skel--grid .atlas-skel--block { height: 56px; }
.shifts-empty { margin-top: var(--s-6); }

/* ---------- today / tomorrow ---------- */
.shifts-now { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2) var(--s-8); margin-bottom: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-subtle); }
.shifts-now__day { display: grid; gap: var(--s-1); min-width: 0; }
.shifts-now__label { margin: 0; font: var(--type-label); color: var(--text); }
.shifts-now__label span { font-weight: 400; color: var(--text-2); }
.shifts-now__people { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; }
.shifts-now__person { display: inline-flex; align-items: center; gap: 6px; font: var(--type-meta); color: var(--text); }
.shifts-now__person .num { color: var(--text-2); }
.shifts-now__none { margin: 0; font: var(--type-meta); color: var(--text-2); }
.shifts-now__handover { margin-left: auto; align-self: center; }

/* ---------- week grid (manager, ≥ 1024) ---------- */
.shifts-grid { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.shifts-grid__row { display: grid; grid-template-columns: minmax(168px, 1.4fr) repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line-subtle); }
.shifts-grid__row--head { position: sticky; top: var(--table-sticky-top, 0); z-index: 1; border-top: 0; background: var(--bg-subtle); }
.shifts-grid__corner, .shifts-grid__day { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 var(--s-3); font: var(--type-label); color: var(--text-2); }
.shifts-grid__day { border-left: 1px solid var(--line-subtle); }
.shifts-grid__day.is-today { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-brand); }
.shifts-grid__person { display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3); }
.shifts-grid__name { display: grid; min-width: 0; }
.shifts-grid__display { overflow: hidden; font: var(--type-label); color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.shifts-grid__hours { font: var(--type-caption); color: var(--text-2); }
.shifts-grid__cell { position: relative; display: grid; align-content: start; gap: var(--s-1); min-width: 0; min-height: 56px; padding: 6px; border-left: 1px solid var(--line-subtle); }
.shifts-grid__cell.is-today { background: var(--bg-hover); }
.shifts-grid__leave { font: var(--type-caption); color: var(--text-2); padding: 4px 6px; }
.shifts-grid__add { display: grid; place-items: center; width: 100%; min-height: 24px; padding: 0; border: 1px dashed transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; }
.shifts-grid__add svg { width: 14px; height: 14px; }
.shifts-grid__cell:hover .shifts-grid__add, .shifts-grid__add:focus-visible { opacity: 1; border-color: var(--line-strong); }
.shifts-grid__cell:not(:has(.shift-chip)) .shifts-grid__add { min-height: 42px; }
@media (hover: none) { .shifts-grid__add { opacity: 1; border-color: var(--line); } }

.shift-chip { position: relative; display: grid; gap: 0; width: 100%; min-width: 0; padding: 5px 8px 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-align: left; font: inherit; }
button.shift-chip { cursor: pointer; }
button.shift-chip:hover { border-color: var(--line-strong); background: var(--bg-subtle); }
.shift-chip::before { content: ''; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--line-strong); }
.shift-chip.is-unpublished { border-style: dashed; border-color: var(--line-hover); }
.shift-chip__time { font: 500 13px/18px var(--font-sans); }
.shift-chip__role { overflow: hidden; font: var(--type-caption); color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.shift-chip__warn { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font: var(--type-caption); color: var(--warning); }
.shift-chip__warn svg { flex: none; width: 14px; height: 14px; color: var(--warning-icon); }
.shift-chip__warn > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shift-chip--legend { display: inline-block; width: 18px; height: 12px; padding: 0; }
.shift-chip--legend::before { display: none; }

/* ---------- day list (phones, tablets, staff "Team") ---------- */
.shifts-days { display: grid; gap: var(--s-6); }
.shifts-days__earlier { justify-self: start; }
.shifts-day__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.shifts-day__title { margin: 0; font: var(--type-heading); color: var(--text); }
.shifts-day__add { margin-left: auto; }
.shifts-day__empty { margin: 0; padding: var(--s-2) 0; font: var(--type-meta); color: var(--text-2); }
.shifts-row__time { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.shifts-row__name { font: var(--type-label); color: var(--text-2); }
.shifts-row__warn { display: flex; align-items: center; gap: var(--s-1); color: var(--warning); }
.shifts-row__warn svg { width: 14px; height: 14px; flex: none; color: var(--warning-icon); }
.shifts-row__with { display: flex; align-items: center; gap: 4px; margin: var(--s-1) 0 0; }
.shifts-row__with .atlas-row__meta { margin-left: 4px; }
.shifts-row.is-unpublished { border-left: 2px dashed var(--line-hover); }
.shifts-row .atlas-row__end { flex-wrap: wrap; justify-content: flex-end; }

/* ---------- month ---------- */
.shifts-month { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.shifts-month__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--bg-subtle); border-bottom: 1px solid var(--line); }
.shifts-month__weekdays span { padding: 8px var(--s-3); font: var(--type-label); color: var(--text-2); }
.shifts-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.shifts-month__cell { position: relative; display: grid; align-content: start; gap: var(--s-1); min-width: 0; min-height: 112px; padding: var(--s-2); border: 0; border-right: 1px solid var(--line-subtle); border-bottom: 1px solid var(--line-subtle); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.shifts-month__cell:nth-child(7n) { border-right: 0; }
.shifts-month__cell:hover { background: var(--bg-hover); }
.shifts-month__cell.is-outside { background: var(--bg-subtle); color: var(--text-3); cursor: default; }
.shifts-month__num { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 0 -4px; border-radius: 50%; font: var(--type-label); }
.shifts-month__cell.is-today .shifts-month__num { background: var(--ink); color: var(--surface); }
.shifts-month__chips { display: grid; gap: 2px; min-width: 0; }
.shifts-month__chip { overflow: hidden; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); font: var(--type-caption); white-space: nowrap; text-overflow: ellipsis; }
.shifts-month__chip.is-unpublished { border-style: dashed; border-color: var(--line-hover); }
.shifts-month__who { font-weight: 500; }
.shifts-month__more, .shifts-month__gap { font: var(--type-caption); color: var(--text-2); }
.shifts-month__gap { color: var(--warning); }
.shifts-month__count { display: none; }

/* ---------- availability ---------- */
.shifts-avail { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.shifts-avail__row + .shifts-avail__row { border-top: 1px solid var(--line-subtle); }
.shifts-avail__form { display: grid; grid-template-columns: 120px 150px minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.shifts-avail__day { font: var(--type-label); color: var(--text); }
.shifts-avail__toggle { display: inline-flex; align-items: center; gap: var(--s-2); }
.shifts-avail__state { font: var(--type-meta); color: var(--text-2); }
.shifts-avail__times { display: flex; align-items: center; gap: var(--s-1); color: var(--text-3); }
.shifts-avail__times .atlas-input { min-width: 0; }
.shifts-list { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }

/* ---------- widths ---------- */
@media (max-width: 1279px) {
  .shifts-grid__row { grid-template-columns: minmax(140px, 1.2fr) repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .shifts-avail__form { grid-template-columns: 110px 1fr; }
  .shifts-avail__times, .shifts-avail__note { grid-column: 1 / -1; }
  .shifts-avail__save { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 767px) {
  .shifts-head .page-head__actions { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); }
  .shifts-head .atlas-segmented { justify-self: end; }
  .shifts-publish { grid-column: 1 / -1; display: grid; justify-items: stretch; gap: 2px; }
  .shifts-publish .atlas-btn { width: 100%; grid-row: 1; }
  .shifts-publish__caption { grid-row: 2; text-align: center; }
  .shifts-tabs { margin-top: var(--s-2); }
  .shifts-body { margin-top: var(--s-4); }
  .shifts-now { gap: var(--s-2) var(--s-5); }
  .shifts-now__handover { margin-left: 0; }
  .shifts-row__time { font: 600 17px/24px var(--font-sans); }
  .shifts-row .atlas-row__end { width: 100%; justify-content: flex-start; }
  .shifts-row.atlas-row { flex-wrap: wrap; }
  .shifts-month { border-radius: var(--r-md); }
  .shifts-month__weekdays span { padding: 6px 0; text-align: center; font-size: 12px; }
  .shifts-month__cell { min-height: 56px; padding: 6px 4px; justify-items: center; }
  .shifts-month__chips, .shifts-month__gap { display: none; }
  .shifts-month__count { display: block; min-width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--bg-muted); font: 500 12px/20px var(--font-sans); text-align: center; color: var(--text); }
  .shifts-month__count:empty { background: transparent; }
  .shifts-month__num { margin: 0; }
  .shifts-avail__form { padding: var(--s-3); }
  .shifts-inline-field { min-width: 0; width: 100%; }
}
}