/*
 * 管理画面のフォーム。先頭は全リソースの作成・編集・閲覧画面に共通の文字の大きさ、次に公演明細の発売所の行、最後に公演明細のサイドバー
 * （クラスは PerformanceResource の定数と揃える：kw-playguide-row／kw-sidebar／kw-sidebar-actions）
 */

/*
 * 補助の文章は 13px（KYODOWEST-60）。Filament の既定では項目名（.fi-fo-field-label-content）・入力欄・説明文がみな 14px（--text-sm）で、
 * 説明の多い公演明細では三つが同じ重さに見えて入力欄が目に入りにくい（2026-11-01 石川）。説明は読めればよい補助の文章なので項目名より
 * 一段軽くする。12px（--text-xs）にはしない（日本語は細部がつぶれて読みにくい）。色は Filament の既定（灰）のまま。対象は 3 つ：
 *   - 入力欄の説明文（helperText）。Filament 5 は Text 部品（.fi-sc-text）として欄の内容の列（.fi-fo-field-content-col）の下に描く
 *   - セクションの見出しの下の説明（Section::description()。.fi-section-header-text-ctn の中の p）
 *   - 小さい Text（Text::size(TextSize::Small)、.fi-size-sm。発売所の 2 枠の注意・プレビューの注意・作成と最終更新）。Filament は Small に
 *     規則を持たず既定の 14px のままだったので、意図（小さく）をここで効かせる
 * バッジ（公開ステータス）と、enum で大きさを明示した Text（fi-size-*。TextSize と Size の両方を前方一致で除く。Filament の規則
 * `.fi-sc-text:not(.fi-badge).fi-size-lg` 等は特異度 (0,3,0) で、除かないと同率になり読み込み順で勝ってしまう）は除く。Text::size() に素の
 * 文字列（Tailwind のクラス）を渡すと fi-size- が付かず除けないので、欄の中では使わない。欄の内容の列の中の Text（Repeater の項目の中を含む）は
 * 補助の文章として扱う（helperText の位置だけに絞ると Filament の wrapper の構造に依存する）。
 * 残る相手は既定の `.fi-sc-text:not(.fi-badge)` と `.fi-section .fi-section-header-description` の (0,2,0) で、こちらはどれも一段上の
 * (0,3,0) 以上（同じ特異度だと読み込み順だけで決まる）。
 * rem で書く（ブラウザの文字サイズの設定に追従。既定で 13px）。行の高さは Filament が比率（calc(1.25 / .875)）で持つので、指定しなくても
 * 文字に合わせて縮む（約 18.6px）。セレクタは HelperTextSizeTest が、配信される Filament の規則（同じ要素に当たりうるものより一段上）と
 * 描画の入れ子に照らして固定する
 */
.fi-fo-field-content-col .fi-sc-text:not(.fi-badge):not([class*="fi-size-"]),
.fi-sc-text.fi-size-sm:not(.fi-badge),
.fi-section .fi-section-header-text-ctn > .fi-section-header-description {
    font-size: 0.8125rem;
}

/*
 * 公演明細の発売所の行（KYODOWEST-62）。Filament の Flex（横並び。チェック＋社名とコードは内容の幅、名称と URL が伸びる）に、入る幅が
 * 無いときの折り返しを足す。伸びる欄（.fi-growable、flex: 1 1 0%）は最小幅が無いと 1 文字の幅まで潰れる（1024px の実画面で URL が 24px）。
 * 最小幅を置くと、収まらないときはその欄が次の行に回って行いっぱいに伸びる。md 未満は Filament が縦に積む（flex-direction: column）ので関係ない。
 * Filament 側の `.fi-sc-flex > .fi-growable`（width・flex）と同じ要素に当たるので、一段上の特異度で書く（Filament が min-width を足しても負けない。
 * PerformanceFormTest が相手の実在と特異度の差を固定）。横並びになる md（48rem。Filament の fi-from-md と同じ）以上だけ：
 * 未満は column で、wrap を当てる意味が無い（親に高さの制約が付いたときに列が散らないように）
 */
