:root {
    --color1: rgb(247, 244, 240);
    --color2: #f39800;
    --color3: #16212c;
    --color4: #a0cce7;
    --color-white: #fff;
    --color-lightgray: #eae8e5;
    --color-gray: #16212c94;
    --color-red: #f73f14;
    --color-lightorange: #faeace;
    --color-lightyellow: #fbfce0;
    --color-keizoku: #cce6f2;
    --color-kyujuku: #f4d0d0;
    --color-taijuku: #dbdbdb;
    --color-sotsugyo: #e9f9c7;

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--color1);
    color: var(--color3);
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
    line-height: 1.6;
}

a {
    color: var(--color2);
}

header.site-header {
    background-color: var(--color3);
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.site-header a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
}

header.site-header nav a {
    margin-left: 1rem;
    color: var(--color4);
}

main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 20px;
}

.messages {
    list-style: none;
    padding: 0;
}

.messages li {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    background-color: var(--color4);
    color: var(--color3);
}

.messages li.error {
    background-color: var(--color-red);
    color: var(--color-white);
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    margin-bottom: 1rem;
}

th,
td {
    border: 1px solid var(--color-gray);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

td {
    font-size: 13px;
}

td input,
td select {
    font-size: 13px;
}

/* 全テーブル共通: 行のどこか(td)をホバーすると、その行のtd全部に背景色をつける。
   状態色分けや削除列の背景色など、他の背景色指定より確実に優先させるためimportantにする。 */
tr:hover > td {
    background-color: var(--color-lightyellow) !important;
}

/* rowspanで結合されたtd(例: アカウント管理の複数教室行のユーザー名/ログイン許可)は
   結合元の行にしか属さないため、tr:hoverだけでは2行目以降のホバーで色が付かない。
   同じアカウントの行をまとめてこのクラスにするJSと組み合わせて対応する。 */
.account-row-hover > td {
    background-color: var(--color-lightyellow) !important;
}

th {
    background-color: var(--color-lightgray);
    color: var(--color3);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* table{width:100%}のまま列幅だけ固定すると、残り1列(ユーザー名)が
   半端な小数pxを埋め合わせることになり、隣接列との境界がズレて枠線が
   ぼやけて太く見える。テーブル自体も列幅の合計(整数px)で固定して、
   ユーザー名列の幅も含めて全列を整数pxに確定させる。 */
.account-table {
    table-layout: fixed;
    width: 772px;
}

.account-table .col-username {
    width: 150px;
}

/* em はthの font-size(0.8rem) を基準にするため小数pxになりやすく、
   隣接列との境界が半端な位置にズレて枠線がぼやけて太く見える原因になる。
   このテーブルの列幅はすべて整数pxで固定し、境界を確実に揃える。 */
.account-table .col-userid {
    width: 102px;
}

.account-table .col-pw {
    width: 102px;
}

.account-table .col-status {
    width: 76px;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-set {
    background-color: var(--color4);
    color: var(--color3);
}

.badge-unset {
    background-color: var(--color-red);
    color: var(--color-white);
}

.account-table .col-role {
    width: 190px;
}

/* アカウント管理: 1教室の紐づけにつき1行(tr)として扱う。教室・権限は列を分け、
   ユーザー名・ログイン許可は最初の行にだけ出し、2行目以降は空欄にする。
   一覧は表示のみ(編集不可)で、行をクリックすると編集モーダルが開く。 */
.account-table-owners {
    table-layout: fixed;
    width: 100%;
}

.account-table-owners .col-classroom-select {
    width: 220px;
}

.account-table-owners .col-title-select {
    width: 110px;
}

.account-table-readonly .account-row {
    cursor: pointer;
}

.classroom-row {
    cursor: pointer;
}

.classroom-status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 状態tdは、バッジがtdの面積いっぱいに広がるようにする(他のテーブルのinput列と同じ扱い)。 */
.classroom-list-table td.col-status {
    padding: 0;
    height: 1px;
}

.classroom-list-table td.col-status .classroom-status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0;
}

.classroom-status-preparing {
    background-color: var(--color-lightorange);
    color: var(--color3);
}

.classroom-status-open {
    background-color: var(--color4);
    color: var(--color3);
}

.classroom-status-closed {
    background-color: var(--color3);
    color: var(--color1);
}

/* thead(と、それより上のsticky-bar)を固定し、tbodyだけをスクロールさせる。
   max-heightはJSでラッパーの表示位置から実測して設定する(updateClassroomListTableScrollHeight)。 */
.classroom-list-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
}

.classroom-list-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 編集モーダル内の教室スロット(教室セレクト+役割セレクトの組)を縦に並べる。 */
.classroom-slot-edit-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.classroom-slot-edit-row:last-child {
    margin-bottom: 0;
}

.account-table .col-active {
    width: 102px;
}

.account-table .col-delete {
    width: 50px;
}

/* ゴミ箱ボタンの削除列は、見出し(th)の文字・背景を消し、上・右・下の
   枠線も消す(左だけ残して隣の列とのしきりにする)。 */
.account-table th.col-delete,
.account-table td.col-delete {
    background-color: var(--color1);
    border-style: hidden;
    border-left: 1px solid var(--color-gray);
}

.account-table td input,
.account-table td select {
    width: 100%;
}

/* PW・ユーザー名は、inputがtdの余白込みで100%になるのではなく、
   tdの面積いっぱいに広がるようにする(他のテーブルのinput列と同じ扱い)。 */
.account-table td.col-pw,
.account-table td.col-username {
    padding: 0;
    height: 1px;
}

.account-table td.col-pw input,
.account-table td.col-username input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
}

