/* 管理ポータル: タブ・承認カード・ダッシュボード・ユーザー表・会話履歴・監査ログ。
   ボタン・入力・表・カード・しるしの見た目は components.css にある。 */

#admin { flex:1; min-width:0; overflow-y:auto; padding:var(--s5); }
#admin h2 { font-size:var(--f-lg); margin-bottom:var(--s1); }
#admin h3 { font-size:var(--f-md); font-weight:600; margin-bottom:var(--s2); }

/* --- 第1階層のタブ。**下線で示す**（左ナビの「面」と役割が違うことを見せる） --- */
.tabs { display:flex; gap:var(--s1); border-bottom:1px solid var(--line);
        margin-bottom:var(--s5); overflow-x:auto; scrollbar-width:thin; }
.tab { border:none; background:none; white-space:nowrap; font-family:inherit;
       padding:var(--s2) var(--s4); font-size:var(--f-md); cursor:pointer;
       color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px;
       transition:color .12s ease, border-color .12s ease; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--accent); font-weight:600; border-bottom-color:var(--accent); }
.tab[hidden] { display:none; }

/* --- 第2階層（記憶／手順書／追加する知識）。上のタブと別物と分かるよう面で示す。
       **3種を縦に積まない** —— 承認待ちは本番で174件あり、積むと下へ辿り着けない --- */
.subtabs { display:flex; gap:var(--s2); margin:var(--s4) 0 var(--s3); flex-wrap:wrap; }
.subtab { border:1px solid var(--line); background:var(--surface); border-radius:var(--r-pill);
          padding:var(--s1) var(--s4); font-family:inherit; font-size:var(--f-sm);
          cursor:pointer; color:var(--ink-2); transition:all .12s ease; }
.subtab:hover { border-color:var(--ink-3); color:var(--ink); }
.subtab.active { background:var(--accent); border-color:var(--accent); color:#fff;
                 font-weight:600; }
.subtab.active .badge { background:#fff; color:var(--accent); }
.subpane[hidden] { display:none; }

/* 承認済みは既定で畳む。件数だけ見出しに出す（開かなくても規模が分かる） */
#tab-mem details { margin-top:var(--s4); max-width:820px; }
#tab-mem details > summary { font-size:var(--f-sm); color:var(--ink-2); cursor:pointer;
                             padding:var(--s2) 0; }
#tab-mem details[open] > summary { margin-bottom:var(--s2); }

/* --- 承認カード（知見・手順書）。ダッシュボードの直近エラーにも流用している --- */
.mem { padding:var(--s3) var(--s4); margin-bottom:var(--s3); max-width:820px; }
.mem .t { font-weight:600; font-size:var(--f-lg); }
.mem .b { font-size:var(--f-md); margin:var(--s2) 0; line-height:1.8; }
.mem .m { font-size:var(--f-xs); color:var(--ink-2); }
.mem .acts { margin-top:var(--s3); display:flex; gap:var(--s2); flex-wrap:wrap; }
.mem.done { opacity:.55; }
.mem .kv { display:grid; grid-template-columns:64px minmax(0,1fr); gap:3px var(--s3);
           font-size:var(--f-sm); color:var(--ink-2); margin:var(--s2) 0; }
.mem .kv dd { margin:0; color:var(--ink); word-break:break-all; }
/* 追加する知識（画面I）。承認するとその場で索引に入るので、押した結果を同じカードに出す */
.mem .after { margin-top:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--r1);
              font-size:var(--f-sm); background:var(--ok-soft);
              border:1px solid var(--ok-line); line-height:1.8; }
.mem .after.miss { background:var(--warn-soft); border-color:var(--warn-line); }
.mem .after b { font-variant-numeric:tabular-nums; }
.mem .after button { margin-top:var(--s2); }
.mem .rback { margin-top:var(--s2); display:flex; gap:var(--s2); }
.mem .rback input { flex:1; min-width:0; }
.mem pre { white-space:pre-wrap; font-size:var(--f-sm); line-height:1.7;
           background:var(--surface-2); border-radius:var(--r1); padding:var(--s3);
           margin:var(--s2) 0; }

/* --- ダッシュボード --- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
         gap:var(--s3); margin-bottom:var(--s5); }
.card { padding:var(--s3) var(--s4); }
.card .v { font-size:var(--f-num); font-weight:600; color:var(--ink); line-height:1.2;
           font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.card .k { font-size:var(--f-xs); color:var(--ink-2); margin-top:2px; }
.card.warn .v { color:var(--warn); }
.card.bad .v { color:var(--bad); }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:var(--s5); }
.bar { display:flex; align-items:center; gap:var(--s2); font-size:var(--f-sm);
       margin:var(--s1) 0; }
.bar .lbl { width:110px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis;
            white-space:nowrap; color:var(--ink-2); }
.bar .fill { height:12px; background:var(--accent); border-radius:var(--r1); min-width:2px; }
.bar .n { color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* --- 表・フォームの器。**画面より広い表は器の中で横に流す**
       （縮めると数字が読めない。行が縦1文字に潰れるのを何度か踏んだ） --- */
