/* 月送り・日送り（shared/_period_stepper）。勤務実績・シフト管理・カレンダー・日別の画面で同じ形にする */
.period-stepper { display: inline-grid; justify-items: center; gap: 6px; }
.period-stepper__nav { display: grid; grid-template-columns: 34px auto 34px; align-items: center; gap: 12px; }
.period-stepper__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #4f5d95;
  background: #eef1fb;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.period-stepper__step:hover { background: #4f5d95; color: #fff; }
/* 先へ進めないとき（スタッフ画面は先の期間を見せない） */
.period-stepper__step--disabled { opacity: 0.35; pointer-events: none; }
.period-stepper__step-icon { display: block; }
.period-stepper__period { display: grid; justify-items: center; gap: 0; color: #3f4775; text-align: center; white-space: nowrap; }
.period-stepper__label { margin: 0; color: #3f4775; font-size: 20px; font-weight: 700; line-height: 1.3; }
.period-stepper__caption { color: #8a93a6; font-size: 12px; font-weight: 700; }
.period-stepper__status { display: flex; justify-content: center; }
.period-stepper__current,
.period-stepper__back {
  padding: 2px 12px;
  border: 1px solid transparent; /* 「戻る」ボタンと同じ高さにそろえる */
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.period-stepper__current { color: #27765a; background: #e3f1e8; }
.period-stepper__back { border-color: #cbd1df; color: #525b91; text-decoration: none; }
.period-stepper__back:hover { border-color: #4f5d95; background: #f7f8fc; }
/* 「今月」のしるしと「戻る」を横に出すとき。:start は左（右はしに置くシフト管理）、:end は右（左はしに置くカレンダー） */
.period-stepper--back-start,
.period-stepper--back-end { display: inline-flex; align-items: center; gap: 12px; }
.period-stepper--back-start .period-stepper__status { order: -1; }
@media print { .period-stepper__step, .period-stepper__status { display: none; } }