/* ============================================================
   common.css — 管理画面・受講者画面 共通コンポーネント（Dojo共通基盤・P3）

   このファイルは「新しいデザイン」を一切含まない。すべて下記2モックの
   該当CSSブロックからの抽出・統合のみ（受入条件8：対応表として本コメントを使う）。
     [ADMIN] internal/orchestrate/2026-08-06_dojo_saas_mega/ref/admin_mock_lite.html
     [LEARN] internal/orchestrate/2026-08-06_dojo_saas_mega/ref/learner_mock_lite.html

   サイズ差の扱い（SPEC R-L0-1「受講者画面は管理画面より一回り大きい文字・ボタン」）:
   既定値（:root直下）はADMINの数値。学習者画面の<body>に data-app="learner" を
   付けると、ファイル末尾の [data-app="learner"] ブロックがLEARNの数値へ上書きする。
   2つの値を1クラスに同居させる新しい設計判断はしていない
   （両モックが実際に持っていた数値をそのまま両方書き写しただけ）。

   対応表（抜粋・主要ブロックのみ。詳細は各セレクタ直上のコメントに出典行を明記）:
     base reset / [hidden]  → LEARN L24-30 ([hidden]はADMINに無かったためLEARNから採用。PITFALLS P12予防)
     .btn 系                → ADMIN L76-88 / LEARN L54-63（学習者上書き分）
     .badge / .chip         → ADMIN L89-97
     .field/.label/.input   → ADMIN L98-103 / LEARN L86-87（学習者上書き分）
     .panel                 → ADMIN L70-75 / LEARN L47-53（学習者上書き分）
     .table                 → ADMIN L112-120
     .tabs                  → ADMIN L123-129 / LEARN L88-92（学習者上書き分）
     .modal / .drawer       → ADMIN L205-215（LEARNにはモーダル無し・共通部品として管理画面から採用）
     .toast                 → ADMIN L213-216
     .progress              → ADMIN L223-224
     .switch                → ADMIN L235-241
     .empty                 → ADMIN L229
     .spin（スピナー）        → LEARN L172-174（ADMINには無かったためLEARNから採用）
   ============================================================ */

/* ---------- ベースリセット [出典: LEARN L24-30、一部ADMIN L24-30と同一] ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important} /* PITFALLS P12予防: author CSSのdisplay指定より必ず優先させる */

/* 画面切替（2026-08-07 PMO追加）。
   nav.js の goView() が .view に on クラスを付け外しして画面を切り替えるが、
   その受け皿のCSSが共通化のときに移植漏れになっていた（出典: 両モックの .view/.view.on）。
   無いと全セクションが縦に積み上がって同時表示される。管理画面は自前の<style>で
   同じ定義を持っているが、正本はここに置く。 */
.view{display:none}
.view.on{display:block}
html,body{margin:0;padding:0}
body{
  background:var(--nvl-bg-page);color:var(--nvl-text);font-family:var(--nvl-font-ja);
  font-size:14px;line-height:1.7;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;letter-spacing:inherit}
input,select,textarea{font-family:inherit;font-size:13.5px;letter-spacing:.02em;color:var(--nvl-text)}
a{color:var(--nvl-blue)}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--nvl-ink)}

/* ---------- パネル [出典: ADMIN L70-75] ---------- */
.panel{background:var(--nvl-white);border:1px solid var(--nvl-border);border-radius:var(--r);padding:18px 20px;margin-bottom:18px}
.panel-warm{background:var(--nvl-bg-light)} /* LEARN L48 */
.panel-cool{background:var(--nvl-tint-blue);border-color:rgba(0,126,202,.18)} /* LEARN L49 */
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.panel-title{font-size:14.5px;font-weight:700;letter-spacing:.06em;color:var(--nvl-ink);display:flex;align-items:center;gap:9px;margin-bottom:0}
.panel-head .right,.panel-title .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.hint{font-size:11.5px;color:var(--nvl-muted);line-height:1.65;margin:0 0 10px}
.hint.tight{margin:0}
.hint.center{text-align:center}