#userlist, #allSessions, #auditList, #proJobs { overflow-x:auto; }
#allSessions .utable { max-width:1060px; }
#userlist .utable { max-width:1140px; }
#userlist .utable td:last-child { white-space:nowrap; }
.sesstotal { max-width:1060px; margin-top:var(--s2); font-size:var(--f-sm);
             color:var(--ink-2); font-variant-numeric:tabular-nums; }
.sesstotal b { color:var(--ink); font-weight:600; }

.uform { display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; max-width:900px; }
.srow { display:flex; gap:var(--s2); margin-bottom:var(--s3); max-width:900px;
        flex-wrap:wrap; align-items:center; }
.srow input:not([type=checkbox]), .srow select { flex:1; min-width:180px; }

#sessBody { max-width:900px; max-height:440px; overflow-y:auto; background:var(--surface);
            border:1px solid var(--line); border-radius:var(--r2); padding:var(--s3);
            box-shadow:var(--sh1); }
#sessBody .m { margin-bottom:var(--s3); font-size:var(--f-md); line-height:1.8; }
#sessBody .m .who { font-size:var(--f-xs); color:var(--ink-2); }
#sessBody .m.u { color:var(--accent); font-weight:600; }

/* --- 監査ログ --- */
.audit { padding:var(--s3); margin-bottom:var(--s2); max-width:900px; }
.audit .h { font-size:var(--f-sm); }
.audit .h .bad { color:var(--bad); }
.audit pre { background:var(--surface-2); border-radius:var(--r1); padding:var(--s2);
             margin-top:var(--s2); font-size:var(--f-xs); font-family:var(--mono);
             overflow-x:auto; max-height:240px; }

/* --- ユーザー管理のメール欄（§10-2-2 の通知先）。
       **保存ボタンと、その場に出る合図**を持たせる —— 入力欄だけだと
       「入れたのに効いていない」ように見える（表の一番下の文言では気づけない） --- */
.utable td.mailcell { white-space:nowrap; }
.utable input.email { width:180px; min-width:120px; padding:var(--s1) var(--s2);
                      font-size:var(--f-sm); vertical-align:middle; }
.utable button.savemail { margin-left:var(--s1); padding:3px var(--s2);
                          font-size:var(--f-xs); vertical-align:middle;
                          border-color:var(--accent-line); color:var(--accent); }
.utable .mailmsg { display:inline-block; margin-left:var(--s2); font-size:var(--f-xs);
                   color:var(--ink-2); }
.utable .mailmsg.ok { color:var(--ok); }
.utable .mailmsg.ng { color:var(--bad); }

/* --- ロール欄（複数選択）。1人が複数の立場を持てる --- */
.rolechk { font-size:var(--f-sm); margin-right:var(--s3); white-space:nowrap; }
.rolechk input { margin-right:3px; vertical-align:middle; }
.rolechk.off { color:var(--bad); }
.rolecell { min-width:300px; }
.nuroles { display:inline-flex; align-items:center; gap:var(--s1); flex-wrap:wrap; }
/* 無効なアカウントは行ごと沈める（ロール欄は押せるままにする＝戻せる） */
#userlist .utable tr.off td { background:var(--surface-2); color:var(--ink-2); }
#userlist .utable tr.off td:first-child { text-decoration:line-through; }

/* --- 画面幅への追随 --- */
@media (max-width:900px),
       (hover:none) and (pointer:coarse) and (max-width:1280px) {
  #admin { padding:var(--s4) var(--s3); }
  .tabs { margin-bottom:var(--s4); }
  .tab { padding:var(--s2) var(--s3); }
  .cards { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--s2); }
  .card .v { font-size:var(--f-xl); }
  .cols { gap:var(--s4); }
  .srow input:not([type=checkbox]), .srow select { min-width:0; }
  .uform { flex-direction:column; align-items:stretch; }
  .uform input:not([type=checkbox]), .uform button { width:100%; }
  /* 表は横に流す。**器に丸みと影があると「続きがある」ことが伝わる** */
  #userlist .utable, #allSessions .utable, #proJobs .utable { min-width:640px; }
  /* 横に流すものは、流せることが分かるように器を画面幅いっぱいに使う */
  #userlist, #allSessions, #auditList, #proJobs {
    margin-right:calc(var(--s3) * -1); padding-right:var(--s3); }
  .note { max-width:none; }
  .mem, .audit, #sessBody { max-width:none; }
  #tab-mem details { max-width:none; }
}