/* 一覧は表示専用でinputが無いため、ユーザー名列も他の列と同じ余白に戻す
   (.account-table td.col-username はinput用にpadding:0にしている)。 */
.account-table-readonly td.col-username {
    padding: 0.5rem 0.75rem;
    height: auto;
}

/* display:flex を td に使うと、table-layoutとの兼ね合いでこのセルだけ
   罫線の位置が半ピクセルずれて枠線が太くぼやけて見えることがあったため、
   flexではなく(.toggle-btnが元々inline-blockなので)通常のインライン
   配置+右マージンで隙間を作る。 */
.role-cell {
    white-space: nowrap;
}

.role-cell .toggle-btn {
    margin-right: 0.4rem;
}

.role-cell .toggle-btn:last-child {
    margin-right: 0;
}

.role-cell .toggle-btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background-color: var(--color2);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn:hover {
    opacity: 0.9;
}

.btn[hidden] {
    display: none;
}

.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.tab-bar {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--color-gray);
}

.tab-bar .tab {
    background: none;
    font: inherit;
    padding: 0.6rem 1.25rem;
    text-decoration: none;
    color: var(--color-gray);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
}

.tab-bar .tab.active {
    opacity: 1;
    color: var(--color2);
    border-bottom-color: var(--color2);
    font-weight: bold;
}

.sticky-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.back-link {
    font-size: 1.5rem;
    text-decoration: none;
}

.sticky-bar h1 {
    margin: 0;
    font-size: 1.5rem;
}

.sticky-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.account-search-input {
    width: 220px;
}

/* thead(と、それより上のsticky-bar)を固定し、tbodyだけをスクロールさせる。
   max-heightはJSでラッパーの表示位置から実測して設定する(updateAccountTableScrollHeight)。 */
.account-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
}

.account-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.owner-manager-table {
    table-layout: fixed;
    width: 500px;
}

.owner-manager-table .col-title {
    width: 150px;
}

.section-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color3);
    margin: 2rem 0 0.75rem;
}

.section-heading:first-of-type {
    margin: 0 0 0.75rem;
}

.section-heading::before {
    content: "●";
    color: var(--color2);
    margin-right: 0.4rem;
    font-size: 1rem;
    vertical-align: middle;
}

/* 教室名・支払状況に適用する・教室状況のように、見出し(h2)と内容を横並びにしたい
   セクション用。h2の幅を揃えることで、内容側の開始位置が縦にも揃う。 */
.info-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.info-row .section-heading {
    width: 200px;
    flex-shrink: 0;
    margin: 0;
}

.info-row .sticky-bar-field,
.info-row .toggle-btn-group {
    margin-bottom: 0;
}

.info-divider {
    border: none;
    border-top: 1px solid var(--color-gray);
    margin: 1.5rem 0;
}

.sticky-bar-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

input,
select {
    padding: 0.4rem;
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    font-size: 1rem;
}

