/* =====================================================================
   管理画面（admin.html）固有のスタイル
   ---------------------------------------------------------------------
   読み込み順: tokens.css -> base.css -> app-base.css -> components.css
               -> pages/admin.css

   共通化した分（:root / リセット / button / フォーム部品 / topbar /
   tab-bar / panel / glass-overlay / login overlay / toast）はここには無い。
   .glass-dialog は共通の定義に admin 固有の分だけ足している。
   ===================================================================== */

/* ── メイン ── */
.admin-main { max-width: 1080px; margin: 0 auto; padding: 22px 22px 60px; }

/* テーブル */
.tbl-scroll { overflow-x: auto; }
table.admin-tbl { border-collapse: collapse; width: 100%; font-size: 12.8px; }
.admin-tbl th {
    background: rgba(94,129,172,0.16); color: #fff; font-weight: 500; text-align: left;
    padding: 8px 12px; border: 1px solid rgba(255,255,255,0.09); white-space: nowrap;
}
.admin-tbl td { padding: 7px 12px; border: 1px solid rgba(255,255,255,0.07); vertical-align: middle; }
.admin-tbl tr:hover td { background: rgba(94,129,172,0.08); }
.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cell-sub { font-size: 10.5px; color: var(--text-dim); font-family: "Consolas", monospace; }

/* バッジ */
.badge {
    display: inline-block; font-size: 10.5px; letter-spacing: 0.04em; padding: 2px 10px;
    border-radius: var(--r-pill); border: 1px solid; white-space: nowrap;
}
.badge-ok    { color: var(--ok);   border-color: rgba(129,199,132,0.45); background: rgba(129,199,132,0.08); }
.badge-warn  { color: var(--warn); border-color: rgba(255,204,128,0.45); background: rgba(255,204,128,0.08); }
.badge-err   { color: var(--err);  border-color: rgba(242,139,130,0.45); background: rgba(242,139,130,0.08); }
.badge-admin { color: #cfe0f2;     border-color: rgba(94,129,172,0.55);  background: rgba(94,129,172,0.22); }
.badge-dim   { color: var(--text-dim); border-color: rgba(255,255,255,0.12); background: transparent; }

/* ── フィルタバー ── */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-field { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 200px; }
.filter-field label { margin-bottom: 4px; }
.glass-dialog { max-height: 90vh; overflow-y: auto; }

.glass-dialog h2 { font-size: 1.1rem; font-weight: 700; }

.form-row { margin-bottom: 14px; }
.form-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.form-error { font-size: 12.5px; color: var(--err); margin-top: 10px; }

/* ウィザード */
.wizard-steps { display: flex; align-items: center; gap: 6px; margin: 12px 0 18px; }
.wizard-step { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.wizard-step .num {
    width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.2); font-size: 10.5px;
}
.wizard-step.active { color: #fff; }
.wizard-step.active .num { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border-color: transparent; }
.wizard-step.done { color: var(--ok); }
.wizard-step.done .num { border-color: rgba(129,199,132,0.5); color: var(--ok); }
.wizard-sep { flex: 0 0 22px; height: 1px; background: rgba(255,255,255,0.15); }
.mail-note {
    font-size: 12px; color: var(--warn); background: rgba(255,204,128,0.07);
    border: 1px solid rgba(255,204,128,0.22); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px;
    line-height: 1.6;
}
.wizard-org-row {
    display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px;
    background: var(--bg-light); border: 1px solid var(--panel-border); margin-bottom: 8px; flex-wrap: wrap;
}
.wizard-org-row .org-name { font-size: 12.5px; min-width: 150px; flex: 1; }
.wizard-org-row input[type="text"] { width: 170px; padding: 6px 10px; font-size: 12px; }
.wizard-org-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }

/* 契約会社の割り当てモーダルの行（組織／ユーザーのチェックリスト） */
.assign-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px; border-bottom: 1px solid var(--panel-border);
}
.assign-row:last-child { border-bottom: none; }
.assign-row input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.assign-row .assign-label { flex: 1; min-width: 0; font-size: 12.5px; }
.assign-row .assign-note { font-size: 11px; color: var(--text-muted); }
.assign-row.is-disabled .assign-label { color: var(--text-dim); }
/* 連携システムコネクタ（Issue #160）。組織設定タブの「連携システム」列と
   登録モーダル。見た目（背景・枠・影）は components.css の .glass-overlay /
   .glass-dialog が持つので、ここは位置とサイズだけを足す。 */
.conn-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.conn-dialog { width: 520px; padding: 24px; }
/* 削除ボタンだけを左端へ寄せ、保存・キャンセルと視覚的に離す
   （誤クリックで設定を消させないため） */
.conn-actions-spacer { flex: 1; }
.conn-check-label { display: flex; align-items: center; gap: 8px; }
.conn-check-label input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }

@media (max-width: 720px) {
.admin-main { padding: 14px 10px 60px; }
.tab-bar { flex-wrap: wrap; }
}