/* 画面幅ごとの切替。他ファイルの規則を上書きするため最後に読み込む。
   閾値は2本 (#618): スマホ = (max-width: 743px), (max-height: 499px) and (max-width: 1279px) / 狭幅(スマホ+タブレット) = (max-width: 1279px)。
   条件式は js/viewport-tier.js と同一に保つ — 詳細・一覧の構造は C# 側がこの区分で描き分ける。 */
@supports not (corner-shape: bevel) {
    .app-shell :is(button, input, select, .panel, .scroll-list, .material-pane, .side-drawer) { border-radius: 0; }
}
.app-shell .material-inventory-btn { display: none; }

/* PC で素材欄を並べて一覧が狭いとき、詳細の素材需要を2段目へ落とす。タブレットの2カラム詳細には当てない。 */
@container browser-operator-table (max-width: 820px) {
    .app-shell .detail-columns:not(.plan-edit, .stats-on, .detail-columns-tablet) { grid-template-columns: minmax(240px, max-content) minmax(0, 1fr); }
    .app-shell .detail-columns:not(.plan-edit, .stats-on, .detail-columns-tablet) > .detail-demand {
        grid-column: 1 / -1;
        min-height: 180px;
        border-top: 1px solid var(--detail-grid);
        padding-top: 12px;
    }
    .app-shell .detail-columns:not(.plan-edit, .stats-on, .detail-columns-tablet) > .detail-demand::before { display: none; }
    .app-shell .detail-columns:not(.plan-edit, .stats-on, .detail-columns-tablet) > .detail-demand .op-detail-materials-inner { top: 12px; }
}

@media (max-width: 1279px) {
    .app-shell .main-workspace,
    .app-shell .main-workspace.materials-collapsed { display: flex; flex-direction: column; }
    .app-shell .material-side { display: contents; }
    .app-shell .mat-rail { display: none; }
    .app-shell .main-workspace :is(.operator-pane, .material-pane) { flex: 1 1 auto; min-height: 0; }
    .app-shell .main-workspace .material-pane { display: none; }
    .app-shell .main-workspace.mobile-materials .material-pane { display: flex; }
    .app-shell .operator-layout { padding: 8px; }
    .app-shell .material-side .material-pane { margin: 8px; }
    .app-shell .side-drawer { inset: 45px 0 0 auto; max-height: calc(100dvh - 45px); }
    .app-shell .main-toolbar > .ownership-gauge { display: none; }
    .app-shell .ak-nav-ownership { display: block; }
    /* 素材タブではオペレーター用のツールバーを出さない — そこから開くパネルは隠れた一覧側に出て見えないため。 */
    .app-shell.ws-materials .main-toolbar { display: none; }
    /* 狭幅ではイベント入手計画の入口を素材タブにまとめる (#732)。 */
    .app-shell .main-toolbar .tb-inventory { display: none; }
    .app-shell .material-inventory-btn { display: inline-flex; }
}