input:disabled {
    border: none;
    background: none;
    padding: 0.4rem 0;
    color: var(--color3);
}

.help-text {
    color: var(--color3);
    opacity: 0.7;
    font-size: 0.85rem;
}

.errorlist {
    color: var(--color-red);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.errorlist:not(:empty) {
    margin-top: 0.3rem;
}

.tab-panel {
    padding: 24px 0px;
}

.required-mark {
    color: var(--color-red);
}

.payer-heading-link {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color2);
    text-decoration: underline;
    cursor: pointer;
}

.student-table {
    table-layout: fixed;
}

/* table-layout:fixed でも、tableの実幅(width)が各列の指定幅の合計より
   広い(width:100%で画面幅に追従する)と、余った分が全列に比例配分されて
   px指定した列まで伸びてしまう。逆に画面が狭い場合はcontaining blockに
   合わせて縮もうとする。widthをautoにしつつmin-width:max-contentで
   「各列の指定幅の合計」より縮んだり伸びたりしないようにし、画面幅が
   変わっても列幅を維持する(はみ出す分は親のoverflow-xでスクロール)。 */
.student-table-readonly {
    width: auto;
    min-width: max-content;
}

.student-table td.col-delete {
    padding: 8px;
}

/* 列幅は <col> 側で一元管理する。table-layout:fixed は「最初の行」のセル幅を
   基準にしてしまうため、行構成が違う複数テーブル間でthに幅を指定しても揃わない。 */
col.col-name {
    width: 10em;
}

col.col-kana {
    width: 12em;
}

col.col-status {
    width: 5em;
}

col.col-grade {
    width: 5em;
}

col.col-attendance {
    width: 6em;
}

col.col-options {
    width: 9em;
}

col.col-fee {
    width: 5em;
}

col.col-delete {
    width: 50px;
}

/* 支払い名義編集モーダルの新規追加欄の合計列は、登録済みの生徒欄の
   合計列+削除列の幅に合わせて、見た目の右端を揃える。 */
col.col-total-with-delete {
    width: calc(5em + 50px);
}

.name-kana-input {
    font-size: 0.75rem;
}

.name-kana-text {
    display: block;
    color: var(--color-gray);
    font-size: 10px;
}

.student-table td {
    padding: 0;
}

.student-table td.col-payer {
    padding: 8px;
}

col.col-payer {
    width: 12em;
}

.student-table td.col-fee {
    padding: 8px;
    text-align: right;
    white-space: nowrap;
}

.student-table td.col-options,
.payer-input-table td.col-options {
    padding: 4px 8px;
    height: auto;
}

/* Django標準のCheckboxSelectMultipleは <ul><li> ではなく
   <div id="..."><div><label>...</label></div>...</div> という構造で
   出力されるため、それに合わせて div を対象にする。 */
td.col-options>div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

td.col-options>div>div {
    white-space: nowrap;
}

/* チェックボックスはボタン風の見た目にするため、実体は隠して
   ラベル側をボタンとして表示する。チェック状態はJSでlabelに
   付与する .option-btn-active クラスで表現する。
   checkboxをラベルにぴったり重ねて配置することで、クリック時に
   ブラウザがフォーカスを画面外の要素とみなしてページ最下部まで
   スクロールしてしまう不具合を防ぐ(絶対配置で幅0の要素を
   離れた位置に置くと発生しやすい)。 */
td.col-options input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

td.col-options label {
    position: relative;
    display: block;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    cursor: pointer;
    user-select: none;
}

td.col-options label.option-btn-active {
    background-color: var(--color2);
    border-color: var(--color2);
    color: var(--color-white);
}

/* 「支払状況に適用する」の助成金/割引のような、複数選択可なトグルボタン群の共通スタイル。
   仕組みはオプションのボタンと同じ(実体はチェックボックス、隠してlabelに重ねる)。 */
