/* ==========================================================
   精華学園多治見校 授業予約・生徒管理システム
   共通スタイル（モックアップ）
   ---------------------------------------------------------
   ■ デザイン方針
   　生徒の多くは全日制で躓いた経験を持つ。
   　現行システムの失敗は「全部見えて、選べてしまう」こと。
   　→ 不安を減らす／選択肢を減らす／次の行動を明示する
   ■ シグネチャー
   　受講回数のドットメーター（●●●○ 3/4回）
   　「あと1回」を叱責ではなく進捗として見せる
   ========================================================== */

:root{
  /* --- 色 --- */
  --ai:        #1B3A5C;  /* 藍：学校の信頼・ヘッダー */
  --ai-deep:   #12293F;  /* 藍（濃）：押下時 */
  --sora:      #E8F0F7;  /* 空：淡い面 */
  --sora-line: #C9DBEA;  /* 空（線） */
  --wakakusa:  #2E7D5B;  /* 若草：完了・OK */
  --wakakusa-bg:#EDF6F1;
  --yamabuki:  #C77A0A;  /* 山吹：要対応（叱責でなく注意喚起） */
  --yamabuki-bg:#FDF6E9;
  --akane:     #C0392B;  /* 茜：休講・エラー */
  --akane-bg:  #FCF0EE;
  --sumi:      #2B2B2B;  /* 墨：本文 */
  --sumi-thin: #6B7280;  /* 墨（淡）：補助文 */
  --shironeri: #FAFAF8;  /* 白練：ページ地 */
  --line:      #E3E6EA;

  /* --- 字 --- */
  --font: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",
          "Yu Gothic Medium","Meiryo",sans-serif;
  --font-num: "SF Mono","Roboto Mono",Consolas,monospace;

  --r: 10px;      /* 角丸 */
  --r-s: 6px;
  --shadow: 0 1px 3px rgba(27,58,92,.08), 0 1px 2px rgba(27,58,92,.04);
  --shadow-lift: 0 4px 12px rgba(27,58,92,.10);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  background:var(--shironeri);
  color:var(--sumi);
  line-height:1.7;
  font-size:15px;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;}