@media (max-width: 743px), (max-height: 499px) and (max-width: 1279px) {
    /* スマホでも base.css の通知バー用余白を保ち、最終行を固定バーの上までスクロールできるようにする (#729)。 */
    .app-shell .ak-notifbar { grid-template-columns: minmax(0, 1fr); padding-inline: 8px; }
    .app-shell .ak-notifbar.has-secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .app-shell .ak-notifbar:not(.has-secondary) .ak-notif-w2 { display: none; }
    .app-shell .ak-topbar { padding: 4px 6px; }
    .app-shell .ak-topbar h1, .app-shell .ak-topbar .status { display: none; }
    .app-shell .ak-nav-narrow { display: block; }

    .app-shell .main-toolbar { flex-wrap: nowrap; min-height: 0; padding: 6px 8px; }
    .app-shell .main-toolbar .toolbar-search { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
    .app-shell .main-toolbar .ak-search { flex: 1 1 auto; min-width: 0; }
    .app-shell .main-toolbar .ak-search input[type=search] { width: 100%; }
    .app-shell .main-toolbar .ak-kbd,
    .app-shell .main-toolbar :is(.tb-collapse, .tb-inventory, .tb-bulk) { display: none; }
    .app-shell .main-toolbar .toolbar-actions { flex-wrap: nowrap; margin-left: 0; }
    .app-shell .main-toolbar .ak-search button { min-width: 30px; min-height: 30px; height: 30px; }
    /* 検索中かつフィルタ適用中は、件数・前後移動とフィルタ表示が1段に入らず入力欄が潰れるため、検索欄を1段目に独立させる。 */
    .app-shell .main-toolbar:has(.ak-search-count):has(.filter-active) { flex-wrap: wrap; }
    .app-shell .main-toolbar:has(.ak-search-count):has(.filter-active) .toolbar-search { flex-basis: 100%; }

    .app-shell .side-drawer { inset: 0; width: 100vw; max-height: 100dvh; bottom: 0; border-radius: 0; }

    .app-shell .operator-layout { padding: 0; }
    .app-shell .operator-table { container-type: normal; border-radius: 0; border-left: 0; border-right: 0; }
    /* 左に固定するのは名前だけにして、育成値の列が見える幅を残す。CODE は横スクロールで流れる。 */
    .app-shell .operator-table.id-first :is(.operator-cell, .sort-heading)[data-column-key="code"] { position: relative; z-index: auto; }
    .app-shell .operator-table.id-first [data-column-key="name"] { left: 0; }
    .app-shell .material-pane { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }

    /* 詳細は一覧の中に置いたまま全画面に重ねる — 一覧側の位置と展開状態を保ったまま戻れるようにするため。 */
    .app-shell .expanded-operator > .list-row { display: none; }
    .app-shell .expanded-operator .detail.pd-page { position: fixed; inset: 0; z-index: 80; width: auto; }
    /* 全画面の詳細を開いている間、一覧の上部バーとツールバーは隠す — 重なり順の都合で詳細やシートの上に残り、押せてしまうため (#619)。 */
    .app-shell.phone-detail-open :is(.ak-topbar, .main-toolbar) { visibility: hidden; }

    /* タッチで押し分けられる大きさにする (#619)。ステッパーを広げた分、列見出しも同じ幅に揃える。 */
    .app-shell .num-stepper { width: 132px; }
    .app-shell .num-stepper .num-stepper-btn { min-width: 40px; min-height: 40px; font-size: 18px; }
    .app-shell .num-stepper .num-stepper-input { height: 36px; font-size: 14px; }
    .app-shell :is(.op-train-colhead, .op-plan-colhead, .op-train-mirror) { width: 132px; }
    .app-shell .detail-other-row { grid-template-columns: minmax(4rem, 1fr) 132px; }
    .app-shell input[type=checkbox] { width: 22px; height: 22px; }
    .app-shell :is(.ak-topbar-icon, .ak-nav-toggle) { min-width: 40px; min-height: 40px; }
    .app-shell .material-tier-toggle { min-width: 40px; min-height: 40px; }
    .app-shell .op-plan-chip .op-plan-del { width: 30px; height: 30px; min-height: 30px; }
    .app-shell .op-plan-next-hint { display: block; flex-basis: 100%; margin: 4px 0 0; }
    .app-shell .op-plan-footbar { flex-wrap: wrap; }
    /* 編集欄に切り替わっても行の中の位置が動かないよう、表示時から同じ幅を取る (#619)。 */
    .app-shell .pm-owned .material-number { width: 6.5rem; min-height: 36px; }
    .app-shell .pm-item .material-editable { display: inline-flex; align-items: center; justify-content: flex-end; width: 4rem; min-height: 36px; }
    .app-shell :is(.pm-owned, .pm-item) .mat-own-input { width: 100%; height: 34px; margin: 0; }
    /* 列の表示設定はドロワー自体をスクロールさせ、残りの高さを使う (#619)。 */
    .app-shell .column-settings { max-height: none; overflow: visible; }

    .app-shell .filter-drawer .flt-body { flex-direction: column; overflow: auto; }
    .app-shell .filter-drawer .flt-builder { width: 100%; min-height: 340px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
    .app-shell .filter-drawer .flt-conditions { min-height: 180px; }
}