/* style.css の .m-form__submit は width 固定で、長いラベル（公式LINEアカウント連携を完了する等）が収まらないため
   min-width に切り替え、ラベル長に応じて横へ伸びるようにする */
.m-form__submit {
    width: auto;
    min-width: clamp(173.6111111111px, 250 / 1440 * 100vw, 250px);
    padding-inline: clamp(20.8333333333px, 30 / 1440 * 100vw, 30px);
}

/* style.css の .p-account-form .m-form__submit は width 固定（詳細度が上）で、
   「アカウント情報を登録する」等の長いラベルが wrap するため min-width に切り替える */
.p-account-form .m-form__submit {
    width: auto;
    min-width: clamp(173.6111111111px, 250 / 1440 * 100vw, 250px);
    padding-inline: clamp(20.8333333333px, 30 / 1440 * 100vw, 30px);
}

/* 管理者権限にチェックすると利用可能項目は編集不可（全機能付与のため）。
   非表示ではなく淡色＋操作不可（pointer-events:none）で示す */
.m-form__content.-capabilities-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* capability を持たないサイドバーメニューは半透明化して無効表現にする。
   ※クリックは通す（pointer-events は none にしない）＝クリックで権限モーダルを開くため。 */
.l-sidebar__link.-disabled,
.l-sidebar__class .-item a.-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* style.css の .m-delete-btn は width 固定で、ラベルが収まらないため
   min-width に切り替え、ラベル長に応じて横へ伸びるようにする */
.m-delete-btn {
    width: auto;
    min-width: clamp(38.8888888889px, 56 / 1440 * 100vw, 56px);
    padding-inline: clamp(11.1111111111px, 16 / 1440 * 100vw, 16px);
}

/* design-source の .-date-input は color が #989898 固定で入力値もグレー表示になるため上書き */
.m-form .-date-input {
    color: #333;
}

.m-form .-date-input:placeholder-shown {
    color: #989898;
}

/* 大森HTML に汎用フラッシュメッセージ用クラスがないため、p-inquiry__completion のスタイルを参考に暫定定義 */
.m-flash {
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    padding: 0 29px;
    gap: 15px;
    margin-bottom: 30px;
}

.m-flash p {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    font-weight: 500;
}

.m-flash.-success {
    background-color: var(--color-light-blue);
}

.m-flash.-danger {
    background-color: var(--color-orange);
}

/* 共通モーダル（削除確認） — 大森HTML に DOM 定義がないため独自スタイル */
.m-confirm-modal {
    border: none;
    padding: 0;
    border-radius: 8px;
    max-width: 480px;
    width: 90%;
    margin: auto;
}

.m-confirm-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.m-confirm-modal__inner {
    padding: 32px;
}

.m-confirm-modal__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-blue);
    margin-bottom: 16px;
}

.m-confirm-modal__body {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.m-confirm-modal__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* エラーの手前の入力欄にはmargin-bottomを付ける */
:where(input[type=text], input[type=date], input[type=number], input[type=email], input[type=tel], input[type=password], textarea):has(+ .m-form__error) {
    margin-bottom: 15px;
}

/* 日付欄は input が .-date でラップされエラーが弟要素になるので、ラッパーに付ける */
.-date:has(+ .m-form__error) {
    margin-bottom: 15px;
}

/* m-edit-btn の width 固定だと「削除から復帰」等の長文で wrap されるので min-width 化 */
.m-edit-btn {
    width: auto;
    min-width: 56px;
    padding: 0 12px;
}

/* m-signup-btn も同様に長文ラベル（「教室新規登録」「アカウント新規登録」）で wrap するので min-width 化 */
.m-signup-btn {
    width: auto;
    min-width: clamp(71.5277777778px, 103 / 1440 * 100vw, 103px);
    padding: 0 12px;
}

/* タブボタンを hover したときにカーソルを pointer に */
.m-tab__button {
    cursor: pointer;
}

/* データなし表示 — 大森HTML に該当 DOM が無いため共通コンポーネントとして定義
   一覧テーブルやタブ内で「対象のデータがありません」を出す箇所で使用 */
.m-no-data {
    text-align: center;
    padding: 40px 0;
    color: #989898;
    font-size: 14px;
}

/* m-label の width 固定で長文ラベル（例:「チュートリアルをスキップ中」）が崩れるため min-width 化 */
.m-label {
    width: auto;
    min-width: clamp(62.5px, 90 / 1440 * 100vw, 90px);
    padding: 0 12px;
}

/* チュートリアルSkip の checkbox label が親 .m-form__content の flex により
   改行されて見えるため、この label のみ inline-block に */
label[for="is_tutorial_finish"] {
    display: inline-block;
}

/* アカウント編集フォームの管理者権限・利用可能な機能のチェックボックスも、
   style.css の .m-form__content label { display:flex } によりラベルが checkbox の
   下に改行されるため、上記と同様に inline-block にして横一列に並べる */
label[for="is_admin"],
label[for^="cap_"] {
    display: inline-block;
}

/* 大森HTML には「非公開にする」(m-private-btn) しかないため、対の「公開する」を定義。
   非公開状態のイベント詳細で公開アクションに使用 */
.m-public-btn {
    width: clamp(80.5555555556px, 116 / 1440 * 100vw, 116px);
    height: 30px;
    background-color: var(--color-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: clamp(9.7222222222px, 14 / 1440 * 100vw, 14px);
    font-weight: 500;
    cursor: pointer;
}

/* style.css の .p-event-form .m-form__content .-date-input は color:#D8D8D8 固定で、
   入力済みの日時もグレー表示になるため上書き。同一詳細度で後勝ちさせる */
.p-event-form .m-form__content .-date-input {
    color: #333;
}

/* イベント予約者一覧の「状況」セル専用。汎用 .-flex は運営側CSSに定義がなく、
   予約確定＋削除のラベルが隙間なくくっつくため、中央寄せ＋縦並び＋gap で表示する */
.p-event-detail__reserve-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    &:has(:nth-child(2)) {
        padding: 10px 0;
    }
}

/* 教室管理一覧の状態セル専用。汎用 .-flex は運営側CSSに定義がないため、
   この画面だけで使うクラスとして定義し、有効/削除と公開中/非公開を縦並びにする */
.p-school-table__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* 請求一覧・詳細の状態セル専用。有効/削除に加えて「締め済」を縦並びで表示する */
.p-bill-table__status,
.p-bill-detail__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    &:has(:nth-child(2)) {
        padding: 10px 0;
    }

}

