/* ============================================================
   顧客側の管理画面だけ（メンバー・グループ・監査ログ・人事同期）。

   2026-08-16: style.css（867行）を画面ごとに分けたもの。読み込む順は
   index.html / operator.html の <link> の並びが正で、その順に連結すると
   元の style.css と同じ適用順になる。順番を入れ替えないこと。
   ============================================================ */
.rolectl{ display:flex; align-items:center; gap:8px; }

.protobar{
  margin-top:14px; padding:12px 16px; border:1px dashed var(--line);
  border-radius:var(--radius); display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-size:.86em; color:var(--ink-3);
}
.rolectl label{ font-size:.82em; color:var(--ink-2); }
.rolectl select{ width:auto; min-height:46px; padding:0 12px; font-size:.92em; }

.syncbar{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:16px 20px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); box-shadow:var(--shadow); margin-bottom:20px;
}
.syncbar .lg{
  width:42px; height:42px; border-radius:8px; flex:0 0 42px; display:grid; place-items:center;
  background:var(--teal-soft); color:var(--teal); font-weight:700; font-size:.82em;
}
.syncbar .st{ margin-right:auto; }
.syncbar .st .n1{ font-weight:700; }
.syncbar .st .n2{ color:var(--ink-3); font-size:.86em; }
/* .locked は shared/components.css へ移動（2026-08-16）。両画面で使うため。 */

/* Admin (directory) ------------------------------------------- */
/* 右側は **minmax(0,1fr)**。素の 1fr は minmax(auto,1fr) と同じで、
   中の表やURLが長いと子が縮まずレイアウトを押し広げる。
   幅は tokens.css の --sidebar-w（240px）に寄せて、値を1か所にする。 */
.adm{ display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr);
      gap:26px; align-items:start; }
/* サイドバーは 1024 未満でたたむ（Atlassian 1024 / Carbon 1056 と整合）。 */
@media (max-width:1023.98px){ .adm{ grid-template-columns:minmax(0,1fr); } }
.admnav{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; box-shadow:var(--shadow); position:sticky; top:96px;
}
@media (max-width:1023.98px){ .admnav{ position:static; } }
.admnav-h{
  font-size:.78em; letter-spacing:.12em; color:var(--ink-3);
  padding:10px 12px 8px;
}
.admnav button{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:14px 12px; border-radius:6px;
  min-height:52px; color:var(--ink-2);
}
.admnav button:hover{ background:var(--card-2); }
.admnav button[aria-current="page"]{ background:var(--accent-soft); color:var(--accent-ink); font-weight:700; }
.admnav .cnt{ margin-left:auto; font-size:.84em; color:var(--ink-3); }
.admnav button[aria-current="page"] .cnt{ color:var(--accent-ink); }

.gname{ font-weight:700; }
.gdesc{ color:var(--ink-3); font-size:.86em; }
.gkind{
  display:inline-block; font-size:.76em; font-weight:700; padding:2px 9px; border-radius:4px;
  background:var(--line-2); color:var(--ink-2); white-space:nowrap;
}
.gkind.dept{ background:var(--accent-soft); color:var(--accent-ink); }
.roleedit{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rmini{ width:auto; min-width:0; min-height:46px; padding:0 14px; font-size:.9em; }

/* ツールバーの中の <select>。base.css の select{ width:100% } を打ち消さないと、
   flex の子として**1行を丸ごと占め**、ツールバーが3段（61px → 188px）に折り返す。
   「操作の記録」の絞り込みがこれで、幅 390〜1903 の**全部で**そうなっていた。

   **幅に関係なく常に起きるので、レスポンシブの検証では見つからない。**
   折り返して収まるので横はみ出しは出ず、documentElement の scrollWidth も
   tests_css_breakpoints.py も無反応のまま通る。
   同じ形は .rolectl select が先に踏んでいる（そちらは width:auto 済み）。 */
#admin .toolbar select{
  width:auto; min-width:0; max-width:100%;
  min-height:46px; padding:0 14px; font-size:.9em;
}
.crumb{ display:flex; gap:10px; align-items:center; margin-bottom:14px; font-size:.9em; color:var(--ink-3); }
.chk{ width:22px; height:22px; accent-color:var(--accent); }
.subscreen{ display:none; }
.subscreen.on{ display:block; }