/* 新システムで足したスタイル。現行の見た目を変えないよう、最小限にとどめる */

/* React で描画するモーダル（Bootstrap の JS を使わない） */
.modal.show.d-block { background: transparent; overflow-y: auto; }
.modal-backdrop.show { opacity: .5; }

/* ボタン要素を現行のリンク風ボタン（.btn-custom）と同じ見た目にする */
button.btn-custom { background: #fff; cursor: pointer; line-height: 1.6; }
button.btn-custom:hover { background: #004b96; color: #fff; }
#toTop { cursor: pointer; }

/* Google ログインのボタン（現行の .btn-login と同じ形） */
a.btn-login { display: block; text-align: center; text-decoration: none; }
a.btn-login:hover { text-decoration: none; }

/* 開発用ログイン（本番ビルドでは表示されない） */
.dev-login-note { border: 2px dashed #dc3545; padding: 8px 12px; margin-bottom: 16px; color: #dc3545; font-size: 13px; }

/* アップロードの進捗バー */
.upload-progress { height: 18px; margin-top: 6px; }
.bg-app-blue { background-color: #004b96 !important; }

/* 画面に出さない見出し（読み上げ用） */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 動画プレーヤーの寸法（現行は JS で 350px / 768px 未満は 270px にしていた）。CSP のため CSS で指定する */
.video-content .video-js { width: 100%; height: 350px; }
@media (max-width: 767.98px) { .video-content .video-js { height: 270px; } }

/* 管理画面の一覧のページャー（現行は DataTables のページャーを中央に置いていた） */
.report-pagination .pagination-box { position: static; display: flex; justify-content: center; margin-top: 4px; }
.report-pagination .pagination { margin-bottom: 0; }

/* 講座管理：講師の候補リスト（現行は select2） */
.teacher-options { position: absolute; z-index: 10; width: calc(100% - 15px); max-height: 260px; overflow-y: auto; }
.teacher-options .list-group-item { cursor: pointer; font-size: .9rem; }
.frm-btn:disabled { opacity: .5; cursor: not-allowed; }
.upload-progress-bar { height: 18px; }
.frm-btn { white-space: nowrap; }
/* 講座管理のタブ本文。学部ページ（style_pc.css）の .tab-content の背景色・幅を打ち消す */
.syllabuse-page-new .tab-content.syl-tab-content { width: 100%; background: transparent; padding: 20px 0 0 0; }

/* タブレット縦（768〜991px）。現行は AdminLTE の JS がこの幅でサイドバーを畳んでいた。
   JS を使わないため CSS で同じにする：サイドバーは隠し、メニューで重ねて開く（スマホと同じ） */
@media (min-width: 768px) and (max-width: 991.98px) {
  body:not(.sidebar-open) .main-sidebar,
  body:not(.sidebar-open) .main-sidebar::before { margin-left: -250px; box-shadow: none !important; }
  body .content-wrapper, body .main-header { margin-left: 0 !important; }
}
@media (max-width: 991.98px) {
  .sidebar-open #sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 1037; background: rgba(0, 0, 0, .1); }
}

/* パンくずの「>」。現行は項目の幅に対する割合（left:-10%）で置いていたため、
   長い項目ほど左にずれて前の項目（家アイコン）と重なっていた。位置を固定し、折り返しても1行目に置く */
.breadcrumb-item+.breadcrumb-item::before { left: 2px; top: .75em; }
/* 「>」と文字の間を空け、前後の項目がつながって1語に見えないようにする */
.breadcrumb .breadcrumb-item+.breadcrumb-item, .breadcrumb .breadcrumb-item+.breadcrumb-item.active { padding-left: 22px; }

/* フッター（著作権表示）は削除した。現行が固定フッターのために空けていた下の余白を詰める */
.content-wrapper { padding-bottom: 20px; margin-bottom: 0; }
.result-box { margin-bottom: 20px; }

/* 学部別講座一覧の表の見出し。現行は font-weight:100 で細く読みにくかったため太くする */
.content-syllabuses .table-inf table tr th { font-weight: 600; }
/* 講座検索の「受講する」ボタンが狭い幅で2行に折り返さないようにする */
.search-page .view-more .more { white-space: nowrap; }

/* ログイン画面の枠の幅（現行 user_login.css：PC 幅で 800px）。
   user_login.css が AdminLTE より先に読まれて 360px に負けていたため、ここで指定し直す */
@media (min-width: 768px) {
  .login-page .login-box { width: 800px; }
}

/* マスタ管理の追加・編集欄。ラベルを上端でそろえ、ボタンは1行目の入力欄の高さに合わせる */
.master-form .master-form-label { line-height: 1.25rem; min-height: 1.25rem; white-space: nowrap; }
.master-form .master-form-actions { margin-top: 1.25rem; }

/* U-11 受講履歴 */
.history-month { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.history-month-select { width: auto; min-width: 9em; }
.history-month-nav { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; }
.history-month-nav.disabled { opacity: .35; pointer-events: none; }
.history-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.history-summary-item { flex: 1 1 200px; border: 1px solid #dee2e6; padding: 12px 16px; background: #f8f9fa; }
.history-summary-label { font-size: .85rem; color: #555; }
.history-summary-value { font-size: 1.5rem; font-weight: bold; color: #004b96; }
.history-summary-note { font-size: .75rem; color: #555; }
.history-table th { white-space: nowrap; background: #f2f4f6; }
.history-card { border: 1px solid #dee2e6; padding: 10px 12px; margin-bottom: 10px; }
.history-card-tags { font-size: .8rem; color: #555; }
.history-card-name { font-weight: bold; margin: 2px 0 6px; word-break: break-all; }
.history-card-detail { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: .9rem; }
.history-card-detail dt { font-weight: normal; color: #555; }
.history-card-detail dd { margin: 0; }