.toggle-btn-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.toggle-btn {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.toggle-btn input[type="checkbox"],
.toggle-btn input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.toggle-btn.toggle-btn-active {
    background-color: var(--color2);
    border-color: var(--color2);
    color: var(--color-white);
}

.option-fee-line,
.option-name-line {
    display: inline-block;
    white-space: nowrap;
}

.option-fee-line {
    opacity: 0.4;
}

/* 閲覧画面(生徒一覧)は選択済みのオプションしか表示しないため、
   常に他の列と同じ濃さの通常の太さで表示する(強調のboldは不要)。 */
.student-table-readonly .option-fee-line {
    opacity: 1;
    font-weight: normal;
}

.option-fee-line.option-fee-line-active {
    opacity: 1;
    font-weight: 700;
}

.student-table-scroll {
    margin-top: 1rem;
    max-height: 60vh;
    overflow-x: auto;
    overflow-y: auto;
}

.student-table-readonly {
    margin-top: 0;
}

.student-table-readonly td {
    padding: 8px;
}

.student-table-readonly th,
.student-table-readonly td {
    text-align: center;
}

.student-table-readonly td.col-fee {
    text-align: center;
}

.student-table-readonly thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 状況・現在学年列は、編集画面(モーダル)側のセレクト幅を保ったまま
   閲覧画面だけ狭くしたいので、この画面に限定して col.col-status/col-grade を上書きする。 */
.student-table-readonly col.col-status {
    width: 40px;
}

.student-table-readonly col.col-grade {
    width: 60px;
}

.student-table td {
    height: 1px;
}

.student-table td:not(.col-delete) input,
.student-table td:not(.col-delete) select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
}

.student-table td:not(.col-delete) select {
    padding-right: 1.5rem;
    /* selectは中身のテキスト長に応じた最小幅を持とうとし、table-layout:fixedの
       列幅指定より優先されて列がはみ出すことがある。0にして列幅を最優先させる。 */
    min-width: 0;
}

.modal-table {
    border: none;
    width: 100%;
}

/* width:auto(min-widthのみ指定)だと、table-layout:fixedでもChromeが
   select等の内容量から table の"望ましい幅"を計算して指定列幅より広げてしまい、
   新規追加欄と登録済みの生徒欄で同じ列でも幅がズレる原因になっていた。
   width自体を両テーブルの列幅合計(1042px)で固定し、内容量に左右されず
   常に同じ幅になるようにする。 */
.width-auto {
    width: 1042px;
}

.payer-input-table {
    table-layout: fixed;
    width: 1042px;
}

.payer-input-table tbody td {
    padding: 0;
    height: 1px;
}

.payer-input-table tbody td input,
.payer-input-table tbody td select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
}

.payer-input-table tbody td select {
    padding-right: 1.5rem;
    /* selectは中身のテキスト長に応じた最小幅を持とうとし、table-layout:fixedの
       列幅指定より優先されて列がはみ出すことがある。0にして列幅を最優先させる。 */
    min-width: 0;
}

.payer-input-table thead th,
.payer-input-table thead td {
    border: none;
    background-color: transparent;
    vertical-align: middle;
    padding-bottom: 1rem;
}

.payer-input-table .payer-info-row th {
    white-space: nowrap;
}

dialog [data-add-sibling] {
    margin-bottom: 1rem;
}

dialog {
    border: none;
    border-radius: 8px;
    padding: 1.5rem;
    background-color: var(--color-white);
    color: var(--color3);
    min-width: 320px;
    max-width: 1000px;

}

dialog.dialog-wide {
    width: fit-content;
    max-width: 1300px;
}

dialog::backdrop {
    background-color: rgba(22, 33, 44, 0.5);
}

dialog h3 {
    margin-top: 0;
}

.modal-table th {
    width: 7em;
    white-space: nowrap;
}

/* モーダル内のinput/selectは、tdの余白込みで縮こまるのではなく
   tdの面積いっぱいに広がるようにする(ログイン許可のチェックボックスは対象外)。 */
.modal-table td.modal-input-cell {
    padding: 0;
    height: 1px;
}

.modal-table td.modal-input-cell input,
.modal-table td.modal-input-cell select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
}

.modal-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-secondary {
    background-color: var(--color-lightgray);
    color: var(--color3);
}

.pricing-table {
    table-layout: fixed;
    width: 100%;
    min-width: 640px;
}

.pricing-table th,
.pricing-table td {
    text-align: center;
    height: 1px;
}

.pricing-table th {
    padding: 8px;
}

.pricing-table td {
    padding: 0;
}

.pricing-table td input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem;
    text-align: center;
}

