/* =====================================================================
   月間カレンダーの共有部品（3アプリ共通）— 見た目の定義
   =====================================================================
   保護者アプリのホーム画面のカレンダー（parent/script.js の buildCalendarGrid）を
   読み取って、同じ操作感になるように切り出したもの。
   いまは SCHOOL Manager の「振替管理」だけが使っている。
   保護者アプリ側をこの部品に載せ替えるのは別タスク（docs/cleanup-backlog.md C-8）。

   ＊なぜ共有部品にしたか
   同じ「月を見る → 日を押す → その日の予定が出る」画面を2つ別々に実装すると、
   必ず片方だけが古くなる。現に「帯（バー）＋文言」への変更は保護者アプリだけに入り、
   本部の振替管理は色も文字も無い一覧のままだった。

   ＊色の決まり
   意味を持つ色（授業=緑／自習=青／要対応=赤）は変えない。
   ただし**濃さ**は使う側で1段ずらせるようにしてある（下の変数）。
   帯の中には白文字を載せるので、淡い緑・淡い青のままだと 3.3:1 / 2.9:1 しか出ず、
   「帯の中の文字が読めない＝色だけで伝えている」状態に戻ってしまうため。
   既定値は白文字で 4.5:1 を超える濃さにしてある（緑 5.34:1 ／ 青 5.45:1）。

   ＊変数（使う側で上書きできる。すべて var(..., 既定値) で書いてあるので、
     祖先要素のどこで指定しても効く）
     --sc-lesson        授業の帯の色（緑）
     --sc-study         自習の帯の色（青）
     --sc-danger-rgb    振替先が未定の欠席のリングの色（赤・止めない）。
                        ＊ここだけ色そのものではなく「R G B のチャンネル値」で持つ。
                        リングは〈不透明な枠線〉と〈42%の半透明の発光〉の2つで出来ていて、
                        半透明のほうを作るには元の色の成分が要る。
                        以前は枠線だけ var(--sc-danger) で、発光は rgba(220,38,38,.42) と
                        ベタ書きしてあった。その結果、本部が --sc-danger を差し替えた画面では
                        「枠 #e6564f ＋ 発光 #dc2626」という**2色のリング**になっていた。
                        チャンネル値を1つだけ持てば、差し替えても2色に割れようがない
     --sc-new /-glow    たった今動かした日のリングの色（既定は振替の緑・3回で止まる）
     --sc-day-bg        日付マスの地
     --sc-day-bg-hover  同・カーソルを載せたとき
     --sc-day-ink       日付の文字色
     --sc-sel-bg/-ink   選んだ日
     --sc-today-bg/-ink 今日（日付の数字だけを丸く塗る）
     --sc-off-bg/-ink   押せない日
     --sc-dow-ink       曜日の見出し
   ===================================================================== */

/* ＊文字の大きさ（2026-08-29 遼様のご指摘「全体的に文字が小さい」で一括引き上げ）
   保護者アプリ（parent/style.css の .mah-cal-*）と同じ値にしてある。
   ここだけ据え置くと、同じカレンダーなのに本部だけ文字が小さいままになる。
   帯の文字を13pxにしたぶん帯を15→19pxに、マスの高さを70→80pxにした
   （高さの内訳：余白5+日付の丸22+間隔3+選択日の白下敷きの帯2段44+余白5=79） */