/* ---------- ボタン4種 [出典: ADMIN L76-88] ---------- */
.btn{border-radius:var(--r);padding:8px 16px;font-size:13px;font-weight:500;letter-spacing:.05em;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--nvl-gradient);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:#fff;color:var(--nvl-blue);border-color:var(--nvl-blue)}
.btn-secondary:hover{background:var(--nvl-tint-blue)}
.btn-ghost{background:#fff;color:var(--nvl-text);border-color:var(--nvl-border)}
.btn-ghost:hover{background:var(--nvl-bg-light)}
.btn-danger{background:#fff;color:var(--nvl-bad);border-color:#e0bfba}
.btn-danger:hover{background:var(--nvl-bad-bg)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px;border-radius:var(--r)}
.btn-lg{padding:11px 26px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- バッジ・チップ [出典: ADMIN L89-97] ---------- */
.badge{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:2px 10px;border-radius:var(--pill);background:var(--nvl-tint-blue);color:var(--nvl-blue)}
.badge.gray{background:var(--nvl-bg-light);color:var(--nvl-muted)}
.badge.good{background:var(--nvl-good-bg);color:var(--nvl-good)}
.badge.warn{background:var(--nvl-warn-bg);color:var(--nvl-warn)}
.badge.bad{background:var(--nvl-bad-bg);color:var(--nvl-bad)}
.badge.accent{background:var(--nvl-tint-orange);color:var(--nvl-orange-text)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 10px;border:1px solid var(--nvl-border);border-radius:var(--pill);background:#fff;color:var(--nvl-text)}
.chip button{border:0;background:none;color:var(--nvl-muted);cursor:pointer;font-size:12px;line-height:1;padding:0}
.chip button:hover{color:var(--nvl-bad)}

/* ---------- フォーム部品 [出典: ADMIN L98-106] ---------- */
.field{margin-bottom:14px}
.label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--nvl-text);margin-bottom:5px}
.label .opt{font-weight:400;color:var(--nvl-muted);letter-spacing:.04em;margin-left:6px}
.input,.select,.textarea{width:100%;border:1px solid var(--nvl-border);border-radius:var(--r);padding:8px 11px;background:#fff}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--nvl-blue)}
.textarea{line-height:1.8;resize:vertical}
.field-error{font-size:11.5px;color:var(--nvl-bad);margin-top:4px} /* SPEC §3.2 入力エラー表示・両モックの.hintを踏襲した新規クラス名だが色/サイズはADMIN既存値を流用 */
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > *{flex:1;min-width:180px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:18px;align-items:start}
@media(max-width:1120px){.split{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.grid-2{grid-template-columns:1fr}}
/* バグ#5対応（QA_P3_REPORT.md §2 #5・768px受講者一覧の横スクロール）:
   grid itemは既定でmin-width:autoのため、中に.table-wrap(overflow-x:auto)付きの表が
   入ると、表の最小コンテンツ幅がそのままグリッドトラック→ページ全体を押し広げてしまう
   （実測: 受講者一覧の.grid-2「招待の状況」列で発生。.split/.grid-3には1120px時点で
   1カラム化する既存の折返しがあるが、.grid-2だけそれが無く768pxでも2カラムのままだった
   ため上の1行で追加）。表を含むgrid item全般に効くよう、min-width:0はgrid item全種へ
   共通で与える（.table-wrapの内部横スクロールに正しく逃がす）。 */
.grid-2 > *,.grid-3 > *,.split > *{min-width:0}

/* ---------- テーブル [出典: ADMIN L112-120] ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--nvl-border);border-radius:var(--r);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--nvl-muted);padding:10px 14px;border-bottom:1px solid var(--nvl-border);background:var(--nvl-bg-light);white-space:nowrap}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--nvl-border);vertical-align:middle}
/* 狭い画面での折返し対策（2026-08-07 PMO追加・QAが375pxで発見）。
   横スクロールできる .table-wrap の中にあっても、td が折り返し可能だとブラウザは
   列幅を詰めようとして日本語を1文字ずつ改行する（1行が十数行分の高さになり読めない）。
   セル内を nowrap にして、はみ出しは .table-wrap の横スクロールに逃がす。
   長文が入るセルだけ .wrap を付けて個別に折り返しを許可する。 */
table.tbl td{white-space:nowrap}
table.tbl td.wrap{white-space:normal}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl tbody tr.clickable:hover{background:var(--nvl-tint-blue)}
.num{font-family:var(--nvl-font-en);font-weight:500}
.mono{font-family:var(--nvl-font-en)}
.mini{font-size:11px;color:var(--nvl-muted)}

/* ---------- タブ [出典: ADMIN L123-129] ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--nvl-border);margin-bottom:18px;flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:9px 16px;font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--nvl-muted);cursor:pointer;margin-bottom:-1px}
.tab:hover{color:var(--nvl-blue)}
.tab.on{color:var(--nvl-blue);border-bottom-color:var(--nvl-blue);font-weight:700}
.tabpane{display:none}
.tabpane.on{display:block}

/* ---------- モーダル・ドロワー・トースト [出典: ADMIN L205-216] ---------- */
.backdrop{position:fixed;inset:0;background:rgba(8,8,8,.42);display:grid;place-items:center;z-index:60;padding:24px}
.modal{background:#fff;border-radius:var(--r);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;border:1px solid var(--nvl-border)}
.modal-head{padding:18px 22px 12px;border-bottom:1px solid var(--nvl-border);display:flex;align-items:center;gap:10px}
.modal-title{font-size:15px;font-weight:700;letter-spacing:.05em}
.modal-body{padding:18px 22px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--nvl-border);display:flex;gap:8px;justify-content:flex-end;background:var(--nvl-bg-light)}
.drawer-wrap{position:fixed;inset:0;background:rgba(8,8,8,.42);z-index:60;display:flex;justify-content:flex-end}
.drawer{background:#fff;width:min(560px,94vw);height:100%;overflow-y:auto;border-left:1px solid var(--nvl-border)}
.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--nvl-ink);color:#fff;font-size:12.5px;letter-spacing:.05em;padding:10px 20px;border-radius:var(--r);animation:tin .2s ease}
.toast.error{background:var(--nvl-bad)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 進捗・スイッチ・空状態・区切り [出典: ADMIN L223-230,235-241] ---------- */
.progress{height:5px;background:var(--nvl-bg-light);border-radius:3px;overflow:hidden;min-width:70px}
.progress i{display:block;height:100%;background:var(--nvl-gradient)}
.divider{height:1px;background:var(--nvl-border);margin:16px 0}
.empty{padding:34px;text-align:center;color:var(--nvl-muted);font-size:12.5px}
.seg{display:inline-flex;border:1px solid var(--nvl-border);border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:#fff;padding:5px 13px;font-size:12px;color:var(--nvl-text);cursor:pointer;border-right:1px solid var(--nvl-border)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--nvl-tint-blue-strong);color:var(--nvl-blue);font-weight:600}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px}
.switch input{display:none}
.switch i{width:34px;height:19px;border-radius:var(--pill);background:var(--nvl-border);position:relative;transition:.15s;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked + i{background:var(--nvl-blue)}
.switch input:checked + i::after{left:17px}
.notice{background:var(--nvl-tint-blue);border:1px solid rgba(0,126,202,.18);border-radius:var(--r);padding:11px 14px;font-size:12.5px;line-height:1.7;color:var(--nvl-text)}
.notice.accent{background:var(--nvl-tint-orange);border-color:rgba(249,115,22,.22)}

/* ---------- スピナー [出典: LEARN L172-174。ADMINには無し] ---------- */
.spin{width:38px;height:38px;border:3px solid var(--nvl-border);border-top-color:var(--nvl-blue);border-radius:50%;margin:0 auto 18px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 読み込みプレースホルダー [SPEC R-CM-10。両モックに専用クラス無し・.bg-lightの流用] ---------- */
.skeleton-block{background:var(--nvl-bg-light);border-radius:var(--r);min-height:80px}

/* ============================================================
   [data-app="learner"] — 受講者画面サイズ上書き（SPEC R-L0-1）
   数値はすべて LEARN の該当行からの転記（新規の値は無い）
   ============================================================ */
[data-app="learner"] body,
body[data-app="learner"]{font-size:15px;line-height:1.75} /* LEARN L27 */
[data-app="learner"] input,[data-app="learner"] select,[data-app="learner"] textarea{font-size:15px} /* LEARN L29 */

[data-app="learner"] .btn{padding:11px 22px;font-size:15px} /* LEARN L54 */
[data-app="learner"] .btn-lg{padding:15px 40px;font-size:16px;font-weight:700} /* LEARN L61 */
[data-app="learner"] .btn-sm{padding:6px 14px;font-size:13px} /* LEARN L62 */
[data-app="learner"] .btn:disabled{opacity:.4} /* LEARN L63 */

[data-app="learner"] .badge{font-size:11px;padding:3px 11px} /* LEARN L64 */
[data-app="learner"] .panel{padding:20px 22px} /* LEARN L47 */
[data-app="learner"] .panel-title{font-size:15px;margin-bottom:12px} /* LEARN L50 */
[data-app="learner"] .hint{font-size:12.5px;line-height:1.7;margin:0 0 12px} /* LEARN L52 */

[data-app="learner"] .input{padding:11px 13px} /* LEARN L86 */
[data-app="learner"] .tabs{margin-bottom:20px} /* LEARN L88 */
[data-app="learner"] .tab{padding:9px 18px;font-size:13.5px} /* LEARN L89 */

[data-app="learner"] table.tbl{font-size:13.5px} /* LEARN L206 */
[data-app="learner"] .toast{font-size:13px;padding:11px 22px} /* LEARN L212 */

/* 店頭タブレット前提のタップ領域（SPEC R-L0-1: 44px四方以上） */
[data-app="learner"] .btn,[data-app="learner"] .tab,[data-app="learner"] .nav-item{min-height:44px}