/* 上下の増減スピナーは不要なので消す。 */
.pricing-table td input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.pricing-table td input[type="number"]::-webkit-outer-spin-button,
.pricing-table td input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* コース/オプション名の列は文字数に合わせて幅を最小限にし(fit-content相当)、
   残りの学年列に均等に幅を配分する(table-layout:autoでの標準的なやり方)。 */
.pricing-table th.col-course-label {
    white-space: nowrap;
}

.pricing-table-edit th.course-name-cell {
    padding: 0;
}

.pricing-table-edit th.course-name-cell input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem;
    text-align: center;
    font-size: inherit;
}

.pricing-table-edit th.course-name-cell-option input {
    background-color: var(--color4);
    font-weight: bold;
}

.pricing-table-readonly {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.pricing-table-readonly th,
.pricing-table-readonly td {
    padding: 8px;
}

.pricing-table-readonly th.col-option {
    background-color: var(--color4);
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dialog-header h3 {
    margin: 0;
}

.modal-actions-spread {
    justify-content: space-between;
}

.modal-actions-group {
    display: flex;
    gap: 0.5rem;
}

.pricing-table-edit col.col-icon {
    width: 30px;
}

/* border-collapse: separate にすると、隣接セル同士が別々に枠線を描くため
   線が二重になって太く見える上、テーブル自体の外枠がゴミ箱の行・列を
   囲んでしまう。collapse のまま、ゴミ箱セルは border-style: hidden で
   完全に優先して消す(noneだと隣接セル側の枠線が勝ってしまう)。
   ただし、学年列(左端の列)の右端と、コース行(1行目)の下端だけは
   実際の表を囲む線として残したいので、その1辺だけ solid に戻す。 */
.pricing-table-edit th.col-icon:not([data-pricing-col]) {
    padding: 0;
    background-color: var(--color1);
    border-style: hidden;
    border-right: 1px solid var(--color-gray);
}

.pricing-table-edit th.col-icon[data-pricing-col],
.pricing-table-edit th.icon-spacer {
    padding: 0;
    background-color: var(--color1);
    border-style: hidden;
    border-bottom: 1px solid var(--color-gray);
}

/* theadのposition:stickyを機能させるには、実際に縦スクロールが起こる
   コンテナが必要(overflow-x:autoだけだと縦方向は中身がはみ出さない限りスクロール
   コンテナとして機能せず、ページ全体をスクロールしてもtheadが固定されない)。 */
.pricing-table-scroll {
    max-height: 60vh;
    overflow-x: auto;
    overflow-y: auto;
}

/* コース/オプション名の列(と、編集画面ではその左のゴミ箱アイコン列)を
   横スクロールしても常に見えるように固定する。列が多い(学年が増える)ほど
   横スクロールが必要になるため、コース名が常に見える方が使いやすい。 */
.pricing-table-readonly th.col-course-label {
    position: sticky;
    left: 0;
    z-index: 2;
}

.pricing-table-edit th.col-icon {
    position: sticky;
    left: 0;
    z-index: 2;
}

.pricing-table-edit th.col-course-label {
    position: sticky;
    left: 30px;
    z-index: 2;
}

/* theadも縦スクロール時に常に見えるように固定する。行(コース/オプション)が
   増えても見出しが流れないようにするため。左固定列との交点(左上の角)は
   両方の効果を受けるが、行がさらに上に来るのでz-indexを高くしておく。 */
.pricing-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* 左固定列(col-course-label/col-icon)のセレクタは2クラス指定で詳細度が高く、
   上のルールのz-index:3を上書きしてしまう(theadの角セルが縦固定列の
   下に隠れてしまう)。角セルだけ明示的に最優先のz-indexを指定する。 */
.pricing-table thead th.col-course-label,
.pricing-table thead th.col-icon {
    z-index: 4;
}

.icon-btn-delete {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-gray);
    opacity: 0.7;
}

.icon-btn-delete .trash-icon {
    width: 16px;
    height: 16px;
}

.icon-btn-delete:hover {
    opacity: 1;
    color: var(--color-red);
}

.icon-btn-delete.marked-for-delete {
    opacity: 1;
    color: var(--color-red);
}

.delete-checkbox-hidden {
    display: none;
}

.row-marked-for-delete td,
.row-marked-for-delete th:not(.col-icon) {
    text-decoration: line-through;
    opacity: 0.5;
}

.col-marked-for-delete {
    text-decoration: line-through;
    opacity: 0.5;
}

.home-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.home-menu-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 260px;
    padding: 1.5rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color3);
}

