/* 矯正管理システム固有の上書き。
 *
 * 【このファイルの役割】
 * style.css はインプラント管理システム（Single Source of Truth）から
 * そのまま同期する。矯正だけで必要な調整をあちらへ書き込むと、
 * 次の同期で消えるか、逆に移植元の改善を取り込めなくなる。
 * そのため矯正固有の調整はこのファイルだけに置く（松田歯科OS §2-6）。
 *
 * 【書いてよいもの】
 *   ・タブ数の違いなど、矯正の画面構成に由来する調整
 * 【書いてはいけないもの】
 *   ・新しいコンポーネント（ui.js へ足す）
 *   ・生の色コード・生のpx値（tokens.css の変数だけを使う）
 *   ・移植元にも当てはまる改善（それは移植元を直して配る）
 *
 * style.css の後に読み込むこと。
 */

/* 本アプリはタブが6つある（インプラント管理は5つ）。
   fs-body-lg のままでは iPad 横向きで入りきらず、「アライナー」が
   語の途中で改行されて読めなくなる。横スクロールは禁止のため
   （松田歯科OS §2-1）、文字サイズと余白を1段階詰めて1行に収める。 */
.app-nav__item {
  gap: var(--space-1);
  padding: var(--space-3) var(--space-1);
  font-size: var(--fs-label);
}

/* タブ名を語の途中で折り返さない。「アライナー」が2行に割れると読めなくなる。 */
.app-nav__item > span {
  white-space: nowrap;
}

/* 一覧の再読み込み中に出す帯。
   一覧を消さずに上へ重ねるだけにする。操作のたびに画面が真っ白になると、
   どこを見ていたか分からなくなるため（松田歯科OS P1）。 */
.notice.is-reloading {
  margin-block-end: var(--space-3);
}

/* ---------- タブ（進行中／SET済を持つ治療タブの切り替え） ----------

   このクラスは矯正だけが持つ（移植元は今日やること画面を持ち、タブが無い）。
   共有の style.css には定義が無いため、ここで面倒を見る。

   手袋をしたまま押すことを前提に、タップ領域と間隔を確保する
   （松田歯科OS §2-5：下限44px・間隔12px以上）。 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3); /* 12px。隣を誤タップしにくくする */
  margin-block-end: var(--space-4);
}

.tabs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-comfortable);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

/* 選択中は「色＋太字＋枠線」の3点で示す。色だけに頼らない（松田歯科OS P5）。 */
.tabs__item.is-active {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  background: var(--color-primary-softer);
  border-color: var(--color-primary);
}

/* 件数。0件でも消さないため、数字が主張しすぎないようにする。 */
.tabs__count {
  min-width: 1.5em;
  padding-inline: var(--space-1);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-ink-subtle);
}

.tabs__item.is-active .tabs__count {
  color: var(--color-primary);
}

.tabs__item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------- 検索欄 ----------
   患者ID入力と、アーカイブ・削除済みの切り替えを横に並べる。
   幅が足りなければ折り返し、横スクロールさせない（松田歯科OS §2-1）。 */
.search-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.search-box__input {
  flex: 1 1 12rem;
}

/* ---------- 設定画面の区分見出し ----------
   期限・通知・保持期間を区分ごとにまとめて見せる。
   項目が19個あるため、区切りが無いと目的の設定を探せない。 */
.setting-group__title {
  margin-block: var(--space-5) var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--color-ink-muted);
}

.setting-group__title:first-child {
  margin-block-start: 0;
}

/* 数値入力。style.css の .input--number に定義が無いため、
   ここで幅を決める（TECH_DEBT M-4）。 */
.input--number {
  width: 5.5rem;
  text-align: right;
}

/* 警告レベルの選択。数値入力と高さ・見え方をそろえる。 */
.input--select {
  min-height: var(--tap-comfortable);
  padding-inline: var(--space-3);
}