@media (min-width: 48rem) {
    .fi-sc-flex.kw-playguide-row {
        flex-wrap: wrap;
    }

    .fi-sc-flex.kw-playguide-row > .fi-growable {
        /*
         * 1280px（行幅 443px）で最長の「ローソンチケット」＋ L コード（size 8）の行が 1 行に収まり、1024px（約 300px）では折り返す値。
         * 最長の行は 1280px で境界に近い（残り約 15px）。その行だけ折り返す環境が出て揃えたいなら、コードの size を 7 にするか 9rem に
         */
        min-width: 10rem;
    }
}

/*
 * 公演明細のサイドバー。3 列になる 64rem（Filament の lg と同じ単位。既定の文字サイズで 1024px）以上だけ。未満はサイドバーが本文の下に回るので何もしない
 */
@media (min-width: 64rem) {
    /*
     * 右のサイドバー（公開ステータス・更新情報。KYODOWEST-54）。sticky にし、高さをビューポートに収めて中でスクロールさせる。
     * sticky の要素がビューポートより高いと、フォームの下の方では先頭（保存・プレビュー）が上に隠れ、先頭付近では下端（更新情報）に届かない
     * （2026-10-31 の実画面。9/20 の「下端に届かない」と同じ根）。sticky はグリッド（フォーム本文）の中でしか効かないので、本文の末尾が
     * 上がってくると先頭は隠れる。高さを「ビューポート − 上 5rem − 下 4rem」に収めると、先頭が隠れ始める位置で下の保存ボタンがちょうど
     * 見えている（下のボタンは本文の末尾から約 60px）。中の欄は native の日時入力・Radio・Checkbox だけなので、overflow で切れる吹き出しは無い。
     * この要素（Group の素の div）は Filament の wrapper（.fi-grid-col > .fi-sc-component{height:100%}）に包まれ、その wrapper が行の
     * 高さいっぱいなので sticky が行の全体で効く（align-self は要らない）。overscroll-behavior は付けない（中の末尾に達した後もホイールが
     * ページに伝わるように）。dvh は iOS Safari のツールバー分を除いた高さ
     */
    .kw-sidebar {
        position: sticky;
        top: 5rem;
        max-height: calc(100dvh - 9rem);
        overflow-y: auto;
        /* スクロールバーが出たときに中身の幅が縮まないよう、常に余白を確保する（Windows のクラシックなスクロールバー） */
        scrollbar-gutter: stable;
        /* Section の枠線（ring）が overflow で切れないよう、枠の分だけ内側に余白を取り外側で打ち消す */
        padding: 2px;
        margin: -2px;
    }

    /*
     * サイドバーの先頭の操作（保存・プレビュー）。中をスクロールしても先頭に残す。
     * sticky は親の箱の中でしか効かず、部品の直の親（.fi-sc-component）は部品と同じ高さなので、スクロールする内容全体
     * （Group の中のグリッド .fi-sc）の直の子である列（.fi-grid-col）に付ける（2026-10-31 実画面で、部品自身に付けても残らないことを確認）。
     * サイドバーの中に限る（外では overflow が無く、ビューポート基準で貼り付いてしまう）。
     * 下を流れる欄が透けないよう本文と同じ背景を敷き（Filament の .fi-body と同じ変数。ライトは gray-50、ダークは gray-950）、
     * グリッドの隙間（gap 1.5rem）の分は box-shadow で同じ色を下に描く
     */
    .kw-sidebar > .fi-sc > .fi-grid-col:has(> .fi-sc-component > .kw-sidebar-actions) {
        --kw-sidebar-bg: var(--gray-50);
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--kw-sidebar-bg);
        box-shadow: 0 1.5rem 0 var(--kw-sidebar-bg);
    }

    html.dark .kw-sidebar > .fi-sc > .fi-grid-col:has(> .fi-sc-component > .kw-sidebar-actions) {
        --kw-sidebar-bg: var(--gray-950);
    }
}

/* 関連する公演の候補の 2 段目（App\Filament\Support\TourOptions）。文字の大きさはこのファイルの 1 か所（不変条件 #62）に足さず、濃さで主従を付ける */
.kw-tour-option-detail {
    opacity: 0.7;
}