.home-menu-item:hover {
    border-color: var(--color2);
}

.home-menu-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color2);
}

.home-menu-desc {
    font-size: 0.85rem;
    color: var(--color3);
    opacity: 0.8;
}

/* 支払状況一覧: テーブルタイトルの左に付ける月送りナビ(◀ ▶)。 */
.payment-table-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payment-month-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color3);
    text-decoration: none;
    font-size: 0.9rem;
}

.payment-month-nav-btn:hover {
    background-color: var(--color-lightgray);
}

/* 支払状況一覧: 教室名メニュー(左)を押すと該当教室の表(右)だけ表示する。 */
.payment-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.payment-classroom-menu {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-gray);
    padding-right: 1rem;
}

.payment-classroom-menu.collapsed {
    width: auto;
    padding-right: 0.5rem;
}

.payment-classroom-menu.collapsed .payment-classroom-menu-items {
    display: none;
}

.payment-menu-collapse-btn {
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color3);
    cursor: pointer;
    font-size: 0.9rem;
}

.payment-classroom-menu-items {
    display: flex;
    flex-direction: column;
}

.payment-classroom-menu-item {
    text-align: left;
    padding: 0.25rem 0.4rem;
    border: none;
    background-color: transparent;
    color: var(--color3);
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
}

.payment-classroom-menu-item.active {
    color: var(--color2);
    font-weight: 700;
}

.payment-table-area {
    flex-grow: 1;
    min-width: 0;
}

.payment-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.payment-table-header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.payment-status-filter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.payment-status-filter-label {
    font-size: 0.9rem;
    margin-right: 0.2rem;
}

.payment-status-filter-btn {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color3);
    font-size: 0.85rem;
    cursor: pointer;
}

.payment-status-filter-btn[data-status="active"].active {
    background-color: var(--color-keizoku);
    border-color: var(--color-keizoku);
}

.payment-status-filter-btn[data-status="paused"].active {
    background-color: var(--color-kyujuku);
    border-color: var(--color-kyujuku);
}

.payment-status-filter-btn[data-status="withdrawn"].active {
    background-color: var(--color-taijuku);
    border-color: var(--color-taijuku);
}

.payment-status-filter-btn[data-status="graduated"].active {
    background-color: var(--color-sotsugyo);
    border-color: var(--color-sotsugyo);
}

.payment-table tr[data-student-status="active"] td.col-payment-status {
    background-color: var(--color-keizoku);
}

.payment-table tr[data-student-status="paused"] td.col-payment-status {
    background-color: var(--color-kyujuku);
}

.payment-table tr[data-student-status="withdrawn"] td.col-payment-status {
    background-color: var(--color-taijuku);
}

.payment-table tr[data-student-status="graduated"] td.col-payment-status {
    background-color: var(--color-sotsugyo);
}

.payment-table-title {
    margin: 0;
    font-weight: 700;
}

.payment-table-header .btn {
    margin-bottom: 0;
}

/* 開校日〜閉校日の範囲外へ月送りしようとしたときの警告。表はそのまま残し、上に重ねて出す。 */
.payment-out-of-range-message {
    margin: 0 0 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-weight: 700;
}

.payment-table {
    width: auto;
    min-width: max-content;
}

.payment-table th,
.payment-table td {
    white-space: nowrap;
}

.payment-table td input[type="number"],
.payment-table td input[type="text"],
.payment-table td input[type="date"] {
    width: 7em;
    background-color: var(--color-lightorange);
}

/* 振替受領日・調整額・調整額内訳は、inputがtdの余白込みで100%になるのではなく、
   tdの面積いっぱいに広がるようにする(account-table等のinput列と同じ扱い)。 */
.payment-table td.col-payment-input {
    padding: 0;
    height: 1px;
}

.payment-table td.col-payment-input input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
}

/* 調整額・諸費の列は半角数字5桁がぴったり収まる幅にする(ch=文字幅基準)。
   列(th)自体をこの幅にし、inputはtdの面積いっぱいに広げる(幅の指定はしない)。 */
