/* ===== 共通トークン ===== */
:root{
  --hdb-color: #872732;            /* バー基準色 */
  --hdb-color-ink: #8a303a;
  --hdb-toggle: #8a303a;             /*トグル基準色 */
  --hdb-gray:   #cfcfcf;            /* 薄いグレー */
  --hdb-ink:    #222;
}

/* ==== コントロール列 ==== */
.hier-data-bar-controls { 
  --title-col-w: 4em; 
}
.hier-data-bar-controls .control-group {
  display:grid;
  grid-template-columns: var(--title-col-w) 1fr;
  align-items:start;
  column-gap:8px;
  margin:0 0 10px 0;
}
.hier-data-bar-controls .level-title {
  display: inline-block;
  width: var(--title-col-w);
  text-align: left;
  font-size:17px;
  font-weight: bold;
  background: transparent;
  padding: 2px 0;
  border: none;
}

/* 表示レベル（ラジオ） */
.view-radios { display:flex; gap:16px; flex-wrap:wrap; }
.view-radio { display:inline-flex; align-items:center; gap:6px; font-weight:600; cursor:pointer; }
.view-radio span {
  font-size: 17px; /* ラジオボタンのラベル文字サイズ */
}
.view-radio input { accent-color: var(--hdb-color); width:18px; height:18px; }

/* ==== 生徒名ロッカー（トライステート） ==== */
.student-visibility {
  display:inline-flex; align-items:center; gap:8px; user-select:none;
}
.student-visibility .sv-hit {
  border:none; background:none; padding:0; margin:0;
  font-size:17px; font-weight:600; color:#444; cursor:pointer;
}
/* ロッカー本体 */
.student-visibility .sv-rocker {
  position: relative;
  width: 66px;
  height: 28px;
  border-radius: 999px;
  background: var(--hdb-gray); /* ベースはグレー */
  overflow: hidden;
}

/* オレンジレイヤー */
.student-visibility .sv-rocker::before {
  content: "";
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--hdb-toggle);
  transition: width .2s ease;
  z-index: 0;

  /* マスク代わりに丸みを持たせる */
  clip-path: inset(0 0 0 0 round 999px); 
  width: 0;
}

/* ノブ */
.student-visibility .sv-rocker .sv-thumb {
  position: absolute;
  top: 50%;
  left: 3px; /* off時の基準位置 */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .2s ease;
  transform: translateY(-50%); /* 高さの中央に配置 */
  z-index: 1;
}


/* 状態ごとの幅 */
.student-visibility[data-state="off"]     .sv-thumb { left: 3px; }
.student-visibility[data-state="off"]     .sv-rocker::before { width: 0; }

.student-visibility[data-state="partial"] .sv-thumb { left: calc(50% - 11px); }
.student-visibility[data-state="partial"] .sv-rocker::before { 
  width: calc(50% + 13px); /* ノブ右端まで */
}

.student-visibility[data-state="on"]      .sv-thumb { left: calc(100% - 25px); }
.student-visibility[data-state="on"]      .sv-rocker::before { width: 100%; }


/* ==== 本体 ==== */
.hier-data-bar         { width:100%; max-width:900px; }
.hier-data-bar-wrapper { width:100%; overflow-x:auto; }

/* 行構成 */
.bar-wrap  { display:flex; align-items:center; gap:10px; margin:6px 0; max-width:100%; cursor:pointer; }
.bar-label { flex:0 0 auto; font-weight:600; color:var(--hdb-ink); }

/* ===== swellアイコンのicon-caret-down ===== */
/* デフォルトは非表示 */
.bar-label .bar-icon { display:none; margin-left:4px; }

/* 地方別ビュー：地方ラベルだけ表示 */
.hdb-root[data-view="region"] .region-bar .bar-label .bar-icon { display:inline-block; }

/* 都道府県別ビュー：都道府県ラベルだけ表示 */
.hdb-root[data-view="pref"] .pref-bar .bar-label .bar-icon { display:inline-block; }

/* 市区町村別ビュー：市区町村ラベルだけ表示 */
.hdb-root[data-view="city"] .city-bar .bar-label .bar-icon { display:inline-block; }
/* 市区町村別ビューでは pref のラベルには出さない */
.hdb-root[data-view="city"] .pref-bar .bar-label .bar-icon { display:none !important; }


/* インデント指定（要件） */
.city-bar .bar-label { margin-left: 1em !important; } /* 市区町村：1em */

/* ===== 生徒名インデント（地方別ビュー） ===== */
.hdb-root[data-view="region"] .student-list[data-scope="region"] {
  margin-left: 6em; /* 地方別のときの生徒名インデント */
}
.hdb-root[data-view="region"] .student-list[data-scope="pref"],
.hdb-root[data-view="region"] .student-list[data-scope="city"] {
  margin-left: 0; /* 非表示になるので念のため0に */
}