.sc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sc-cal-dow {
  text-align: center; font-size: 13px; font-weight: 800;
  color: var(--sc-dow-ink, #5b6b62); padding: 2px 0 6px;
}

/* 日付マス。
   高さは固定にしてある。可変にすると、帯が1本の日と2本の日で行の高さが変わり、
   日を選ぶたびにカレンダー全体が上下に動く。
   overflow は切らない：発光リング（::before）がマスの外側に出るため、切ると光が消える。
   --sc-ring-inset / --sc-ring-radius は「マスの外側に巻くリング」の寸法。
   狭い画面ではマスの隙間も狭くなるので、上書きは変数側だけで済むようにしてある */
.sc-cal-day {
  --sc-ring-inset: -3px; --sc-ring-radius: 15px;
  min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border: 1.5px solid transparent; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700;
  color: var(--sc-day-ink, #2c3a33); background: var(--sc-day-bg, #e9f4ec);
  /* 左右3px：帯の文字13pxが狭い画面でも切れないように（保護者アプリと同じ値） */
  padding: 5px 3px; gap: 3px; position: relative;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.sc-cal-day:hover { background: var(--sc-day-bg-hover, #d8ecdd); }
.sc-cal-day.empty { visibility: hidden; cursor: default; }
/* 選んだ日はマスごと塗る（四角）。今日は数字だけを丸く塗る（丸）。
   形が違うので、同じ日が「今日かつ選択中」でも両方読み取れる */
.sc-cal-day.selected {
  background: var(--sc-sel-bg, #16a34a); border-color: var(--sc-sel-bg, #16a34a);
  color: var(--sc-sel-ink, #ffffff);
}
.sc-cal-d {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; line-height: 1; flex: 0 0 auto; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.sc-cal-day.today .sc-cal-d { background: var(--sc-today-bg, #16a34a); color: var(--sc-today-ink, #ffffff); font-weight: 800; }
.sc-cal-day.selected.today .sc-cal-d { background: var(--sc-sel-ink, #ffffff); color: var(--sc-sel-bg, #16a34a); }
/* 押せない日（休館日・選べる期間の外）。押せないことを最優先で読ませる。
   地の色を沈めるだけだと**色だけで伝えている**ことになるので、枠線を破線にして
   「塗りつぶされたタイル（押せる）」と形で見分けられるようにしてある。
   文字は薄くしすぎない：読めない文字は無いのと同じで、「何日が選べないのか」も情報 */
.sc-cal-day.disabled-day {
  background: var(--sc-off-bg, #f5f6f5); color: var(--sc-off-ink, #6b7770);
  border: 1.5px dashed var(--sc-off-border, #c3cbc6);
  cursor: not-allowed; font-weight: 400;
}
.sc-cal-day.disabled-day:hover { background: var(--sc-off-bg, #f5f6f5); }
.sc-cal-day.disabled-day .sc-cal-bar { opacity: .35; }

/* 帯（バー）。色の点（ドット）を置き換えた本体。
   区分は「授業」「自習」の2つだけ。振替・季節講習・追加授業はすべて「授業」に数える
   （その日に塾へ行くかどうかが分かればよい。種別の違いは日別の予定カードのバッジが担う）。
   帯の中に文字が入るので、色が読めなくても意味が取れる。
   下端に寄せる（margin-top:auto）ので、帯の本数が違っても日付の数字の位置は動かない */
.sc-cal-bars { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: auto; }
.sc-cal-bar {
  height: 19px; border-radius: 4px; background: #cbd5e1; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.02em; white-space: nowrap;
}
.sc-cal-bar .n { font-size: 13px; opacity: .9; font-variant-numeric: tabular-nums; }
.sc-cal-bar-lesson { background: var(--sc-lesson, #1d7a48); }
.sc-cal-bar-study { background: var(--sc-study, #1f6ea8); }
/* 選んだ日はマスを1色で塗るので、そのままだと同系色の帯が消える。
   帯だけ白い下敷きに載せて、色の意味（緑=授業／青=自習）を保つ */
/* 下敷きの左右は1px（保護者アプリと同じ）。帯の文字13pxが選択日でも削れないように */
.sc-cal-day.selected .sc-cal-bars { background: #fff; border-radius: 6px; padding: 2px 1px; gap: 2px; }

/* =====================================================================
   振替先が未定の欠席が残っている日を、赤いリングで光らせ続ける
   =====================================================================
   遼様の言葉（2026-08-17）：「残っている日付のところを赤枠をつけて、ピカピカとふわっと光らせる」
   狙いは意図的に“目障り”な状態を作って、期限が来る前に振替先を決めてもらうこと
   （振替を消化せずに権利が消えるのを防ぐ、というのが振替まわり全ての出発点）。

   ・帯を増やさないのでカレンダーの高さは1pxも変わらない
   ・マスの背景・枠線・寸法に触らないので「今日=数字を丸く塗る」「選択日=マスを塗る」と共存する
   ・疑似要素は ::before を使う。使う側が「たった今操作した」発光（::after）を
     重ねることがあるため。両方を ::after で描くと片方が丸ごと消える */
.sc-cal-day-pending { z-index: 1; } /* リングが隣のマス（不透明な地を持つ）に隠れないよう前面へ */
.sc-cal-day-pending::before {
  content: ''; position: absolute; inset: var(--sc-ring-inset); border-radius: var(--sc-ring-radius);
  pointer-events: none;
  /* 枠線と発光は、同じ1つのチャンネル値から作る（片方だけベタ書きすると2色のリングになる） */
  border: 2.5px solid rgb(var(--sc-danger-rgb, 220 38 38));
  /* 内側の白い線は、選択日（マスが1色）に重なったときに赤枠との境目を作るためのもの */
  box-shadow: 0 0 9px 2px rgb(var(--sc-danger-rgb, 220 38 38) / 42%), 0 0 0 1.5px #fff inset;
  animation: sc-cal-day-pending 2.6s ease-in-out infinite;
}
/* 完了直後の発光（回数で止める）と違い、こちらは止めない。
   2.6秒でゆっくり呼吸させ、暗いほうの谷でも opacity:.5 までしか落とさない
   （谷でも赤枠は読める＝「どの日か」という情報は常に成立している）。
   動かすのは opacity だけなので、常時アニメーションでも端末に優しい */
@keyframes sc-cal-day-pending {
  0%, 100% { opacity: .5 }
  50%      { opacity: 1 }
}

/* =====================================================================
   「たった今この日を動かした」を示す発光（回数で止める）
   =====================================================================
   保護者アプリの .mah-cal-day-new をそのまま持ってきたもの（820ms×3回）。
   本部の振替管理には、これだけが無かった：振替を入れて戻ったマスは
   selected（塗り）が付くだけで、「どこに入ったのか」を目で追えなかった。
   保護者アプリと同じ動きにするのがこの画面の目的なので、ここも同じにする。

   ・上の「振替先が未定」（::before・止めない・赤）と同じ日に重なりうるので、
     こちらは ::after を使う。両方を ::after にすると片方が丸ごと消える
   ・重なったときは 内側＝テーマ色／外側＝赤 の二重丸になり、役割を読み分けられる
   ・forwards と opacity:0 の初期値が必須。無いと3回終わった瞬間に
     「くっきり表示」へ跳ね戻り、静止したリングが残る
   ・色は使う側で --sc-new に指定する（既定は保護者アプリと同じ濃い緑＝振替の色）。
     選択日の塗りと同系色でも境目が出るよう、内側に白い線を1本入れてある */
.sc-cal-day-new { z-index: 1; }
.sc-cal-day-new::after {
  content: ''; position: absolute; inset: var(--sc-ring-inset); border-radius: var(--sc-ring-radius);
  pointer-events: none;
  border: 2.5px solid var(--sc-new, #0f7a3d);
  box-shadow: 0 0 10px 2px var(--sc-new-glow, rgba(15, 122, 61, .35)), 0 0 0 1.5px #fff inset;
  opacity: 0;
  animation: sc-cal-day-new 820ms ease-out 3 forwards;
}
@keyframes sc-cal-day-new {
  0%   { opacity: 0; transform: scale(.86) }
  35%  { opacity: 1; transform: scale(1) }
  100% { opacity: 0; transform: scale(1.14) }
}

/* 表示中の月の外に未処理の欠席が残っていることを、月送りボタンに出す。
   赤いリングは表示中の月にしか描けないので、これが無いと
   「欠席は先月・期限は今月末」という一番危ない組み合わせに画面から気づけない。
   色だけの点にしないよう、印の中に「未」の文字を入れる */
.sc-cal-nav-pending {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; margin-left: 5px;
  border-radius: 6px; background: rgb(var(--sc-danger-rgb, 220 38 38)); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1; font-style: normal;
}

/* 動きを嫌う設定のとき。**動きは止めるが、情報は消さない**。
   「どの日が要対応か」は演出ではなく情報なので、リングは動かないまま残す。
   打ち消しは元の定義より後ろに置かないと効かない（同じ詳細度なら後勝ちのため） */
@media (prefers-reduced-motion: reduce) {
  .sc-cal-day-pending::before { animation: none; opacity: 1; }
  /* 「たった今どこに入ったか」も演出ではなく情報。動きだけ止めて、リングは残す
     （数秒後にJS側が描き直してクラスごと外す） */
  .sc-cal-day-new::after { animation: none; opacity: 1; transform: none; }
}