/* ========================================================================== ざいのーと [在庫管理] スマホ横画面（Landscape）専用スタイル ========================================================================== */ /* ========================================================== スマホ横持ち対応（Landscape Mode & 低画面高） 出力チェック＆最終更新をヘッダーへ集約し、メタ行を丸ごとカット！ 全10項目を4列3行（商品名・メモ2列、他1列）の明快レイアウトを保ちつつ、 文字サイズ・入力マスを1回り大きく（フォント12〜14px、入力高29px）して視認性・押しやすさを両立 下部ボタンバーを含めて全高約215px・完全スクロールゼロで収める ========================================================== */ @media screen and (orientation: landscape), screen and (min-width: 600px) and (max-height: 600px) { /* 全体の横スクロール防止 */ html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; } .mobile-detail-sheet { width: 96vw !important; max-width: 920px !important; max-height: 98vh !important; border-radius: 12px 12px 0 0 !important; bottom: env(safe-area-inset-bottom, 0px) !important; } .sheet-drag-handle { width: 36px !important; height: 3px !important; margin: 3px auto 2px !important; } .sheet-header { padding: 4px 14px 5px !important; } .sheet-title { font-size: 14px !important; } .sheet-no-badge { font-size: 11.5px !important; padding: 2px 6px !important; } .sheet-header-checkbox { padding: 2px 7px !important; font-size: 11.5px !important; gap: 4px !important; } .sheet-header-checkbox input[type="checkbox"] { width: 14px !important; height: 14px !important; } .sheet-header-meta { gap: 8px !important; } .sheet-update-time { font-size: 11px !important; color: #64748b !important; } .sheet-close-btn { padding: 2px 8px !important; font-size: 18px !important; } .sheet-body { padding: 4px 14px 4px !important; gap: 0 !important; overflow-y: auto !important; flex: 1 1 auto !important; } .sheet-fields-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 3.5px 10px !important; } .sheet-field-group { min-width: 0 !important; gap: 1.5px !important; } .sheet-label { font-size: 11px !important; font-weight: 700 !important; margin-bottom: 1.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.2 !important; } .sheet-input, .sheet-select { height: 29px !important; font-size: 13px !important; padding: 2px 7px !important; min-width: 0 !important; border-radius: 4px !important; } .sheet-name-input { font-size: 13.5px !important; font-weight: 700 !important; } .sheet-step-btn { width: 29px !important; height: 29px !important; font-size: 15px !important; border-radius: 4px !important; flex-shrink: 0 !important; } .sheet-stepper { gap: 2px !important; min-width: 0 !important; } .sheet-stepper .sheet-input, .sheet-stepper .sheet-select { min-width: 0 !important; padding: 2px 4px !important; height: 29px !important; font-size: 13px !important; } .sheet-field-expiry input[type="date"] { padding: 2px 4px !important; font-size: 12px !important; height: 29px !important; } /* 横持ち時：商品名(2列) ＋ メモ(2列) で1行目に収まる！ */ .sheet-field-name { grid-column: span 2 !important; order: 1 !important; } .sheet-field-memo { grid-column: span 2 !important; order: 2 !important; } /* 2行目：場所(1列) + 分類(1列) + 数量(1列) + 単位(1列) で4列1行に収まる！ */ .sheet-field-location { grid-column: span 1 !important; order: 3 !important; } .sheet-field-category { grid-column: span 1 !important; order: 4 !important; } .sheet-field-quantity { grid-column: span 1 !important; order: 5 !important; } .sheet-field-unit { grid-column: span 1 !important; order: 6 !important; } /* 3行目：残存率(1列) + 購入数(1列) + 賞味期限(1列) + 内容量(1列) で4列1行に収まる！ */ .sheet-field-usage { grid-column: span 1 !important; order: 7 !important; } .sheet-field-purchase { grid-column: span 1 !important; order: 8 !important; } .sheet-field-expiry { grid-column: span 1 !important; order: 9 !important; } .sheet-field-capacity { grid-column: span 1 !important; order: 10 !important; } .sheet-meta-row { display: none !important; } /* フッターアクションバー */ .sheet-footer { padding: 4px 14px 6px !important; gap: 6px !important; } .sheet-btn { height: 31px !important; font-size: 12.5px !important; padding: 0 8px !important; border-radius: 4px !important; white-space: nowrap !important; } .sheet-btn-update { font-size: 12.5px !important; flex: 1.5 1 110px !important; } } /* 強制スマホモードで横幅が広い場合も同様に4列最適化 */ @media screen and (min-width: 640px) { body.force-mobile .mobile-detail-sheet { width: 96vw; max-width: 920px; } body.force-mobile .sheet-fields-grid { grid-template-columns: repeat(4, 1fr); gap: 6px 10px; } body.force-mobile .sheet-field-group { min-width: 0; } body.force-mobile .sheet-input, body.force-mobile .sheet-select { min-width: 0; } body.force-mobile .sheet-step-btn { width: 30px; flex-shrink: 0; } body.force-mobile .sheet-stepper { gap: 2px; min-width: 0; } body.force-mobile .sheet-stepper .sheet-input, body.force-mobile .sheet-stepper .sheet-select { min-width: 0; padding: 2px 4px; } body.force-mobile .sheet-field-name { grid-column: span 2; order: 1; } body.force-mobile .sheet-field-memo { grid-column: span 2; order: 2; } body.force-mobile .sheet-field-location { grid-column: span 1; order: 3; } body.force-mobile .sheet-field-category { grid-column: span 1; order: 4; } body.force-mobile .sheet-field-quantity { grid-column: span 1; order: 5; } body.force-mobile .sheet-field-unit { grid-column: span 1; order: 6; } body.force-mobile .sheet-field-usage { grid-column: span 1; order: 7; } body.force-mobile .sheet-field-purchase { grid-column: span 1; order: 8; } body.force-mobile .sheet-field-expiry { grid-column: span 1; order: 9; } body.force-mobile .sheet-field-capacity { grid-column: span 1; order: 10; } } /* ========================================================================== スマホ横画面（Landscape）ヘッダー配置: 5ボタン（.header-links）を「説明文」と「アイコン」の間に右寄せで割り込み配置 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px) { .app-header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; padding: 4px 8px !important; column-gap: 6px !important; row-gap: 2px !important; white-space: nowrap !important; } .app-title-group { display: contents !important; } /* 1. 左列: タイトル (ざいのーと アイコン / [アプリ名]) */ .app-title { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; line-height: 1.15 !important; flex-shrink: 0 !important; } .app-title-main, .app-title-tag { font-size: 13.5px !important; font-weight: 700 !important; white-space: nowrap !important; color: #ffffff !important; display: block !important; } /* 2. 中央-左: 補足説明文 (上下2行エリア - 画面幅が狭い時は柔軟に縮小しプロジェクトボタンを保護) */ .app-subtitle { grid-column: 2 / 3 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; min-width: 0 !important; max-width: 140px !important; line-height: 1.2 !important; overflow: hidden !important; } .subtitle-line1, .subtitle-line2 { font-size: 10px !important; opacity: 0.85 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } /* 3. 中央-右: 5ボタン（最優先配置・絶対に追い出されないよう縮小・非表示ガード） */ .header-links { grid-column: 3 / 4 !important; grid-row: 1 / 3 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; justify-self: end !important; align-items: center !important; gap: 3px !important; margin: 0 !important; margin-left: 8px !important; padding: 0 !important; flex-shrink: 0 !important; min-width: max-content !important; } .header-links a, .header-links .current-app { font-size: 10px !important; padding: 2.5px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; border-radius: 4px !important; } /* 4. 最右列: 契約アイコン & 画面切替ボタン */ #zainotePlanBadge, .zainote-plan-badge { grid-column: 4 / 5 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 !important; font-size: 10px !important; padding: 2px 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } #zainoteModeToggleBtn, .zainote-mode-toggle-btn { grid-column: 4 / 5 !important; grid-row: 2 !important; justify-self: end !important; margin: 0 !important; font-size: 9.5px !important; padding: 2px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; } } /* PC等の横長画面でスマホモード（force-mobile-mode）にした場合の完全対応 */ @media screen and (orientation: landscape) { body.force-mobile-mode:not(.force-pc-mode) .app-header, html.force-mobile-mode:not(.force-pc-mode) .app-header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; padding: 4px 8px !important; column-gap: 6px !important; row-gap: 2px !important; white-space: nowrap !important; flex-direction: row !important; } body.force-mobile-mode:not(.force-pc-mode) .app-title-group, html.force-mobile-mode:not(.force-pc-mode) .app-title-group { display: contents !important; } body.force-mobile-mode:not(.force-pc-mode) .app-title, html.force-mobile-mode:not(.force-pc-mode) .app-title { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; line-height: 1.15 !important; flex-shrink: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .app-title-main, body.force-mobile-mode:not(.force-pc-mode) .app-title-tag, html.force-mobile-mode:not(.force-pc-mode) .app-title-main, html.force-mobile-mode:not(.force-pc-mode) .app-title-tag { font-size: 13.5px !important; font-weight: 700 !important; white-space: nowrap !important; color: #ffffff !important; display: block !important; } body.force-mobile-mode:not(.force-pc-mode) .app-subtitle, html.force-mobile-mode:not(.force-pc-mode) .app-subtitle { grid-column: 2 / 3 !important; grid-row: 1 / 3 !important; justify-self: start !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; margin: 0 !important; min-width: 0 !important; max-width: 140px !important; line-height: 1.2 !important; overflow: hidden !important; } body.force-mobile-mode:not(.force-pc-mode) .subtitle-line1, body.force-mobile-mode:not(.force-pc-mode) .subtitle-line2, html.force-mobile-mode:not(.force-pc-mode) .subtitle-line1, html.force-mobile-mode:not(.force-pc-mode) .subtitle-line2 { font-size: 10px !important; opacity: 0.85 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links, html.force-mobile-mode:not(.force-pc-mode) .header-links { grid-column: 3 / 4 !important; grid-row: 1 / 3 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; justify-self: end !important; align-items: center !important; gap: 3px !important; margin: 0 !important; margin-left: 8px !important; padding: 0 !important; flex-shrink: 0 !important; min-width: max-content !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links a, body.force-mobile-mode:not(.force-pc-mode) .header-links .current-app, html.force-mobile-mode:not(.force-pc-mode) .header-links a, html.force-mobile-mode:not(.force-pc-mode) .header-links .current-app { font-size: 10px !important; padding: 2.5px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; border-radius: 4px !important; } body.force-mobile-mode:not(.force-pc-mode) #zainotePlanBadge, body.force-mobile-mode:not(.force-pc-mode) .zainote-plan-badge, html.force-mobile-mode:not(.force-pc-mode) #zainotePlanBadge, html.force-mobile-mode:not(.force-pc-mode) .zainote-plan-badge { grid-column: 4 / 5 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 !important; font-size: 10px !important; padding: 2px 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #zainoteModeToggleBtn, body.force-mobile-mode:not(.force-pc-mode) .zainote-mode-toggle-btn, html.force-mobile-mode:not(.force-pc-mode) #zainoteModeToggleBtn, html.force-mobile-mode:not(.force-pc-mode) .zainote-mode-toggle-btn { grid-column: 4 / 5 !important; grid-row: 2 !important; justify-self: end !important; margin: 0 !important; font-size: 9.5px !important; padding: 2px 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; } } /* ========================================================================== スマホ横画面（Landscape）検索タブ: 2行集約レイアウト - 1行目: スキャン / 保管場所 / 分類 / 品名検索（4枠） - 2行目: 検索(50%) / 在庫切れ抽出(75%) / 解除(75%) を2枠分に集約 残存警告を下の行から移動し2枠分に配置（1行分つめる） ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 768px) and (orientation: landscape) { #tab-panel-search.active { display: grid !important; grid-template-columns: repeat(16, minmax(0, 1fr)) !important; grid-template-rows: auto auto !important; gap: 4px !important; width: 100% !important; padding: 4px 6px !important; align-items: center !important; min-height: 0 !important; } #tab-panel-search .search-tab-content { display: contents !important; } /* 1行目（4枠 = 各4カラム） */ #tab-panel-search button[onclick*="openBarcodeScanner"] { grid-column: 1 / 5 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 2px 4px !important; margin: 0 !important; } #tab-panel-search #locationFilter { grid-column: 5 / 9 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 0 4px !important; margin: 0 !important; } #tab-panel-search #categoryFilter { grid-column: 9 / 13 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 0 4px !important; margin: 0 !important; } #tab-panel-search #searchInput { grid-column: 13 / 17 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 0 6px !important; margin: 0 !important; } /* 2行目 左側（2枠分 = 8カラム = 2:3:3 で 50%, 75%, 75%） */ #tab-panel-search #searchButton { grid-column: 1 / 3 !important; grid-row: 2 !important; height: 32px !important; font-size: 11.5px !important; font-weight: 700 !important; padding: 4px 2px !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; } #tab-panel-search #outOfStockButton { grid-column: 3 / 6 !important; grid-row: 2 !important; height: 32px !important; font-size: 10.5px !important; font-weight: 600 !important; padding: 4px 2px !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; } #tab-panel-search #clearFilterButton { grid-column: 6 / 9 !important; grid-row: 2 !important; height: 32px !important; font-size: 10.5px !important; font-weight: 600 !important; padding: 4px 2px !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; } /* 2行目 枠3（4カラム = 1枠分）: 残存警告（メッセージと1:1の同じ大きさ・上下位置を完全同期） */ #tab-panel-search .residual-warning-row { grid-column: 9 / 13 !important; grid-row: 2 !important; position: static !important; top: 0 !important; margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 1px !important; height: 32px !important; padding: 0 3px !important; font-size: 8.5px !important; box-sizing: border-box !important; border: 1px solid #e2e8f0 !important; border-radius: 4px !important; background: #f8fafc !important; white-space: nowrap !important; overflow: hidden !important; } #tab-panel-search .residual-warning-row label, #tab-panel-search .residual-warning-row span { display: inline-flex !important; align-items: center !important; font-size: 8.5px !important; line-height: 1 !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; letter-spacing: -0.2px !important; } #tab-panel-search .residual-warning-row input[type="number"] { height: 20px !important; font-size: 9.5px !important; padding: 0 1px !important; text-align: center !important; border: 1px solid #cbd5e1 !important; border-radius: 3px !important; background: #ffffff !important; box-sizing: border-box !important; flex-shrink: 0 !important; vertical-align: middle !important; margin: 0 !important; } #tab-panel-search #unopenedQuantityWarningThreshold { width: 22px !important; } #tab-panel-search #residualRateWarningThreshold { width: 26px !important; } #tab-panel-search .residual-warning-row input[type="checkbox"] { margin: 0 2px 0 0 !important; width: 12px !important; height: 12px !important; flex-shrink: 0 !important; vertical-align: middle !important; } /* 2行目 枠4（4カラム = 1枠分）: メッセージ表示領域（残存警告と1:1の同じ大きさ・上下位置を完全同期） */ #tab-panel-search #filterStatus { grid-column: 13 / 17 !important; grid-row: 2 !important; position: static !important; top: 0 !important; margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 10px !important; line-height: 1.15 !important; color: #64748b !important; padding: 0 4px !important; box-sizing: border-box !important; border: 1px solid #e2e8f0 !important; border-radius: 4px !important; background: #f8fafc !important; overflow: hidden !important; word-break: break-all !important; white-space: normal !important; } } /* ========================================================================== スマホ横画面（Landscape）データ管理タブ: - データ管理タブ: 1行配置（左タイトル108px + 右5ボタングリッド） - ボタン上下サイズを30pxに統一 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 520px), screen and (max-width: 768px) and (orientation: landscape) { .management-tab-content { width: 100% !important; gap: 0 !important; box-sizing: border-box !important; } .management-group { display: grid !important; grid-template-columns: 94px repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; margin-bottom: 3px !important; align-items: stretch !important; box-sizing: border-box !important; } .management-group:last-child { margin-bottom: 1px !important; } #tab-panel-manage { padding-bottom: 1px !important; } body:not(.force-pc-mode) .management-group-title, .management-group-title { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 36px !important; border-right: 2px solid #cbd5e1 !important; border-bottom: none !important; padding: 2px 6px !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; background: transparent !important; color: #334155 !important; justify-content: flex-start !important; text-align: left !important; } .management-group-title::after { content: "" !important; } .management-group-title br { display: none !important; } .management-tab-content .custom-button, .management-group .custom-button, .management-group a, .management-group label, body.force-mobile-mode .management-tab-content .custom-button, body.force-mobile-mode .management-group .custom-button, body.force-mobile-mode .management-group a, body.force-mobile-mode .management-group label { grid-column: auto !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 30px !important; font-size: 12px !important; font-weight: 600 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 4px 2px !important; box-sizing: border-box !important; border-radius: 5px !important; white-space: nowrap !important; margin: 0 !important; } #clearAllLink, #aiSettingsLink, label[for="importInventoryFile"], #cleanupSoleButton { grid-column: auto !important; grid-row: 1 !important; } } /* ========================================================================== 全スマホモード（縦・横・強制スマホ）共通: - タブ余白削減 (padding: 4px 8px 3px) - ドロップダウン・テキストボックス・日付: 上下サイズ30pxに圧縮 - ソートエリア: 30px統一 - データ管理タブボタン: 30px統一 ========================================================================== */ @media (max-width: 768px), (max-height: 600px) and (orientation: landscape), (orientation: portrait) and (max-width: 768px) { #tab-panel-search, #tab-panel-add, #tab-panel-manage, .tab-content-panel { padding: 4px 8px 3px !important; margin-bottom: 4px !important; min-height: 0 !important; } /* 新在庫追加タブ: 下部ラインを4px拡大 (3px -> 7px) して見切れを防止 */ #tab-panel-add { padding-bottom: 7px !important; } /* データ管理タブ: ボタン上下サイズを30pxに統一 */ .management-tab-content .custom-button, .management-group .custom-button, .management-group a, .management-group button, .management-group label { height: 30px !important; min-height: 30px !important; max-height: 30px !important; font-size: 12px !important; padding: 2px 4px !important; box-sizing: border-box !important; border-radius: 5px !important; line-height: 1.2 !important; } /* ソートエリア: 上下サイズを30pxに統一 */ .action-group .sort-select, .action-group .sort-execute-button, #saveAllButton, .sort-select, .sort-execute-button { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; box-sizing: border-box !important; } /* タブ内: ドロップダウン・テキストボックスの上下サイズを30pxに圧縮（上下余白・パディングを削減） */ .tab-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .tab-content-panel select, .tab-content-panel .form-item input, .tab-content-panel .form-item select, #tab-panel-search input, #tab-panel-search select, #tab-panel-add input, #tab-panel-add select, #itemLocation, #itemCategory, #itemName, #itemQuantity, #itemUnit, #itemUsage, #itemCapacity, #itemExpiryDate, #itemPurchase, #itemMemo { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; padding: 0 6px !important; box-sizing: border-box !important; } /* タブ内ボタンの高さも30pxで揃える */ #tab-panel-add #addButton, #tab-panel-add #scanButton, #tab-panel-search button, #addButton, #scanButton { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; box-sizing: border-box !important; } /* ラベルの高さ統一 */ #tab-panel-add label, #addForm label, .form-item label { height: 16px !important; min-height: 16px !important; max-height: 16px !important; line-height: 16px !important; font-size: 11.5px !important; margin: 0 0 2px 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } } /* 強制スマホモード（PCでの検証用） */ body.force-mobile-mode #tab-panel-search, body.force-mobile-mode #tab-panel-add, body.force-mobile-mode #tab-panel-manage, body.force-mobile-mode .tab-content-panel { padding: 4px 8px 3px !important; margin-bottom: 4px !important; min-height: 0 !important; } body.force-mobile-mode #tab-panel-add { padding-bottom: 7px !important; } body.force-mobile-mode .management-tab-content .custom-button, body.force-mobile-mode .management-group .custom-button, body.force-mobile-mode .management-group a, body.force-mobile-mode .management-group button, body.force-mobile-mode .management-group label, body.force-mobile-mode .action-group .sort-select, body.force-mobile-mode .action-group .sort-execute-button, body.force-mobile-mode #saveAllButton, body.force-mobile-mode .tab-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.force-mobile-mode .tab-content-panel select, body.force-mobile-mode #addButton, body.force-mobile-mode #scanButton { height: 30px !important; min-height: 30px !important; max-height: 30px !important; box-sizing: border-box !important; } /* ========================================================================== PCでの強制スマホモード（横長モニタ環境）: 画面解像度（max-width/max-height）に縛られず、横長時は確実に横モードレイアウトを適用 ========================================================================== */ @media screen and (orientation: landscape) { /* 2. 検索タブ（2行集約レイアウト） */ body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search.active { display: grid !important; grid-template-columns: repeat(16, minmax(0, 1fr)) !important; grid-template-rows: auto auto !important; gap: 4px !important; width: 100% !important; padding: 4px 6px !important; align-items: center !important; min-height: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search .search-tab-content { display: contents !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search button[onclick*="openBarcodeScanner"] { grid-column: 1 / 5 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 2px 4px !important; margin: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #locationFilter { grid-column: 5 / 9 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 0 4px !important; margin: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #categoryFilter { grid-column: 9 / 13 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 0 4px !important; margin: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #searchInput { grid-column: 13 / 17 !important; grid-row: 1 !important; height: 32px !important; font-size: 11px !important; padding: 0 6px !important; margin: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #searchButton { grid-column: 1 / 3 !important; grid-row: 2 !important; height: 32px !important; font-size: 11.5px !important; font-weight: 700 !important; padding: 4px 2px !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #outOfStockButton { grid-column: 3 / 6 !important; grid-row: 2 !important; height: 32px !important; font-size: 10.5px !important; font-weight: 600 !important; padding: 4px 2px !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #clearFilterButton { grid-column: 6 / 9 !important; grid-row: 2 !important; height: 32px !important; font-size: 10.5px !important; font-weight: 600 !important; padding: 4px 2px !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search .residual-warning-row { grid-column: 9 / 13 !important; grid-row: 2 !important; position: static !important; margin: 0 !important; align-self: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 1px !important; height: 32px !important; padding: 0 3px !important; font-size: 8.5px !important; box-sizing: border-box !important; border: 1px solid #e2e8f0 !important; border-radius: 4px !important; background: #f8fafc !important; white-space: nowrap !important; overflow: hidden !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search .residual-warning-row label, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search .residual-warning-row span { display: inline-flex !important; align-items: center !important; font-size: 8.5px !important; line-height: 1 !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; letter-spacing: -0.2px !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search .residual-warning-row input[type="number"] { height: 20px !important; font-size: 9.5px !important; padding: 0 1px !important; text-align: center !important; border: 1px solid #cbd5e1 !important; border-radius: 3px !important; background: #ffffff !important; box-sizing: border-box !important; flex-shrink: 0 !important; vertical-align: middle !important; margin: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #unopenedQuantityWarningThreshold { width: 22px !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #residualRateWarningThreshold { width: 26px !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search .residual-warning-row input[type="checkbox"] { margin: 0 2px 0 0 !important; width: 12px !important; height: 12px !important; flex-shrink: 0 !important; vertical-align: middle !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #filterStatus { grid-column: 13 / 17 !important; grid-row: 2 !important; position: static !important; margin: 0 !important; align-self: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 10px !important; line-height: 1.15 !important; color: #64748b !important; padding: 0 4px !important; box-sizing: border-box !important; border: 1px solid #e2e8f0 !important; border-radius: 4px !important; background: #f8fafc !important; overflow: hidden !important; word-break: break-all !important; white-space: normal !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-add { padding: 4px 8px 7px !important; } /* 4. データ管理タブ（1行インライン集約） */ body.force-mobile-mode:not(.force-pc-mode) .management-tab-content { width: 100% !important; gap: 0 !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .management-group { display: grid !important; grid-template-columns: 94px repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; margin-bottom: 3px !important; align-items: stretch !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) .management-group:last-child { margin-bottom: 1px !important; } body.force-mobile-mode:not(.force-pc-mode) #tab-panel-manage { padding-bottom: 1px !important; } body.force-mobile-mode:not(.force-pc-mode) body:not(.force-pc-mode) .management-group-title, .management-group-title { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 36px !important; border-right: 2px solid #cbd5e1 !important; border-bottom: none !important; padding: 2px 6px !important; margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; background: transparent !important; color: #334155 !important; justify-content: flex-start !important; text-align: left !important; } body.force-mobile-mode:not(.force-pc-mode) .management-group-title::after { content: "" !important; } body.force-mobile-mode:not(.force-pc-mode) .management-group-title br { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) .management-tab-content .custom-button, body.force-mobile-mode:not(.force-pc-mode) .management-group .custom-button, body.force-mobile-mode:not(.force-pc-mode) .management-group a, body.force-mobile-mode:not(.force-pc-mode) .management-group label { grid-column: auto !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 30px !important; font-size: 12px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 4px 2px !important; box-sizing: border-box !important; border-radius: 5px !important; white-space: nowrap !important; margin: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) #clearAllLink, body.force-mobile-mode:not(.force-pc-mode) #aiSettingsLink, body.force-mobile-mode:not(.force-pc-mode) label[for="importInventoryFile"], body.force-mobile-mode:not(.force-pc-mode) #cleanupSoleButton { grid-column: auto !important; grid-row: 1 !important; } /* 5. 詳細シート（横画面用・4列3行レイアウト） */ body.force-mobile-mode:not(.force-pc-mode) .mobile-detail-sheet { width: 96vw !important; max-width: 920px !important; max-height: 98vh !important; border-radius: 12px 12px 0 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-drag-handle { width: 36px !important; height: 3px !important; margin: 3px auto 2px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-header { padding: 4px 14px 5px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-title { font-size: 14px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-no-badge { font-size: 11.5px !important; padding: 2px 6px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-header-checkbox { padding: 2px 7px !important; font-size: 11.5px !important; gap: 4px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-header-checkbox input[type="checkbox"] { width: 14px !important; height: 14px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-header-updated { display: inline-flex !important; font-size: 11px !important; padding: 2px 6px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-close-btn { padding: 2px 8px !important; font-size: 18px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-body { padding: 4px 14px 4px !important; gap: 0 !important; overflow-y: auto !important; flex: 1 1 auto !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-fields-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 3.5px 10px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-group { margin-bottom: 0 !important; min-width: 0 !important; gap: 1.5px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-label { font-size: 11px !important; font-weight: 700 !important; margin-bottom: 1.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.2 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-input, body.force-mobile-mode:not(.force-pc-mode) .sheet-select { height: 29px !important; font-size: 13px !important; padding: 2px 7px !important; min-width: 0 !important; border-radius: 4px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-name-input { font-size: 13.5px !important; font-weight: 700 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-step-btn { width: 29px !important; height: 29px !important; font-size: 15px !important; border-radius: 4px !important; flex-shrink: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-stepper { gap: 2px !important; min-width: 0 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-stepper .sheet-input, body.force-mobile-mode:not(.force-pc-mode) .sheet-stepper .sheet-select { min-width: 0 !important; padding: 2px 4px !important; height: 29px !important; font-size: 13px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-expiry input[type="date"] { padding: 2px 4px !important; font-size: 12px !important; height: 29px !important; } /* 1行目: 商品名(2列) + メモ(2列) */ body.force-mobile-mode:not(.force-pc-mode) .sheet-field-name { grid-column: span 2 !important; order: 1 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-memo { grid-column: span 2 !important; order: 2 !important; } /* 2行目: 保管場所(1列) + 分類(1列) + 数量(1列) + 単位(1列) */ body.force-mobile-mode:not(.force-pc-mode) .sheet-field-location { grid-column: span 1 !important; order: 3 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-category { grid-column: span 1 !important; order: 4 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-quantity { grid-column: span 1 !important; order: 5 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-unit { grid-column: span 1 !important; order: 6 !important; } /* 3行目: 残存率(1列) + 購入数(1列) + 賞味期限(1列) + 内容量(1列) */ body.force-mobile-mode:not(.force-pc-mode) .sheet-field-usage { grid-column: span 1 !important; order: 7 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-purchase { grid-column: span 1 !important; order: 8 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-expiry { grid-column: span 1 !important; order: 9 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-field-capacity { grid-column: span 1 !important; order: 10 !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-meta-row { display: none !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-footer { padding: 4px 14px 6px !important; gap: 6px !important; } body.force-mobile-mode:not(.force-pc-mode) .sheet-btn { height: 31px !important; font-size: 12.5px !important; padding: 0 8px !important; border-radius: 4px !important; white-space: nowrap !important; } } /* スマホ横画面モード時：No列の数字をクリッカブルとしてアンダーライン表示 */ #inventory tbody tr:not(.separator-row) td:first-child, body.force-mobile-mode #inventory tbody td:first-child, body:not(.force-pc-mode) #inventory tbody td:first-child { cursor: pointer !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 2px !important; border-bottom: 1px solid #ccc !important; } #inventory tbody tr:not(.separator-row) td:first-child:hover { background-color: #e0f2fe !important; color: #0284c7 !important; text-decoration: underline !important; } /* ========================================================================== スマホ横画面（Landscape）ではアイコンを通常表示に復元し、元のボタン幅・高さを維持 ========================================================================== */ @media screen and (orientation: landscape) and (max-height: 600px) { .header-links .nav-icon { display: inline !important; } .header-links { width: auto !important; justify-content: flex-end !important; } .header-links a, .header-links .current-app { flex: 0 0 auto !important; } } @media screen and (orientation: landscape) { body.force-mobile-mode:not(.force-pc-mode) .header-links .nav-icon, html.force-mobile-mode:not(.force-pc-mode) .header-links .nav-icon { display: inline !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links, html.force-mobile-mode:not(.force-pc-mode) .header-links { width: auto !important; justify-content: flex-end !important; } body.force-mobile-mode:not(.force-pc-mode) .header-links a, body.force-mobile-mode:not(.force-pc-mode) .header-links .current-app, html.force-mobile-mode:not(.force-pc-mode) .header-links a, html.force-mobile-mode:not(.force-pc-mode) .header-links .current-app { flex: 0 0 auto !important; } } /* ========================================================================== スマホ横画面（Landscape）: アクションバーを完全1行（全高約48px）に集約 - 一括保存ボタン・ソートボタンを非表示 - ソート・文字色を「上ラベル＋下コントロール」形式に統一（追加タブと同様） - 最新保存時刻＆更新率を含めて横1列にスッキリ収める ========================================================================== */ @media screen and (max-width: 768px) and (orientation: landscape), screen and (max-height: 520px) and (orientation: landscape) { .global-action-bar, .inventory-content > .global-action-bar, body.force-mobile-mode:not(.force-pc-mode) .global-action-bar, body.force-mobile-mode:not(.force-pc-mode) .inventory-content > .global-action-bar { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 14px !important; padding: 4px 10px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; position: static !important; height: auto !important; } /* 一括保存ボタン・ソートボタン・保存ラベルを完全非表示 */ #saveAllButton, #sortExecuteButton, .save-group-label, body.force-mobile-mode:not(.force-pc-mode) #saveAllButton, body.force-mobile-mode:not(.force-pc-mode) #sortExecuteButton, body.force-mobile-mode:not(.force-pc-mode) .save-group-label { display: none !important; } /* 1. ソートブロック: 上ラベル + 下セレクト（zaiko追加タブのform-itemを完全再現） */ .action-group.sort-action-group, body.force-mobile-mode:not(.force-pc-mode) .action-group.sort-action-group { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 0 0 auto !important; gap: 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .action-bar-item-label, .sort-group-label, .color-priority-label, body.force-mobile-mode:not(.force-pc-mode) .action-bar-item-label, body.force-mobile-mode:not(.force-pc-mode) .sort-group-label, body.force-mobile-mode:not(.force-pc-mode) .color-priority-label { display: block !important; height: 16px !important; min-height: 16px !important; max-height: 16px !important; line-height: 16px !important; font-size: 11.5px !important; color: #475569 !important; font-weight: 500 !important; margin: 0 0 2px 0 !important; padding: 0 !important; white-space: nowrap !important; box-sizing: border-box !important; } .action-group .sort-select, body.force-mobile-mode:not(.force-pc-mode) .action-group .sort-select { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 12.5px !important; padding: 0 6px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; width: auto !important; min-width: 175px !important; max-width: 215px !important; margin: 0 !important; } /* 2. 保存グループ・サブ行のラッパーを解除して横並びを平坦化 */ .action-group.save-action-group, body.force-mobile-mode:not(.force-pc-mode) .action-group.save-action-group { display: flex !important; flex-direction: row !important; align-items: flex-end !important; flex: 1 1 auto !important; gap: 14px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .action-bar-sub-row, body.force-mobile-mode:not(.force-pc-mode) .action-bar-sub-row { display: flex !important; flex-direction: row !important; align-items: flex-end !important; flex: 1 1 auto !important; gap: 14px !important; border: none !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; grid-column: auto !important; grid-row: auto !important; } /* 3. 文字色ブロック: 上ラベル + 下ボタン（zaiko追加タブと同様） */ .color-priority-control, body.force-mobile-mode:not(.force-pc-mode) .color-priority-control { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 0 0 auto !important; border: none !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; width: auto !important; } .color-priority-buttons, body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons { display: flex !important; align-items: center !important; gap: 4px !important; height: 30px !important; } .color-priority-buttons button, .color-priority-control button, body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons button, body.force-mobile-mode:not(.force-pc-mode) .color-priority-control button { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; font-size: 12px !important; padding: 0 8px !important; box-sizing: border-box !important; border-radius: 5px !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; color: #334155 !important; cursor: pointer; } .color-priority-buttons button[aria-pressed="true"], .color-priority-control button[aria-pressed="true"], body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons button[aria-pressed="true"], body.force-mobile-mode:not(.force-pc-mode) .color-priority-control button[aria-pressed="true"] { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; } /* 4. メタ情報ブロック: 最新保存時刻 ＋ 更新率を右端に2段配置（全高48px内で上揃え・下揃え一致） */ .meta-info-control, body.force-mobile-mode:not(.force-pc-mode) .meta-info-control { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; flex: 0 0 auto !important; margin-left: 8px !important; gap: 2px !important; height: 48px !important; box-sizing: border-box !important; } #saveTimeDisplay, body.force-mobile-mode:not(.force-pc-mode) #saveTimeDisplay { font-size: 11px !important; color: #64748b !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; } .update-rate-control, body.force-mobile-mode:not(.force-pc-mode) .update-rate-control { font-size: 11px !important; color: #64748b !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; gap: 3px !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; } .update-rate-control input[type="number"], body.force-mobile-mode:not(.force-pc-mode) .update-rate-control input[type="number"] { width: 32px !important; height: 20px !important; text-align: center !important; font-size: 11px !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; padding: 0 !important; } } .global-action-bar::-webkit-scrollbar, .inventory-content > .global-action-bar::-webkit-scrollbar { display: none !important; } /* スマホ横: 保存アクションブロック完全非表示 */ @media screen and (max-width: 900px) and (orientation: landscape), screen and (max-height: 520px) and (orientation: landscape) { body:not(.force-pc-mode) .save-action-group, body:not(.force-pc-mode) .save-action-group * { display: none !important; } } body.force-mobile-mode:not(.force-pc-mode) .save-action-group, body.force-mobile-mode:not(.force-pc-mode) .save-action-group * { display: none !important; } /* ========================================================================== スマホ横画面: テーブルセルの配置（PCモード基準の左寄せ・センタリング統一） ========================================================================== */ @media screen and (orientation: landscape), (max-height: 600px) and (orientation: landscape) { /* 1. テキスト列（保管場所:2, 分類:3, 商品名:4, メモ:10）は左寄せ */ #inventory tbody td:nth-child(2), #inventory tbody td:nth-child(3), #inventory tbody td:nth-child(4), #inventory tbody td:nth-child(10), #inventory tbody td.memo { text-align: left !important; } #inventory tbody td:nth-child(2) select, #inventory tbody td:nth-child(3) select, #inventory tbody td:nth-child(4) input, #inventory tbody td:nth-child(10) input, #inventory tbody td.memo input { text-align: left !important; text-align-last: left !important; width: 100% !important; display: block !important; box-sizing: border-box !important; } /* 2. 数値・日付・記号列は中央揃え */ #inventory tbody td:first-child, #inventory tbody td:nth-child(1), #inventory tbody td:nth-child(5), #inventory tbody td.quantity-unit-cell, #inventory tbody td:nth-child(6), #inventory tbody td.usage-rate, #inventory tbody td:nth-child(7), #inventory tbody td:nth-child(8), #inventory tbody td.update-time-cell, #inventory tbody td:nth-child(9), #inventory tbody td.expiry-date, #inventory tbody td:nth-child(11), #inventory tbody td.purchase, #inventory tbody td:nth-child(12) { text-align: center !important; } #inventory tbody td.quantity-unit-cell .quantity-unit-inner { justify-content: center !important; } #inventory tbody td.expiry-date input[type="date"], #inventory tbody td.purchase input, #inventory tbody td:nth-child(7) input { text-align: center !important; text-align-last: center !important; } } /* 強制スマホモード横画面でも完全保証 */ body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(2), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(3), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(4), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(10), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.memo { text-align: left !important; } body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(2) select, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(3) select, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(4) input, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(10) input, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.memo input { text-align: left !important; text-align-last: left !important; width: 100% !important; display: block !important; box-sizing: border-box !important; } body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:first-child, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(1), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(5), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.quantity-unit-cell, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(6), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.usage-rate, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(7), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(8), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.update-time-cell, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(9), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.expiry-date, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(11), body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.purchase, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(12) { text-align: center !important; } body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.quantity-unit-cell .quantity-unit-inner { justify-content: center !important; } body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.expiry-date input[type="date"], body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td.purchase input, body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td:nth-child(7) input { text-align: center !important; text-align-last: center !important; } /* スマホ横画面: th/td 内側パディング調整（モバイル専用） */ body.force-mobile-mode:not(.force-pc-mode) #inventory th, body:not(.force-pc-mode) .mobile-mode #inventory th { padding: 4px 2px !important; } body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td, body:not(.force-pc-mode) .mobile-mode #inventory tbody td { padding: 4px 2px !important; } /* 分類列（3列目）: 全角4文字分の最小幅（min-width）を確保 */ #inventory th:nth-child(3), #inventory td:nth-child(3), body.force-mobile-mode:not(.force-pc-mode) #inventory th:nth-child(3), body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(3) { min-width: 56px !important; box-sizing: border-box !important; } /* スマホ横: ヘッダー統一 (zaiko基準 height:24px, font-size:10px) */ @media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 900px) and (orientation: landscape) { #inventory thead th, #inventory th { height: 24px !important; max-height: 24px !important; box-sizing: border-box !important; font-size: 10px !important; line-height: normal !important; text-align: center !important; vertical-align: middle !important; padding: 4px 2px !important; white-space: nowrap !important; } } body.force-mobile-mode:not(.force-pc-mode) #inventory thead th, body.force-mobile-mode:not(.force-pc-mode) #inventory th { height: 24px !important; max-height: 24px !important; box-sizing: border-box !important; font-size: 10px !important; line-height: normal !important; text-align: center !important; vertical-align: middle !important; padding: 4px 2px !important; white-space: nowrap !important; } /* ========================================================================== 【スマホモード統一】タブエリア（タブナビゲーション＋タブパネル内）ボタン統一スタイル ※タブの外（アクションバー・ヘッダー・テーブル等）には干渉しないようタブ内に完全限定 ========================================================================== */ /* 1. タブナビゲーションボタン（フォント11px・太さ600・システムフォント統一） */ body.force-mobile-mode:not(.force-pc-mode) .tab-navigation .tab-button, body.force-mobile-mode:not(.force-pc-mode) .tab-navigation .tab-manual-btn, body.force-mobile-mode:not(.force-pc-mode) .tab-button, body.force-mobile-mode:not(.force-pc-mode) .tab-manual-btn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: normal !important; } /* 2. タブパネル内の全ボタン（データ管理・追加・検索パネル内：高さ30px・フォント12px・太さ600統一） */ body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel button, body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel .custom-button, body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel a.custom-button, body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel input[type="button"], body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel input[type="submit"], body.force-mobile-mode:not(.force-pc-mode) .management-tab-content .custom-button, body.force-mobile-mode:not(.force-pc-mode) .management-group .custom-button, body.force-mobile-mode:not(.force-pc-mode) .management-group a, body.force-mobile-mode:not(.force-pc-mode) .management-group button, body.force-mobile-mode:not(.force-pc-mode) .management-group label, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content button, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content .custom-button, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #searchButton, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #outOfStockButton, body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #clearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search button, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #searchButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #outOfStockButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #clearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-add button, body.force-mobile-mode:not(.force-pc-mode) #tab-panel-manage button, body.force-mobile-mode:not(.force-pc-mode) #tab-search button, body.force-mobile-mode:not(.force-pc-mode) #tab-add button, body.force-mobile-mode:not(.force-pc-mode) #tab-manage button, body.force-mobile-mode:not(.force-pc-mode) .form-section button, body.force-mobile-mode:not(.force-pc-mode) .add-form-row .custom-button, body.force-mobile-mode:not(.force-pc-mode) #addButton, body.force-mobile-mode:not(.force-pc-mode) #scanButton, body.force-mobile-mode:not(.force-pc-mode) #addButton2, body.force-mobile-mode:not(.force-pc-mode) #compressButton, body.force-mobile-mode:not(.force-pc-mode) #addPriceSubmitBtn, body.force-mobile-mode:not(.force-pc-mode) #addWalletSubmitBtn, body.force-mobile-mode:not(.force-pc-mode) #submit-record-button, body.force-mobile-mode:not(.force-pc-mode) #searchButton, body.force-mobile-mode:not(.force-pc-mode) #searchButtonNew, body.force-mobile-mode:not(.force-pc-mode) #tabSearchButton, body.force-mobile-mode:not(.force-pc-mode) #search-button, body.force-mobile-mode:not(.force-pc-mode) #clearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #clearFilterButtonNew, body.force-mobile-mode:not(.force-pc-mode) #tabClearFilterButton, body.force-mobile-mode:not(.force-pc-mode) #clear-filters-button, body.force-mobile-mode:not(.force-pc-mode) #outOfStockButton, body.force-mobile-mode:not(.force-pc-mode) #tabExpiringButton { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; height: 30px !important; min-height: 30px !important; line-height: 28px !important; font-size: 12px !important; font-weight: 600 !important; box-sizing: border-box !important; } /* レスポンシブ (max-width: 768px) 用ルール */ @media (max-width: 768px), (max-height: 500px) and (orientation: landscape) { body:not(.force-pc-mode) .tab-navigation .tab-button, body:not(.force-pc-mode) .tab-navigation .tab-manual-btn, body:not(.force-pc-mode) .tab-button, body:not(.force-pc-mode) .tab-manual-btn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: normal !important; } body:not(.force-pc-mode) .tab-content-panel button, body:not(.force-pc-mode) .tab-content-panel .custom-button, body:not(.force-pc-mode) .tab-content-panel a.custom-button, body:not(.force-pc-mode) .tab-content-panel input[type="button"], body:not(.force-pc-mode) .tab-content-panel input[type="submit"], body:not(.force-pc-mode) .management-tab-content .custom-button, body:not(.force-pc-mode) .management-group .custom-button, body:not(.force-pc-mode) .management-group a, body:not(.force-pc-mode) .management-group button, body:not(.force-pc-mode) .management-group label, body:not(.force-pc-mode) .search-tab-content button, body:not(.force-pc-mode) .search-tab-content .custom-button, body:not(.force-pc-mode) .search-tab-content #searchButton, body:not(.force-pc-mode) .search-tab-content #outOfStockButton, body:not(.force-pc-mode) .search-tab-content #clearFilterButton, body:not(.force-pc-mode) #tab-panel-search button, body:not(.force-pc-mode) #tab-panel-search #searchButton, body:not(.force-pc-mode) #tab-panel-search #outOfStockButton, body:not(.force-pc-mode) #tab-panel-search #clearFilterButton, body:not(.force-pc-mode) #tab-panel-add button, body:not(.force-pc-mode) #tab-panel-manage button, body:not(.force-pc-mode) #tab-search button, body:not(.force-pc-mode) #tab-add button, body:not(.force-pc-mode) #tab-manage button, body:not(.force-pc-mode) .form-section button, body:not(.force-pc-mode) .add-form-row .custom-button, body:not(.force-pc-mode) #addButton, body:not(.force-pc-mode) #scanButton, body:not(.force-pc-mode) #addButton2, body:not(.force-pc-mode) #compressButton, body:not(.force-pc-mode) #addPriceSubmitBtn, body:not(.force-pc-mode) #addWalletSubmitBtn, body:not(.force-pc-mode) #submit-record-button, body:not(.force-pc-mode) #searchButton, body:not(.force-pc-mode) #searchButtonNew, body:not(.force-pc-mode) #tabSearchButton, body:not(.force-pc-mode) #search-button, body:not(.force-pc-mode) #clearFilterButton, body:not(.force-pc-mode) #clearFilterButtonNew, body:not(.force-pc-mode) #tabClearFilterButton, body:not(.force-pc-mode) #clear-filters-button, body:not(.force-pc-mode) #outOfStockButton, body:not(.force-pc-mode) #tabExpiringButton { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important; height: 30px !important; min-height: 30px !important; line-height: 28px !important; font-size: 12px !important; font-weight: 600 !important; box-sizing: border-box !important; } } /* スマホモード（縦画面・横画面・強制スマホモード）: ソート実行ボタンを完全非表示 */ @media screen and (max-width: 1024px) { body:not(.force-pc-mode) #sortExecuteButton, body:not(.force-pc-mode) .sort-execute-button, body:not(.force-pc-mode) .action-group .sort-execute-button, body:not(.force-pc-mode) .sort-control-wrap .sort-execute-button { display: none !important; } } @media screen and (orientation: landscape) and (max-height: 600px) { body:not(.force-pc-mode) #sortExecuteButton, body:not(.force-pc-mode) .sort-execute-button, body:not(.force-pc-mode) .action-group .sort-execute-button, body:not(.force-pc-mode) .sort-control-wrap .sort-execute-button { display: none !important; } } body.force-mobile-mode:not(.force-pc-mode) #sortExecuteButton, body.force-mobile-mode:not(.force-pc-mode) .sort-execute-button, body.force-mobile-mode:not(.force-pc-mode) .action-group .sort-execute-button, body.force-mobile-mode:not(.force-pc-mode) .sort-control-wrap .sort-execute-button { display: none !important; }