.payment-table th.col-payment-adjustment-amount,
.payment-table td.col-payment-adjustment-amount,
.payment-table th.col-payment-misc-fee,
.payment-table td.col-payment-misc-fee {
    width: calc(5ch + 1.5rem);
}

/* 上下の増減スピナーは不要なので消す。 */
.payment-table td.col-payment-adjustment-amount input[type="number"],
.payment-table td.col-payment-misc-fee input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.payment-table td.col-payment-adjustment-amount input[type="number"]::-webkit-outer-spin-button,
.payment-table td.col-payment-adjustment-amount input[type="number"]::-webkit-inner-spin-button,
.payment-table td.col-payment-misc-fee input[type="number"]::-webkit-outer-spin-button,
.payment-table td.col-payment-misc-fee input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 調整額内訳は複数行になり得るため、tdの高さはtextarea側(自動伸縮、JSでtd/行の高さと
   揃える)に合わせる。幅・背景色はcol-payment-inputと同じにしつつ、高さだけ固定しない。 */
.payment-table td.col-payment-note {
    padding: 0;
}

.payment-table td.col-payment-note textarea {
    display: block;
    box-sizing: border-box;
    width: 7em;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-lightorange);
    font-size: 13px;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}
/* 教室アーカイブ(外観写真・看板・チラシ)の公開ギャラリー。 */
.archive-filter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.archive-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.archive-filter-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-gray);
    border-radius: 999px;
    background-color: var(--color-white);
    color: var(--color3);
    font-size: 0.85rem;
    text-decoration: none;
}

.archive-filter-btn.active {
    background-color: var(--color2);
    border-color: var(--color2);
    color: var(--color-white);
    font-weight: bold;
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 1rem 0;
}

.archive-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.archive-card-select {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--color-gray);
    border-bottom: 1px solid var(--color-lightgray);
}

.archive-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background-color: var(--color-lightgray);
}

.archive-card-body {
    padding: 0.75rem;
}

.archive-card-title {
    font-weight: bold;
}

.archive-card-meta {
    font-size: 0.85rem;
    color: var(--color-gray);
    margin-top: 0.2rem;
}

.archive-card-caption {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.archive-compare-grid .archive-card-image {
    height: 260px;
}

/* ---------------------------------------------------------------- 支払状況: 確定・明細 */
.payment-table-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.finalized-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color3);
    color: var(--color-white);
    font-size: 0.8rem;
    white-space: nowrap;
}

.finalized-badge-partial {
    background-color: var(--color-lightorange);
    color: var(--color3);
}

.fee-warning {
    display: block;
    color: var(--color-red);
    font-size: 0.75rem;
    white-space: nowrap;
}

.col-statement {
    text-align: left;
    white-space: nowrap;
    font-size: 0.85rem;
}

.statement-line-discount {
    color: var(--color-red);
}

/* ---------------------------------------------------------------- 料金表(pricing) */
.price-table-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.price-table-list-header .help-text {
    margin: 0;
    max-width: 60rem;
}

.price-table-list.width-auto {
    width: auto;
}

.price-table-list-actions {
    white-space: nowrap;
    width: 1%;
}

.price-table-list-actions .btn {
    margin: 0 0.25rem 0 0;
}

.price-table-current > td {
    background-color: var(--color-lightorange);
}

.student-name-link {
    color: var(--color3);
    font-weight: 600;
}

.student-table-name {
    display: block;
    font-size: 0.75rem;
    opacity: 0.6;
}

.pt-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.pt-settings-stacked {
    flex-direction: column;
    max-width: 40rem;
}

.pt-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pt-field[hidden] {
    display: none;
}

.pt-field-label {
    font-size: 0.8rem;
    font-weight: 600;
}

.pt-item-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.pt-item-card-new {
    border-style: dashed;
    background-color: transparent;
}

.pt-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1rem;
}

.pt-new-label {
    font-weight: 700;
    color: var(--color2);
    align-self: center;
}

.pt-delete-toggle {
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
    font-size: 0.85rem;
}

.pt-rates {
    margin-top: 0.75rem;
}

.pt-rates-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
}

.pt-grade-grid {
    width: auto;
    margin-bottom: 0.5rem;
}