/* ===== 生徒名インデント（都道府県別ビュー） ===== */
.hdb-root[data-view="pref"] .student-list[data-scope="pref"] {
  margin-left: 7em; /* 都道府県別のときの生徒名インデント */
}
.hdb-root[data-view="pref"] .student-list[data-scope="region"],
.hdb-root[data-view="pref"] .student-list[data-scope="city"] {
  margin-left: 0;
}

/* ===== 生徒名インデント（市区町村別ビュー） ===== */
.hdb-root[data-view="city"] .student-list[data-scope="city"] {
  margin-left: 9em; /* 市区町村別のときの生徒名インデント */
}
.hdb-root[data-view="city"] .student-list[data-scope="region"],
.hdb-root[data-view="city"] .student-list[data-scope="pref"] {
  margin-left: 0;
}


/* トラック共通 */
.bar-track { position:relative; flex:1 1 auto; min-width:0; height:24px; }
.bar {
  position:relative; height:100%; width:0;
  display:flex; align-items:center;
  background: var(--hdb-color); color:#fff; border-radius:4px;
  box-sizing:border-box; padding:0; overflow:visible;
}

/* 値（内/外） */
.bar-value { font-weight:normal; line-height:1; }
.bar .bar-value-in  { display:inline-block; padding-left:6px; white-space:nowrap; }
.bar .bar-value-out { position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:6px; white-space:nowrap; display:none; color: var(--hdb-color-ink); }

/* 短いバーは外出し */
.bar-wrap.bar-text-outside-right .bar .bar-value-in  { visibility:hidden; }
.bar-wrap.bar-text-outside-right .bar .bar-value-out { display:inline-block; }

/* ラベルはクリック可 */
.bar-label.clickable{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

/* ラベル固定幅箱（改行可） */
.bar-label .label-inner {
  display:inline-block;
  white-space:normal;
  word-break:keep-all;
  line-height:1.2;
}
.region-bar .bar-label .label-inner { width: 3em; }
.pref-bar   .bar-label .label-inner { width: 4em; }
.city-bar   .bar-label .label-inner { width: 5em; }

/* ===== ビューごとの可視ルール（厳密化） ===== */
/* 地方別：地方のみ表示（都道府県／市区町村のラベル＆バーを完全非表示） */
.hdb-root[data-view="region"] .region-bar { display:flex; }
.hdb-root[data-view="region"] .pref-bars,
.hdb-root[data-view="region"] .pref-bar,
.hdb-root[data-view="region"] .city-bars,
.hdb-root[data-view="region"] .city-bar { display:none !important; }

/* 都道府県別：都道府県のみ表示（地方／市区町村のラベル＆バーを完全非表示） */
.hdb-root[data-view="pref"] .region-bar { display:none !important; }
.hdb-root[data-view="pref"] .pref-bars { display:block; }
.hdb-root[data-view="pref"] .pref-bar { display:flex; }
.hdb-root[data-view="pref"] .city-bars,
.hdb-root[data-view="pref"] .city-bar { display:none !important; }

/* 市区町村別：地方は非表示。都道府県は“ラベルのみ表示（バーは非表示）”、市区町村はフル表示 */
.hdb-root[data-view="city"] .region-bar { display:none !important; }
.hdb-root[data-view="city"] .pref-bars { display:block; }
.hdb-root[data-view="city"] .pref-bar { display:flex; }
.hdb-root[data-view="city"] .pref-bar .bar-track { display:none !important; } /* ラベルのみ */
.hdb-root[data-view="city"] .city-bars { display:block; }
.hdb-root[data-view="city"] .city-bar { display:flex; } /* バー表示 */

/* 生徒チップ */
.student-list { margin: 0 0 0 9em; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.student-list .student-chip {
  display:block; padding:2px 6px; margin:2px 0; border-radius:3px;
  border:none; cursor:pointer; white-space:nowrap;
}

/* モーダル */
.student-modal-overlay[hidden]{ display:none; }
.student-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px;
}
.student-modal-dialog{
  background:#f2efe7; border-radius:12px; max-width:520px; width:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.25); padding:20px 24px; position:relative;
  font-size: 1.125rem; line-height: 1.7;
}
.student-modal-dialog h3{ margin: 0 0 1em 0; font-size: 1.5rem; }
.student-modal-location ,
.student-modal-link{ font-size: 17px; }
.student-modal-link a{ color: #1176d4; }
.student-modal-link a:hover{ text-decoration:none; }

/* 背景スクロールロック */
.student-modal-lock{ overflow:hidden; }

/* スマホ微調整 */
@media (max-width:768px){
  .view-radios { flex-direction:column; gap:8px; } /* スマホでラジオ縦並び */
  .hier-data-bar-controls .level-title { font-size:15px; }
  .view-radio span { font-size: 15px; }
  .student-visibility .sv-hit { font-size:15px; }
  .bar-label { font-size:15px; }
  .student-modal-dialog h3{ font-size: 18px; }
  .student-modal-location ,
  .student-modal-link{ font-size: 17px; }
}