/* ページローディング（スピナー + テキスト） */
.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  gap: 16px;
  color: var(--ink-soft, #64748b);
  font-size: 14px;
}

.page-loading-spinner {
  animation: page-spin 1s linear infinite;
}

@keyframes page-spin {
  to { transform: rotate(360deg); }
}

/* Skeleton（home / mypage 共通） */
.skeleton-line {
  background: var(--line, #d8f0f5);
  border-radius: 8px;
  margin-bottom: 10px;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

@keyframes sk-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 日付・時刻入力の枠幅（iOS Safari 対策） */
/* iOS Safari は input[type=date] などを内部的に display:inline-flex で描き、
   ネイティブUIの幅をそのまま最小幅として扱うため width:100% を無視する。
   結果、枠が「親の幅 + padding + border」まで広がり、同じ列の select や
   テキスト入力より太くなる（2026-09-19、hope の「勤務可能日」で報告。
   390px 幅で 300px の枠が 324px ＝ padding 11px×2 + border 1px×2 ぶん太かった）。
   min-width:0 でネイティブUI由来の下限を外し、max-width:100% で親の幅に収める。
   width は各ページ側の指定に任せる（横並びの日付欄まで 100% にしないため）。
   Chrome / Firefox は元から width:100% が効くので、この指定は無害。 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  /* iOS Safari はネイティブUIのまま描くと width / box-sizing を無視し、
     枠が「指定幅 + padding + border」まで太る。appearance:none で
     通常の入力欄として描かせると、他の入力欄と同じ箱の計算になる。
     （2026-09-19 の min-width / max-width だけでは直らなかった。
       ネイティブUI側の描画経路に入ったままだったため）
     日付ピッカー自体は appearance:none でも従来どおり開く。 */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  /* ネイティブUIの行送りが残ると、同じ列の select より数px高くなる。
     行送りを固定して高さも揃える（min-height 側が効くようになる） */
  line-height: 1.25;
}

/* 同じ理由で iOS Safari では値の内側に既定マージンが入り、枠が数px高くなる
   （hope の「勤務可能日」は 44px のはずが 49px）。他ブラウザでは無害。 */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value {
  margin: 0;
}

/* グリッド行の子は0まで縮められるようにする（2026-09-21 追加）
   グリッドの子は既定が min-width:auto で、中身の最小幅より縮まない。
   input[type=date] のようにネイティブUIの最小幅を持つ要素が入ると、
   その列ごと親より広がり、カードの枠からはみ出す。
   入力欄は幅に合わせて縮めてよいので0にする。
   （input 側だけに min-width:0 を付けても、グリッドの子＝.field が
     縮まないため効かない。2026-09-19 の修正で直らなかった原因） */
.grid > * {
  min-width: 0;
}

/* 日付入力の「選んだ時点」のエラー表示（EnterDateField） */
.enter-date-error {
  margin: 6px 0 0;
  color: var(--err, #d64545);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
}
input[type="date"][aria-invalid="true"] {
  border-color: var(--err, #d64545);
}

/* フォームの「必須」「任意」バッジ（2026-09-21）
   行の右端に、同じ大きさで並べる。バッジを持つラベルだけを flex にするので、
   チェックボックスを内包するラベルなど他の形には影響しない。 */
/* 各ページの .field label / .field>label（詳細度 0,1,1）より後ろで効かせるため、
   .field を前に足して 0,2,1 にしている。単に label:has(...) だとページ側の
   display:block に負けて右寄せが効かない */
.field label:has(> .required),
.field label:has(> .optional),
.field:has(> .required),
.field:has(> .optional),
label:has(> .required),
label:has(> .optional),
.title:has(> .required),
.title:has(> .optional) {
  display: flex;
  align-items: center;
  gap: 8px;
}
.required,
.optional {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
}
.optional {
  color: var(--muted, #7e95b8);
}