/* ページ番号の丸ボタンは width:34px 固定で4桁になるとはみ出すため、
   高さ・最小幅は維持しつつ桁数に応じて横へ伸びるようにする */
.m-page-nation__items span,
.m-page-nation__items a {
    width: auto;
    min-width: clamp(23.6111111111px, 34 / 1440 * 100vw, 34px);
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
}

/* ページネーションの省略記号(...)はページ番号の丸ボタンではなく、ただの区切り文字として表示する */
.m-page-nation__items span.-dots {
    background-color: transparent;
    box-shadow: none;
    color: #989898;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

/* style.css は .event.-form でしか l-content__top-right を flex にしていないため、
   請求詳細のように複数ボタン（印刷する／戻る）を置く画面では縦積みになる。
   右上アクションは横並びが自然なので flex 化して右寄せにする */
.l-content__top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10.4166666667px, 15 / 1440 * 100vw, 15px);
}

/* style.css の .p-bill-form .m-form__select select は color:#989898 固定で、
   選択済みの値も灰色表示になるため、他の入力欄(#333)に合わせて上書き */
.p-bill-form .m-form__select select {
    color: #333;
}

/* サイドバーのログアウトは POST 送信のため button 要素。他項目の l-sidebar__link(a)と見た目を揃える */
.l-sidebar__logout {
    width: 100%;
}

.l-sidebar__item button.l-sidebar__link {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* ダッシュボードの要対応業務タブ。style.css には .m-tab__button.is-active しか
   定義がなく .tab-button.is-active が無いため、アクティブタブを太字＋青背景で示す */
.p-todo__items .tab-button.is-active {
    background-color: var(--color-blue);
    color: #fff;
    font-weight: 700;
}

/* style.css の .p-operation-index__right .-date-input は color:#989898 固定で、
   選択済みの日付も灰色表示になるため、他の入力欄(#333)に合わせて上書き */
.p-operation-index__right .-date-input {
    color: #333;
}

.p-operation-index__right .-date-input:placeholder-shown {
    color: #989898;
}

/* 詳細「インポート情報」テーブルの .m-label は style.css で #669bf0 固定上書きされており、
   ステータス色(成功/失敗/処理中)が一覧と揃わない。一覧を正として基底色・修飾子を優先させる */
.p-school-import-detail__info-table td .m-label {
    background-color: var(--color-blue);
}
.p-school-import-detail__info-table td .m-label.-light-blue2 {
    background-color: #86adcb;
}
.p-school-import-detail__info-table td .m-label.-orange {
    background-color: var(--color-orange);
}

/* ファイル選択名は style.css でプレースホルダ色(#989898)固定。選択後は通常テキスト色にする */
.p-school-import-create .m-import__file-name.-selected {
    color: #333;
}

/* インポート実行ボタンは送信後に無効化される。連打防止のため見た目でも無効と分かるようにする */
.p-school-import-create .m-import__btn.-primary:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* #17 運営ログインの「ログイン状態を保持する」チェックボックス:
   design-source では input[type=checkbox] が appearance:none だけで :checked の見た目が無く、
   クリックしても状態が変化して見えない（＝チェックできない）。
   input には疑似要素が効かないため、:checked 時に背景SVGのチェックマークと塗りを付与し、cursor も補完する。 */
.p-login__form li .-check-box label,
.p-login__form li .-check-box input[type="checkbox"] {
    cursor: pointer;
}
.p-login__form li .-check-box input[type="checkbox"]:checked {
    background-color: #2589d0;
    border-color: #2589d0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
}

/* お知らせ一覧の掲載開始/終了日時（例 2026-07-01 14:46）が狭いセルで2行に折り返すため、
   日時セルは折り返さないようにする */
.p-news-table .m-table td.-nowrap {
    white-space: nowrap;
}