/* 可読性の床：フォーカス可視 */
:focus-visible{outline:2px solid var(--ai);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* モック第24弾にあった「確認用」バナー（26px）は実装では出さない。
   その分の余白と、追従要素の top オフセットを 0 に戻してある。 */

/* ==========================================================
   生徒画面：スマホ前提（8割がスマホ）
   ========================================================== */
.phone{
  max-width:430px;margin:0 auto;min-height:100vh;
  background:#fff;
  box-shadow:0 0 0 1px var(--line);
  display:flex;flex-direction:column;
}
.s-head{
  background:var(--ai);color:#fff;
  padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:50;
}
.s-head h1{font-size:16px;font-weight:600;letter-spacing:.02em;}
.s-head .back{font-size:20px;line-height:1;opacity:.9;}
.s-body{flex:1;padding:16px;padding-bottom:80px;}

/* 下部ナビ */
.s-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
  z-index:60;
}
.s-nav a{
  padding:8px 0 10px;text-align:center;
  font-size:10px;color:var(--sumi-thin);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.s-nav a.on{color:var(--ai);font-weight:600;}
.s-nav .ico{font-size:19px;line-height:1;}

/* ==========================================================
   職員画面：PC前提
   ========================================================== */
.a-wrap{display:flex;min-height:100vh;}
.a-side{
  width:210px;flex-shrink:0;
  background:var(--ai);color:#fff;
  padding:16px 0;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;
}
.a-side .brand{
  padding:0 16px 14px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.a-side .brand strong{display:block;font-size:14px;font-weight:600;}
.a-side .brand span{font-size:10px;opacity:.55;}
.a-side .grp{
  padding:14px 16px 4px;font-size:10px;
  opacity:.45;letter-spacing:.08em;
}
.a-side a{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;font-size:13px;
  color:rgba(255,255,255,.82);
  border-left:3px solid transparent;
}
.a-side a:hover{background:rgba(255,255,255,.06);}
.a-side a.on{
  background:rgba(255,255,255,.10);
  border-left-color:#fff;color:#fff;font-weight:600;
}
.a-main{flex:1;min-width:0;}
.a-head{
  background:#fff;border-bottom:1px solid var(--line);
  padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:40;
}
.a-head h1{font-size:19px;font-weight:600;}
.a-head .sub{font-size:12px;color:var(--sumi-thin);margin-top:1px;}
.a-body{padding:22px 24px 60px;}

/* ==========================================================
   受講回数ドットメーター
   ---------------------------------------------------------
   本システムの要。「あと1回」を叱責ではなく進捗として見せる。
   ========================================================== */
.meter{display:flex;align-items:center;gap:9px;}
.dots{display:flex;gap:4px;}
.dot{
  width:11px;height:11px;border-radius:50%;
  background:#fff;border:1.5px solid var(--sora-line);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.dot.fill{background:var(--ai);border-color:var(--ai);}
.dot.over{background:var(--sora-line);border-color:var(--sora-line);}
.meter.done .dot.fill{background:var(--wakakusa);border-color:var(--wakakusa);}
.meter .cnt{
  font-family:var(--font-num);font-size:12px;
  color:var(--sumi-thin);font-weight:600;
}
.meter.done .cnt{color:var(--wakakusa);}
.meter-note{font-size:12px;margin-top:5px;font-weight:600;}
.meter-note.todo{color:var(--yamabuki);}
.meter-note.done{color:var(--wakakusa);}

/* ==========================================================
   カード
   ========================================================== */
.card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:14px;
  box-shadow:var(--shadow);
}
.card + .card{margin-top:10px;}
.card-flat{background:#fff;border:1px solid var(--line);border-radius:var(--r);}

/* 履修カード（生徒）*/
.subj{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:14px;
  box-shadow:var(--shadow);
  display:block;position:relative;
  transition:box-shadow .2s;
}
.subj:hover{box-shadow:var(--shadow-lift);}
.subj + .subj{margin-top:10px;}
.subj.ok{border-color:var(--wakakusa);}
.subj.todo{border-color:var(--yamabuki);}
.subj-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.subj-name{font-size:16px;font-weight:600;letter-spacing:.02em;}
.subj-meta{font-size:11px;color:var(--sumi-thin);margin-top:2px;}
.subj-go{color:var(--sora-line);font-size:18px;align-self:center;}

/* リコメンドカード：やわらかく、誘う */
.rec{
  background:var(--sora);border:1px dashed var(--sora-line);
  border-radius:var(--r);padding:13px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.rec + .rec{margin-top:8px;}

/* ==========================================================
   バッジ
   ========================================================== */
.badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:99px;
  letter-spacing:.04em;white-space:nowrap;
}
.b-req{background:var(--ai);color:#fff;}                     /* 必須 */
.b-opt{background:#fff;color:var(--ai);border:1px solid var(--sora-line);} /* 追加 */
.b-ok{background:var(--wakakusa-bg);color:var(--wakakusa);}   /* 完了 */
.b-todo{background:var(--yamabuki-bg);color:var(--yamabuki);} /* 要選択 */
.b-off{background:var(--akane-bg);color:var(--akane);}        /* 休講 */
.b-gray{background:#F1F3F5;color:var(--sumi-thin);}

/* ==========================================================
   知らせ帯
   ========================================================== */
.note{
  border-radius:var(--r-s);padding:11px 13px;
  font-size:13px;line-height:1.6;
  border-left:3px solid;
}
.note-info{background:var(--sora);border-color:var(--ai);}
.note-warn{background:var(--yamabuki-bg);border-color:var(--yamabuki);}
.note-off{background:var(--akane-bg);border-color:var(--akane);}
.note-ok{background:var(--wakakusa-bg);border-color:var(--wakakusa);}
.note b{display:block;margin-bottom:2px;font-size:13px;}

/* ==========================================================
   ボタン
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border-radius:var(--r-s);
  font-size:14px;font-weight:600;letter-spacing:.03em;
  transition:background .15s,opacity .15s;
}
.btn-main{background:var(--ai);color:#fff;}
.btn-main:hover{background:var(--ai-deep);}
.btn-main:disabled{background:#C7CDD4;cursor:not-allowed;}
.btn-sub{background:#fff;color:var(--ai);border:1px solid var(--sora-line);}
.btn-sub:hover{background:var(--sora);}
.btn-danger{background:var(--akane);color:#fff;}
.btn-quiet{color:var(--sumi-thin);font-weight:500;}
.btn-quiet:hover{color:var(--sumi);}
.btn-w{width:100%;}
.btn-s{padding:6px 12px;font-size:12px;}
.btn-bar{
  position:sticky;bottom:64px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  margin:16px -16px -16px;padding:12px 16px;
}
/* 職員画面は下部ナビを持たないので浮かせない。
   sticky のままだと、カードが画面より高いときに後続の入力欄へ重なる。 */
.a-wrap .btn-bar{position:static;background:none;backdrop-filter:none;}

/* ==========================================================
   フォーム
   ========================================================== */
.field{margin-bottom:16px;}
.field label{
  display:block;font-size:13px;font-weight:600;
  margin-bottom:5px;
}
.field label .req{color:var(--akane);font-size:11px;margin-left:4px;}
.field .hint{font-size:11px;color:var(--sumi-thin);margin-top:4px;line-height:1.5;}
.input,select.input,textarea.input{
  width:100%;padding:11px 12px;
  border:1px solid var(--sora-line);border-radius:var(--r-s);
  font-size:15px;font-family:inherit;background:#fff;
  color:var(--sumi);
}
.input:focus{outline:2px solid var(--ai);outline-offset:-1px;border-color:var(--ai);}
.input::placeholder{color:#B4BCC5;}
select.input{cursor:pointer;}

/* トグル（属性設定用） */
.tgl{display:inline-flex;align-items:center;gap:9px;cursor:pointer;}
.tgl input{position:absolute;opacity:0;width:0;height:0;}
.tgl .sw{
  width:40px;height:23px;border-radius:99px;
  background:#CBD2D9;position:relative;transition:background .2s;flex-shrink:0;
}
.tgl .sw::after{
  content:'';position:absolute;top:2.5px;left:2.5px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.tgl input:checked + .sw{background:var(--ai);}
.tgl input:checked + .sw::after{transform:translateX(17px);}

/* チェック（回選択） */
.pick{
  display:flex;align-items:center;gap:11px;
  padding:12px 13px;border:1px solid var(--line);
  border-radius:var(--r-s);cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s;
}
.pick + .pick{margin-top:7px;}
.pick:hover{border-color:var(--sora-line);background:var(--sora);}
.pick.on{border-color:var(--ai);background:var(--sora);}
.pick.dead{opacity:.45;cursor:not-allowed;background:#FAFAFA;}
.pick input{width:19px;height:19px;accent-color:var(--ai);cursor:pointer;flex-shrink:0;}
.pick-main{flex:1;min-width:0;}
.pick-d{font-size:14px;font-weight:600;}
.pick-t{font-size:11px;color:var(--sumi-thin);}

/* 操作を下段に置く予約カード（S-09）。
   理由の文が長いと横並びのままでは日付側が1文字幅まで潰れるため、
   操作列を折り返して全幅に置く。 */
.pick.pick-stack{flex-wrap:wrap;align-items:flex-start;cursor:default;}
.pick.pick-stack:hover{border-color:var(--line);background:#fff;}
.pick-act{flex:1 0 100%;margin-top:10px;}

/* ==========================================================
   テーブル（職員）
   ========================================================== */
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:13px;}
.tbl th{
  background:var(--sora);color:var(--ai);
  font-weight:600;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--sora-line);
  white-space:nowrap;font-size:12px;
}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);}
.tbl tbody tr:hover{background:#FBFCFD;}
.tbl .num{font-family:var(--font-num);font-size:12px;}
.tbl-wrap{
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);
}

/* ==========================================================
   小物
   ========================================================== */
.stat{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;
  box-shadow:var(--shadow);
}
.stat .n{font-family:var(--font-num);font-size:26px;font-weight:700;color:var(--ai);line-height:1.2;}
.stat .l{font-size:11px;color:var(--sumi-thin);margin-top:2px;}
.stat.alert .n{color:var(--yamabuki);}

.sec-t{
  font-size:12px;font-weight:600;color:var(--sumi-thin);
  letter-spacing:.06em;margin:22px 0 9px;
  display:flex;align-items:center;gap:8px;
}
.sec-t::after{content:'';flex:1;height:1px;background:var(--line);}
.sec-t:first-child{margin-top:0;}

.row{display:flex;gap:10px;}
.row > *{flex:1;}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.muted{color:var(--sumi-thin);font-size:12px;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;}
.center{text-align:center;}

/* 空状態：招待であって、行き止まりではない */
.empty{
  text-align:center;padding:40px 20px;color:var(--sumi-thin);
}
.empty .ico{font-size:38px;opacity:.35;margin-bottom:10px;}
.empty p{font-size:13px;}

/* モーダル */
.modal-bg{
  position:fixed;inset:0;background:rgba(27,58,92,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:120;padding:16px;
}
.modal{
  background:#fff;border-radius:var(--r);
  width:100%;max-width:400px;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  max-height:88vh;overflow-y:auto;
}
.modal-h{padding:16px;border-bottom:1px solid var(--line);}
.modal-h h2{font-size:16px;font-weight:600;}
.modal-b{padding:16px;}
.modal-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;}
.modal-f .btn{flex:1;}

/* SMSふきだし */
.sms{
  background:#F1F3F5;border-radius:14px;
  padding:12px 14px;font-size:13px;line-height:1.6;
  max-width:300px;margin:0 auto;
  border:1px solid var(--line);
}
.sms .from{font-size:10px;color:var(--sumi-thin);margin-bottom:5px;}
.sms a{color:#0A66C2;text-decoration:underline;word-break:break-all;}

@media(max-width:900px){
  .a-side{display:none;}
}


/* ---------- ページ送り（A-03 生徒一覧など） ---------- */
.pager{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  margin-top:14px; font-size:13px;
}
.pager-item{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 9px;
  border:1px solid var(--line); border-radius:var(--r-s);
  background:#fff; color:var(--ai); text-decoration:none;
  font-family:var(--font-num);
}
.pager-item:hover{ background:var(--sora); }
.pager-item.is-current{
  background:var(--ai); border-color:var(--ai); color:#fff; font-weight:600;
}
.pager-item.is-disabled{
  color:var(--sumi-thin); background:#FAFAFA; cursor:default;
}
.pager-info{ margin-left:auto; color:var(--sumi-thin); font-size:12px; }

/* ---------- 月次カレンダー（A-06） ---------- */
.tbl.cal td{ padding:6px 5px; border:1px solid var(--line); }
.tbl.cal th{ padding:6px 5px; }

/* ---------- Alpine（A-13 文面編集の字数カウンタで初使用） ----------
   x-cloak を付けた要素は Alpine が起動するまで隠す。
   これが無いと、読み込み直後に警告文が一瞬だけ全部出てしまう。 */
[x-cloak]{ display:none !important; }

/* 数値に注意を向ける表示（SMSの分割送信など、越えると料金が変わる境目） */
.warn-num{
  font-family:var(--font-num); font-size:12px;
  color:var(--yamabuki); font-weight:600;
}

/* 要対応の行（A-14 の送信失敗など）。行ごと目立たせて見落としを防ぐ */
.tbl tr.row-alert > td{ background:var(--akane-bg); }

/* ---------- A-02 ダッシュボード ---------- */
/* 「対応が必要です」の4枚。狭い画面では2列に落とす */
.tile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1000px){ .tile-grid{ grid-template-columns:repeat(2,1fr); } }

/* 本文(左)と要約(右)の2段組。狭い画面では1列に積む */
.dash-cols{
  display:grid; grid-template-columns:1fr 340px;
  gap:18px; margin-top:24px; align-items:start;
}
@media (max-width:1100px){ .dash-cols{ grid-template-columns:1fr; } }

/* 達成率のバー */
.bar{ height:7px; background:var(--sora); border-radius:99px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--wakakusa); }

/* 数値の色づけ。良い値は若草、注意は山吹(.warn-num) */
.num-ok{ font-family:var(--font-num); font-weight:600; color:var(--wakakusa); }

/* 使っていない行（無効化したパターンなど）。消さずに残すため、薄く見せる */
.tbl tr.row-muted > td{ opacity:.55; }