/* ============================================================
   共通コンポーネント・スタイル（デザインシステム）
   トークン(theme.css)の上に構築。全ページ共通で読み込む。
   命名は機能的に。クラスを足す前に既存の流用を検討する。
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink-2);
  background: var(--bg);
}
* { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--accent-soft); }

/* 数値は等幅・タブラー */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* スクロールバー（控えめ） */
.thin-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* 押下フィードバック */
.tappable { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tappable:active { transform: scale(.99); }

/* フォーカスリング（キーボード操作） */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-color: var(--accent);
}

/* ---------------- ボタン ---------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-weight:600; font-size:13px; line-height:1; white-space:nowrap;
  padding:0 14px; height:38px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition: all var(--dur) var(--ease); }
.btn-sm { height:32px; padding:0 11px; font-size:12px; border-radius:var(--r-sm); }
.btn-lg { height:44px; padding:0 18px; font-size:14px; }
.btn-icon { width:38px; padding:0; }
.btn-icon.btn-sm { width:32px; }

.btn-primary { background:var(--accent); color:var(--accent-on); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-primary:active { background:var(--accent-press); }

.btn-ghost { background:var(--surface); color:var(--ink-2); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface-2); border-color:var(--border-strong); }

.btn-subtle { background:var(--surface-2); color:var(--ink-2); }
.btn-subtle:hover { background:var(--surface-3); }

.btn-soft { background:var(--accent-soft); color:var(--accent); }
.btn-soft:hover { background:var(--accent-softer); }

.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { filter:brightness(.95); }

.btn[disabled] { opacity:.5; pointer-events:none; }

/* ---------------- バッジ / ステータス ---------------- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  line-height:1; padding:4px 8px; border-radius:var(--r-pill); white-space:nowrap; }
.badge .dot { width:6px; height:6px; border-radius:var(--r-pill); background:currentColor; }
.badge-accent  { background:var(--accent-soft);  color:var(--accent); }
.badge-success { background:var(--success-soft); color:var(--success); }
.badge-warning { background:var(--warning-soft); color:var(--warning); }
.badge-danger  { background:var(--danger-soft);  color:var(--danger); }
.badge-neutral { background:var(--surface-3);    color:var(--ink-3); }

/* 角丸を小さくしたい四角バッジ */
.tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  padding:3px 7px; border-radius:var(--r-xs); background:var(--surface-3); color:var(--ink-3); }

/* ---------------- カード / パネル ---------------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); }
.card-pad { padding:18px; }
.card-hover { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card-hover:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }

.section-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }

/* ---------------- 入力 ---------------- */
.input, .select, .textarea {
  width:100%; height:38px; padding:0 12px; font-size:13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.textarea { height:auto; padding:10px 12px; line-height:1.6; }
.input::placeholder, .textarea::placeholder { color:var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color:var(--border-strong); }
.field-label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }

.search { position:relative; }
.search input { padding-left:34px; }
.search .ico { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-4); pointer-events:none; }

/* ---------------- テーブル ---------------- */
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.tbl thead th { position:sticky; top:0; z-index:1; background:var(--surface-2);
  font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--ink-3); text-align:left;
  padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl tbody td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--ink-2); vertical-align:middle; }
.tbl tbody tr { transition: background-color var(--dur) var(--ease); }
.tbl tbody tr:hover { background:var(--surface-3); }
.tbl .num { color:var(--ink); font-weight:600; }
.tbl-row-link { cursor:pointer; }

/* ---------------- ナビゲーション（管理画面サイドバー・親子アコーディオン） ---------------- */
.app { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.nav { padding:8px; }
.nav-section { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); padding:12px 10px 6px; }

/* 単独項目／親タブ共通の行 */
.nav-item, .nav-parent { display:flex; align-items:center; gap:11px; width:100%; padding:9px 10px; border-radius:var(--r);
  font-size:13px; font-weight:500; color:var(--ink-3); transition: all var(--dur) var(--ease); position:relative; text-align:left; cursor:pointer; }
.nav-item:hover, .nav-parent:hover { background:var(--surface-2); color:var(--ink); }
.nav-item.active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.nav-item.active .nav-ico { color:var(--accent); }
.nav-ico { width:18px; height:18px; flex-shrink:0; color:var(--ink-4); transition: color var(--dur) var(--ease); }
.nav-item:hover .nav-ico, .nav-parent:hover .nav-ico { color:var(--ink-2); }
.nav-badge { font-size:11px; font-weight:700; padding:1px 7px; border-radius:var(--r-pill);
  background:var(--danger-soft); color:var(--danger); line-height:1.5; }
.nav-item .nav-badge, .nav-parent .nav-badge { margin-left:auto; }

/* 親タブの開閉シェブロン */
.nav-chev { margin-left:auto; width:15px; height:15px; color:var(--ink-4); transition: transform var(--dur) var(--ease); }
.nav-parent[aria-expanded="true"] .nav-chev { transform:rotate(90deg); }
.nav-parent.has-active-child { color:var(--ink); font-weight:600; }
.nav-parent.has-active-child .nav-ico { color:var(--accent); }
.nav-parent .nav-badge + .nav-chev { margin-left:8px; }

/* 子タブ群（ツリー風ガイド線つき） */
.nav-children { display:grid; grid-template-rows:0fr; transition: grid-template-rows var(--dur) var(--ease); }
.nav-children > div { overflow:hidden; }
.nav-group.open .nav-children { grid-template-rows:1fr; }
/* 子タブはインデントのみで階層表現（左の縦線・ツリー罫は使わない） */
.nav-children .inner { margin:2px 0 4px; padding-left:14px; }
.nav-child { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r);
  font-size:12.5px; font-weight:500; color:var(--ink-3); transition: all var(--dur) var(--ease); }
.nav-child:hover { background:var(--surface-2); color:var(--ink); }
.nav-child.active { background:var(--accent-soft); color:var(--accent); font-weight:700; }
.nav-child .nav-badge { margin-left:auto; }

/* トップバー */
.topbar { height:var(--topbar-h); background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px; padding:0 24px; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.content { flex:1; padding:24px; }
.content-inner { max-width:var(--content-max); margin:0 auto; width:100%; }

/* アバター（完全丸はここだけ） */
.avatar { border-radius:var(--r-pill); background:var(--accent); color:#fff; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* 区切り線 */
.hr { height:1px; background:var(--border); border:0; }

/* パルス（軽いライブ表示） */
.pulse { animation:pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.82)} }

/* 進捗バー */
.meter { height:6px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.meter > span { display:block; height:100%; border-radius:var(--r-pill); background:var(--accent); }
.meter.is-over > span { background:var(--danger); }
.meter.is-warn > span { background:var(--warning); }

/* モバイル：サイドバーをドロワー化 */
.scrim { position:fixed; inset:0; background:rgba(15,23,42,.42); z-index:39; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease); }
.scrim.show { opacity:1; pointer-events:auto; }
@media (max-width:1024px) {
  .sidebar { position:fixed; z-index:40; transform:translateX(-100%); transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-lg); }
  .sidebar.open { transform:translateX(0); }
  .content { padding:16px; }
}