.pt-grade-grid th,
.pt-grade-grid td {
    padding: 0.25rem;
    text-align: center;
}

.pt-common-col {
    border-left: 2px solid var(--color3);
}

.input-price {
    width: 6rem;
    text-align: right;
}

.input-narrow {
    width: 4.5rem;
}

.pt-cond-table {
    width: auto;
}

.pt-cond-table td {
    vertical-align: top;
}

.pt-cond-new > td {
    background-color: var(--color1);
}

.pt-period {
    white-space: nowrap;
}

.compact-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.compact-checks label {
    white-space: nowrap;
}

.compact-checks input {
    margin-right: 0.15rem;
}

div.compact-checks > div {
    display: inline;
}

.pt-adjustment-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.5rem;
}

.pt-adjustment-body .pt-field {
    max-width: 36rem;
}

.pt-footer-actions {
    margin: 1rem 0 2rem;
}

.pt-delete-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--color-gray);
    padding-top: 1rem;
}

.transition-table td {
    vertical-align: top;
}

.transition-map {
    white-space: nowrap;
}

.transition-map-missing {
    color: var(--color-red);
}

.transition-diff-up {
    color: var(--color-red);
}

.transition-diff-down {
    color: #2a7d2a;
}

.bill-preview {
    width: auto;
}

.bill-preview td {
    vertical-align: top;
    min-width: 9rem;
    font-size: 0.8rem;
}

.bill-preview-current {
    background-color: var(--color-lightorange) !important;
}

.bill-preview-total {
    font-weight: 700;
    border-top: 1px solid var(--color-gray);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

.pt-grade-grid .input-price {
    width: 4.6rem;
    padding: 0.3rem;
}

.pt-cond summary {
    cursor: pointer;
    color: var(--color2);
}

.pt-cond[open] summary {
    color: var(--color3);
}

/* 受講コース・オプションの選択欄は料金表ごとにまとめて表示する
   (Djangoのグループ付きCheckboxSelectMultipleは、グループ名を先頭の<label>として出力する)。
   グループ名は見出しとして表示し、ボタンの見た目にしない。 */
td.col-options>div>div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

td.col-options>div>div>label:first-child {
    border: none;
    background: none;
    padding: 0.2rem 0 0;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.7;
    cursor: default;
}

/* ---------------------------------------------------------------- 社員一覧・社員登録 */
.employee-new-btn {
    margin-bottom: 0.75rem;
}

.employee-table {
    width: auto;
    min-width: 640px;
}

.employee-table .name-kana-text {
    opacity: 0.8;
}

.employee-row-retired > td {
    color: var(--color-gray);
}

.employee-form-table {
    width: auto;
    min-width: 560px;
}

.employee-form-table th {
    width: 9em;
    vertical-align: middle;
}

.employee-form-table td {
    font-size: 0.9rem;
}

.employee-form-table input[type="text"],
.employee-form-table input[type="email"],
.employee-form-table input[type="password"] {
    width: 22rem;
}

.employee-help {
    display: block;
    margin-top: 0.2rem;
}

.employee-checkbox {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

/* ログイン画面 */
.login-box {
    max-width: 352px;
    margin: 3rem auto;
}

.login-box h1 {
    text-align: center;
    font-size: 1.5rem;
    margin: 0 0 2rem;
}

.login-field {
    margin-bottom: 1.25rem;
}

.login-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.login-field input {
    width: 100%;
    height: 42px;
    padding: 0 0.75rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--color3);
}

.login-field input:focus {
    outline: 2px solid var(--color4);
    outline-offset: -1px;
}

/* パスワード欄の右端に表示切り替えボタンを重ねる */
.password-field {
    position: relative;
    display: block;
}

.password-field input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    display: flex;
    padding: 0.2rem;
    border: none;
    background: none;
    color: var(--color-gray);
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--color3);
}

.remember-login {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.remember-login input {
    margin: 0;
    accent-color: var(--color3);
}

.login-submit {
    width: 100%;
    height: 50px;
    background-color: var(--color-lightgray);
    border: 1px solid var(--color-gray);
    border-radius: 4px;
    color: var(--color3);
    font-size: 1rem;
    cursor: pointer;
}

.login-submit:hover {
    background-color: var(--color-white);
}

.password-toggle svg[hidden] {
    display: none;
}