/* Gakken LX 講習システム 共通スタイル（白ベース・明るめ） */
:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --border: #e3e8ef;
  --text: #1d2433;
  --text-muted: #5b6675;
  --primary: #2563eb;
  --primary-hover: #1e4fd8;
  --accent: #14b8a6;
  --success: #15803d;
  --danger: #dc2626;
  --warning: #b45309;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;   /* 本文の基準。見出しとの差をつけるため16pxから下げた */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-header .logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: .02em;
}
.app-header .logo .accent { color: var(--primary); }
.app-header .role-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff4ff;
  color: var(--primary);
  font-weight: 600;
}
.app-header .role-badge.teacher { background:#eff4ff; color:var(--primary); }
.app-header .role-badge.student { background:#ecfdf5; color:#0f766e; }
.app-header .role-badge.admin { background:#fef3c7; color:var(--warning); }
.app-header .spacer { flex: 1; }
.app-header .status { font-size: 13px; color: var(--text-muted); }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }

/* ===== 文字の大きさの段階（260807・260808の指摘への対応）=====
   本文が16pxで見出しが17pxだったため、見出しが見出しに見えず画面の構造が読めなかった。
   本文を14pxに下げ、見出しとの差をはっきりつける。以下の5段階だけを使う。

     24px  h1        画面名（1画面に1つ）
     18px  h2        カードの見出し
     16px  h3        カードの中のセクション見出し
     14px  本文・項目名（.field label は太字）
     13px  .hint     補足・注釈

   新しく文字サイズを足すときは、この5段階のどれかに必ず当てはめる。 */
h1 { font-size: 24px; margin: 0 0 4px; font-weight: 700; letter-spacing: .01em; }
h2 { font-size: 18px; margin: 0 0 12px; color: var(--text); font-weight: 700; }
h3 { font-size: 16px; margin: 0 0 8px; color: var(--text); font-weight: 700; }
.lead { color: var(--text-muted); font-size: 15px; margin: 0 0 20px; }
/* 見出しに添える補足（件数・状態など）は見出しより一段小さくする */
h1 .sub, h2 .sub, h2 .hint, h3 .sub { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.hint { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* カードの中の「まとまり」。見出し＋説明＋中身をひとかたまりとして扱う。
   独立した作業なので、番号は振らない（順にやる手順だと誤解されるため）。 */
.sec { margin-top: 22px; }
.sec:first-child { margin-top: 0; }
.sec > .sec-desc { margin: -4px 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
/* 枠で囲むまとまり（操作が集まっている箇所） */
.sec.boxed { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; background: #fbfcfe; }
/* 行の頭に置く項目名。入力欄やボタンと同じ行に並ぶので、幅をそろえて読み位置を固定する */
.sec-label { font-size: 14px; font-weight: 600; width: 190px; flex: none; }
@media (max-width: 700px){ .sec-label { width: 100%; } }

/* 表の行末に並ぶ操作ボタン。数が多いので詰めて、右そろえで1行に収める */
.row-ops { display:flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-ops .btn { padding: 6px 10px; font-size: 12.5px; }

/* 択一の選択肢（メールの宛先など）。ボタンを複数置く代わりに、
   「選んでから1つのボタンで実行する」形にするための枠（指摘260808） */
.pick {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
}
.pick:hover { border-color: #b9c6db; }
.pick.on { border-color: var(--primary); border-width: 2px; padding: 11px 13px; background: #f8fbff; }
.pick input[type=radio] { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--primary); }
.pick .pick-body { display: block; flex: 1; min-width: 0; }
.pick .pick-title { display: block; font-size: 14px; font-weight: 600; }
.pick .pick-desc { display: block; font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-top: 2px; }
/* 選ばれていない選択肢の入力欄は触れないようにして、押し間違いを防ぐ */
.pick:not(.on) input[type=text] { background: #f6f8fb; color: var(--text-muted); pointer-events: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.field { margin-bottom: 14px; }
.field label { display:block; font-size: 14px; color: var(--text); margin-bottom: 6px; font-weight: 600; }
/* 項目名のうしろに付ける補足（任意・単位など）は本体より小さく薄くする */
.field label .opt { font-size: 12px; font-weight: 500; color: var(--text-muted); }
/* time・date が対象から漏れていて、他の入力欄と見た目・高さが揃っていなかった（指摘260807「UIが歪」） */
input[type=text], input[type=number], input[type=password],
input[type=time], input[type=date], input[type=email], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
textarea { min-height: 80px; resize: vertical; }

.btn {
  display: inline-flex; align-items:center; justify-content:center; gap: 6px;
  padding: 10px 18px;
  border: none; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--primary-hover); }
.btn:disabled { background: #c8d1de; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: #f8fafc; }
.btn.danger { background: var(--danger); }
.btn.success { background: var(--success); }
/* 指摘（260807）：文字だけの操作はリンクに見えて「押せる」と分からない。
   ghost も枠と下地を持たせ、ボタンだと一目で分かる形にする。 */
.btn.ghost {
  background: #f4f7fb; color: var(--primary);
  border: 1px solid #d3ddec; padding: 8px 14px; font-size: 13px;
}
.btn.ghost:hover { background: #e8eefa; border-color: var(--primary); }
.btn.ghost:disabled { background: #f4f6f9; color: #a8b2c1; border-color: var(--border); }
/* 取り消し・削除など、押すと戻せない操作は赤系の枠にする */
.btn.ghost.warn { background:#fef4f4; color: var(--danger); border-color:#f3cdcd; }
.btn.ghost.warn:hover { background:#fce8e8; border-color: var(--danger); }
/* 目立たせたい主要操作（受講者画面の再入室など）。白地の中で確実に見つかる濃さにする */
.btn.dark { background: #1c2433; color: #fff; }
.btn.dark:hover { background: #0f1522; }
.btn.lg { padding: 14px 28px; font-size: 17px; border-radius: var(--radius); }

.video-panel { background: #0f172a; border-radius: var(--radius); overflow: hidden; position: relative; }
.video-panel video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; display: block; }
.video-panel.tile video { aspect-ratio: 4/3; }
.video-panel .video-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff; font-size: 13px;
}
.video-panel.tile .video-label { padding: 4px 8px; font-size: 11px; }

.empty-state {
  color: var(--text-muted); font-size: 13px;
  padding: 28px; text-align: center;
  background: #fff; border: 1px dashed var(--border); border-radius: var(--radius);
}
.toast {
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.7;
}
.toast.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.toast.warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.row { display:flex; gap: 12px; align-items:center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }

.url-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.url-list .item {
  display: flex; align-items:center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff;
}
.url-list .item .seat { font-weight: 600; min-width: 70px; }
.url-list .item .url {
  flex: 1; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.segment {
  display: inline-flex; padding: 4px; background: #eef2f7; border-radius: 999px; gap: 4px;
}
.segment button {
  border: none; background: transparent; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--text-muted);
}
.segment button.on { background: #fff; color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 18px; text-align: center;
  color: var(--text-muted); font-size: 13px;
  cursor: pointer; transition: all .15s ease;
}
.dropzone:hover, .dropzone.on { border-color: var(--primary); background: #f8fafc; color: var(--text); }

/* ===== 講習スケジュール（カレンダー） ===== */
.cal-header { display:flex; align-items:center; justify-content:center; gap: 14px; margin-bottom: 10px; }
.cal-header .cal-title { font-weight: 700; font-size: 16px; min-width: 130px; text-align:center; }
.cal-nav {
  border: 1px solid var(--border); background:#fff; border-radius: var(--radius-sm);
  width: 34px; height: 34px; cursor: pointer; font: inherit; color: var(--text);
}
.cal-nav:hover { background:#f8fafc; }
.cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align:center; font-size: 11px; color: var(--text-muted); padding: 4px 0; font-weight:600; }
.cal-dow.sun { color: var(--danger); }
.cal-dow.sat { color: var(--primary); }
.cal-cell {
  min-height: 76px; background:#fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px; font-size: 11px;
  display:flex; flex-direction:column; gap: 3px; overflow:hidden;
}
.cal-cell.out { background: #f8fafc; color:#c0c8d4; }
.cal-cell.today { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.cal-cell .d { font-weight: 600; }
.cal-cell.today .d { color: var(--primary); }
/* カレンダーのチップ（指摘260807）：出すのは「会場番号」と「講習名」だけ。
   講習の種類は色で見分ける（センター公式サイトの配色に合わせる）。 */
.cal-chip {
  background: #eef2f7; color: var(--text-muted);
  border-radius: 5px; padding: 3px 5px;
  overflow: hidden;
  cursor: pointer; border: 1px solid transparent;
  line-height: 1.4; font-size: 11.5px;
}
/* 会場番号は省略せず必ず出す。講習名だけ幅に応じて省略する */
.cal-chip-top { font-weight: 700; white-space: nowrap; }
.cal-chip-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.cal-chip:hover { border-color: currentColor; }
/* 第一種電気工事士定期講習＝緑 ／ 認定電気工事従事者認定講習＝紫 ／ 特種電気工事資格者認定講習＝オレンジ */
.cal-chip.k-teiki   { background:#e7f5ec; color:#166534; }
.cal-chip.k-nintei  { background:#f3e8ff; color:#6b21a8; }
.cal-chip.k-tokushu { background:#fff1de; color:#9a5b00; }

/* 講習の種類の凡例・バッジ（カレンダーと同じ色） */
.kind-dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.kind-dot.k-teiki { background:#166534; }
.kind-dot.k-nintei { background:#6b21a8; }
.kind-dot.k-tokushu { background:#9a5b00; }
.kind-dot.k-other { background:#94a3b8; }

/* 講習一覧 */
.event-list { display:flex; flex-direction:column; gap: 8px; }
.event-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; background:#fff;
  display:flex; flex-wrap:wrap; align-items:center; gap: 8px 12px;
}
.event-item .when { font-weight: 600; min-width: 168px; font-size: 13px; }
.event-item .ttl { flex:1 1 180px; font-weight: 600; }
.event-item .ops { display:flex; gap: 6px; flex-wrap:wrap; }
.badge {
  display:inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.badge.auto { background:#ecfdf5; color:#0f766e; }
.badge.manual { background:#eef2f7; color:var(--text-muted); }
.badge.video-ok { background:#eff4ff; color:var(--primary); }
.badge.video-none { background:#fef3c7; color:var(--warning); }

/* タブ */
.tabs { display:flex; gap: 6px; margin-bottom: 16px; border-bottom: 2px solid var(--border); }
.tabs button {
  border:none; background:transparent; font:inherit; font-weight:600;
  color: var(--text-muted); padding: 10px 18px; cursor:pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }

/* 時間割（受講者・企業担当者画面） */
.tt-row {
  display:flex; gap: 12px; align-items:center;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.tt-row:last-child { border-bottom: none; }
.tt-row .tt-time {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-muted); min-width: 112px; white-space: nowrap;
}
.tt-row.on {
  background: #eff6ff; border-left: 3px solid var(--primary);
  border-radius: 6px; font-weight: 600;
}
.tt-row.on .tt-time { color: var(--primary); }
.tt-row.done { color: #b6bfcb; }
.tt-row.done .tt-time { color: #b6bfcb; }
.tt-row .tt-now {
  margin-left: auto; background: var(--primary); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 10px;
  white-space: nowrap;
}

/* 時間割の行エディタ（管理画面）：1段目=時刻・削除、2段目=内容（全幅） */
.tt-edit-row {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-bottom:8px; padding:8px;
  border:1px solid var(--border); border-radius: var(--radius-sm); background:#fbfcfe;
}
.tt-edit-row input[type=time] { width:100px; flex:none; padding:8px 6px; }
.tt-edit-row .tt-in-x { margin-left:auto; flex:none; }
.tt-edit-row .tt-in-l { flex:1 1 100%; min-width:0; order:5; } /* 内容は2段目に全幅 */

/* チャット */
.chat-list {
  display:flex; flex-direction:column; gap: 6px;
  max-height: 260px; overflow:auto;
  background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px;
}
.chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.chat-msg .meta { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.chat-msg.from-me { align-self: flex-end; background: #dbeafe; }
.chat-msg.from-staff { align-self: flex-start; background: #fff; border: 1px solid var(--border); }
.chat-msg.from-student { align-self: flex-start; background: #fef9c3; border: 1px solid #fde68a; }
.chat-msg.announce { border-left: 3px solid var(--accent); }
.chat-empty { color: var(--text-muted); font-size: 12px; text-align:center; padding: 12px; }

/* 監視用テーブル */
.data-table { width:100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.data-table th { background:#eef2f7; font-weight: 700; font-size: 12px; color: var(--text); white-space: nowrap; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.status-pill { display:inline-block; font-size: 11px; font-weight:600; padding: 2px 10px; border-radius: 999px; }
.status-pill.on { background:#ecfdf5; color:#0f766e; }
.status-pill.away { background:#fef3c7; color:var(--warning); }
.status-pill.left { background:#eef2f7; color:var(--text-muted); }
/* 挙手中は目に留まるよう強めの色にする */
.status-pill.raised { background:#fee2e2; color:#b91c1c; }

/* アンケートの5段階 */
.rate-group { display:flex; gap: 6px; }
.rate-group label {
  flex:1; text-align:center; border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 0; cursor:pointer; font-weight:600; background:#fff;
}
.rate-group input { display:none; }
.rate-group input:checked + span { color: var(--primary); }
.rate-group label:has(input:checked) { border-color: var(--primary); background:#eff6ff; }

/* 自動配信バナー */
.auto-banner {
  background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46;
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px;
  margin-bottom: 12px;
}
.auto-banner b { font-size: 15px; }

/* 受講URL一覧の折りたたみ見出し（数が多いので既定は畳んでおく）。
   薄い灰色だと「押せる」と分からず見落とされたため、ボタンと同じ見た目にする（指摘260816） */
.url-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: #fff; border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; color: var(--primary);
}
.url-summary:hover { background: #eff4ff; }
.url-summary::-webkit-details-marker { display: none; }
/* 左に開閉の印を置く（右端の小さな▾では気づけない） */
.url-summary::before { content: '▶'; font-size: 11px; flex: none; transition: transform .12s; }
details[open] > .url-summary::before { transform: rotate(90deg); }
.url-summary::after {
  content: '開く'; margin-left: auto; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--primary); border-radius: 999px; padding: 3px 12px;
}
details[open] > .url-summary::after { content: '閉じる'; background: var(--text-muted); }