: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; margin-bottom: 2.5em; }
.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; flex-direction: column; gap:8px; }
.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; }
.hier-data-bar-controls .view-radios {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

/* ===== ロッカー（トライステート） ===== */
.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:inherit !important; 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; inset:0 auto 0 0; height:100%; background:var(--hdb-toggle);
  transition: width .2s ease; clip-path: inset(0 0 0 0 round 999px); width:0;
}
.student-visibility .sv-rocker .sv-thumb {
  position:absolute; top:50%; left:3px; 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%; }

/* ===== 本体 ===== */
.range-note {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.hier-data-bar-wrapper { width:100%; overflow-x:auto; }
.hier-data-bar { width:100%; max-width:900px; }
.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); }
.bar-label .bar-icon { display:none; margin-left:4px; }

/* ビューごとのカーソルアイコン表示 */
.mp-stats-height[data-view="ten"] .ten-bar .bar-label .bar-icon { display:inline-block; }
.mp-stats-height[data-view="five"]   .five-bar   .bar-label .bar-icon { display:inline-block; }
.mp-stats-height[data-view="heightValue"]   .heightValue-bar   .bar-label .bar-icon { display:inline-block; }
.mp-stats-height[data-view="heightValue"]   .five-bar   .bar-label .bar-icon { display:none !important; }

/* インデント */
.heightValue-bar .bar-label { margin-left: 2em !important; }

/* 生徒名インデント */
.mp-stats-height[data-view="ten"] .student-list[data-scope="ten"] { margin-left: 8.5em; }
.mp-stats-height[data-view="five"]   .student-list[data-scope="five"]   { margin-left: 8.5em; }
.mp-stats-height[data-view="heightValue"]   .student-list[data-scope="heightValue"]   { margin-left: 9.5em; }

/* 非対象は安全に0 */
.mp-stats-height[data-view="ten"] .student-list[data-scope="five"],
.mp-stats-height[data-view="ten"] .student-list[data-scope="heightValue"],
.mp-stats-height[data-view="five"]   .student-list[data-scope="ten"],
.mp-stats-height[data-view="five"]   .student-list[data-scope="heightValue"],
.mp-stats-height[data-view="heightValue"]   .student-list[data-scope="ten"],
.mp-stats-height[data-view="heightValue"]   .student-list[data-scope="five"] { 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 .label-inner { display:inline-block; white-space:normal; word-break:keep-all; line-height:1.2; }
.ten-bar .bar-label .label-inner { width: 5.5em; }
.five-bar   .bar-label .label-inner { width: 5.5em; }
.heightValue-bar   .bar-label .label-inner { width: 4.5em; }

/* ビューの可視ルール */
.mp-stats-height[data-view="ten"] .ten-bar { display:flex; }
.mp-stats-height[data-view="ten"] .five-bars,
.mp-stats-height[data-view="ten"] .five-bar,
.mp-stats-height[data-view="ten"] .heightValue-bars,
.mp-stats-height[data-view="ten"] .heightValue-bar { display:none !important; }

.mp-stats-height[data-view="five"] .ten-bar { display:none !important; }
.mp-stats-height[data-view="five"] .five-bars { display:block; }
.mp-stats-height[data-view="five"] .five-bar { display:flex; }
.mp-stats-height[data-view="five"] .heightValue-bars,
.mp-stats-height[data-view="five"] .heightValue-bar { display:none !important; }

.mp-stats-height[data-view="heightValue"] .ten-bar { display:none !important; }
.mp-stats-height[data-view="heightValue"] .five-bars { display:block; }
.mp-stats-height[data-view="heightValue"] .five-bar { display:flex; }
.mp-stats-height[data-view="heightValue"] .five-bar .bar-track { display:none !important; }
.mp-stats-height[data-view="heightValue"] .heightValue-bars { display:block; }
.mp-stats-height[data-view="heightValue"] .heightValue-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-chip.sh-g1 { background:#dd8094; color:#fff; } /* 花 */
.student-chip.sh-g2 { background:#f1b500; color:#fff; } /* 月 */
.student-chip.sh-g3 { background:#8db3a0; color:#fff; } /* 雪 */
.student-chip.sh-g4 { background:#66b8d5; color:#fff; } /* 星 */
.student-chip.sh-g5 { background:#ae7ac6; color:#fff; } /* 宙 */
.student-chip.sh-g6 { background:#0f2b46; color:#fff; } /* 専 */
.student-chip.sh-g7 { background:#ffffff; color:#333; border:1px solid #ddd; } /* 定 */
.student-chip.sh-g0 { background:#fafafa; color:#333; border:1px solid #ddd; } /* その他/未設定 */

/* モーダル */
.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; }
}