/* ==========================================================================
   ざいのーと [在庫管理] スマホ縦画面（Portrait）専用スタイル
   ========================================================================== */

/* ==========================================================================
   スマホ用縦レイアウト (レスポンシブ対応: 768px以下)
   HTML変更なし・CSSのみで完全縦レイアウト化
   ========================================================================== */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    /* 1. PC固定幅の完全解除 & 全体の横スクロール防止 */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    body,
    .main-container,
    .app-header,
    .tab-navigation {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
        font-size: 14px !important;
    }

    .main-container {
        padding: 6px 8px 30px;
    }

    /* 2. ヘッダー */
    .app-header {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        gap: 8px;
        white-space: normal !important;
    }

    .app-title-group {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        width: 100% !important;
        row-gap: 2px !important;
        column-gap: 8px !important;
        position: relative !important;
    }

    /* 左列 (Column 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: 2px !important;
        margin: 0 !important;
        line-height: 1.15 !important;
    }

    .app-title a {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        color: inherit !important;
        text-decoration: none !important;
    }

    .app-title-main,
    .app-title-tag {
        font-size: 17px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        color: #ffffff !important;
        display: block !important;
    }

    /* スマホモード（縦・横）: tipは完全非表示 */
    .mobile-title-tip,
    .mobile-title-tip.active {
        display: none !important;
    }
    .tab-button.management-help-anchor.help-visible::after {
        display: none !important;
    }
    [data-tooltip]::before,
    [data-tooltip]::after {
        display: none !important;
    }

    /* 中央列 (Column 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: 2px !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        line-height: 1.25 !important;
    }

    .subtitle-line1,
    .subtitle-line2 {
        font-size: 11px !important;
        opacity: 0.85 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
        display: block !important;
    }

    /* 右列 (Column 3): 1行目: 契約アイコン（プランバッジ） */
    #zainotePlanBadge,
    .zainote-plan-badge {
        grid-column: 3 / 4 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 11.5px !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
    }

    /* 右列 (Column 3): 2行目: 画面モード切替ボタン */
    #zainoteModeToggleBtn,
    .zainote-mode-toggle-btn {
        grid-column: 3 / 4 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 11px !important;
        padding: 3px 6px !important;
        white-space: nowrap !important;
    }

    .header-links {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 5px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .header-links .nav-icon {
        display: none !important;
    }

    .header-links a,
    .header-links .current-app {
        flex: 1 1 auto !important;
        font-size: 12px !important;
        padding: 2px 7px !important;
        height: 26px !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* スマホではタブ3横の ::after 吹き出しを完全非表示（タイトル右に代替表示するため） */
    .tab-button.management-help-anchor.help-visible::after {
        display: none !important;
    }

    /* 3. タブナビゲーション（360px画面幅に全タブが収まるよう余白・間隔を最適化） */
    .tab-navigation {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        overflow-x: visible !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: 2px !important;
        border-bottom: 2px solid #0078d4 !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
        box-sizing: border-box !important;
        align-items: flex-end !important;
    }

    .tab-navigation::-webkit-scrollbar {
        display: none !important;
    }

    .tab-button,
    .tab-manual-btn {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
        font-weight: 600 !important;
        -webkit-appearance: none !important;
    }

    .tab-button {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 5px 3.5px !important;
        font-size: 11px !important;
        text-align: center !important;
        white-space: nowrap !important;
        gap: 2px !important;
        letter-spacing: -0.3px !important;
    }

    .tab-manual-btn {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-left: auto !important;
        margin-top: 0 !important;
        padding: 5px 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        gap: 2px !important;
        letter-spacing: -0.3px !important;
    }

    /* タブパネルはPC用 max-content 幅を解除し、画面幅に収める（はみ出しによる縮小表示の防止） */
    .tab-content-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. タブ1: 検索・絞り込み（スマホ4列×2行・8枠配置） */
    .search-tab-content {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* スキャンモードボタン: 最上部で押しやすく全幅 */
    .search-tab-content button[onclick*="openBarcodeScanner"] {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        background: #f0f7ff !important;
        color: #0369a1 !important;
        border: 1px solid #bae6fd !important;
        cursor: pointer;
        padding: 4px 2px !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 1行目: 保管場所 / 分類 / 品名検索（3列横並び） */
    #locationFilter {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        font-size: 12px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        padding: 2px 4px !important;
    }

    #categoryFilter {
        grid-column: 3 / 4 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        font-size: 12px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        padding: 2px 4px !important;
    }

    #searchInput {
        grid-column: 4 / 5 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        font-size: 12px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 2px 6px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    /* 2行目: 検索 / 在庫切れ抽出 / 絞り込み解除（3ボタン横並び） */
    #searchButton {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: #f1f5f9 !important;
        color: #1e293b !important;
        cursor: pointer;
        box-sizing: border-box !important;
        padding: 2px 4px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #outOfStockButton {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: #f8fafc !important;
        box-sizing: border-box !important;
        cursor: pointer;
        padding: 4px 2px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #clearFilterButton {
        grid-column: 3 / 4 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: #f8fafc !important;
        box-sizing: border-box !important;
        cursor: pointer;
        padding: 4px 2px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* 絞り込み状態表示テキスト */
    #filterStatus {
        grid-column: 4 / 5 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        color: #64748b !important;
        margin: 0 !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        word-break: break-all !important;
        white-space: normal !important;
    }

    .residual-warning-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        margin-top: 4px !important;
    }

    /* 5. タブ2: 新在庫の追加フォーム（スマホ8列グリッド配置・3行に集約） */
    #addForm,
    .add-form-container {
        display: grid !important;
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #addForm .form-row,
    .add-form-container .form-row {
        display: contents !important;
    }

    .form-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .form-item label {
        min-width: auto !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        flex-shrink: 0;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .form-item input,
    .form-item select,
    #addForm input,
    #addForm select,
    #itemLocation,
    #itemCategory,
    #itemName,
    #itemExpiryDate,
    #itemQuantity,
    #itemUnit,
    #itemUsage,
    #itemCapacity,
    #itemMemo,
    #itemPurchase {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        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;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    /* iOS Safariにおける日付入力（type="date"）のネイティブ固有最小幅リセット */
    input[type="date"],
    #itemExpiryDate {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
    }

    input[type="date"]::-webkit-date-and-time-value,
    #itemExpiryDate::-webkit-date-and-time-value {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 1.2em !important;
        line-height: normal !important;
    }

    .form-item select {
        text-overflow: ellipsis !important;
    }

    .form-item .small-input,
    .form-item .small-input0 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* 1行目: 保管場所(2) / 分類(2) / 商品名(4) = 計8マス */
    .form-item.form-item-location,
    .form-item:has(#itemLocation) {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }

    .form-item.form-item-category,
    .form-item:has(#itemCategory) {
        grid-column: 3 / 5 !important;
        grid-row: 1 !important;
    }

    .form-item.form-item-full,
    .form-item.form-item-name,
    .form-item:has(#itemName) {
        grid-column: 5 / 9 !important;
        grid-row: 1 !important;
    }

    /* 2行目: 数量(1) / 単位(1) / 開封残存率(1) / 内容量(1) / 賞味期限(1) / 購入数(1) / メモ(2) = 計8マス */
    .form-item.form-item-quantity,
    .form-item:has(#itemQuantity) {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
    }

    .form-item.form-item-unit,
    .form-item:has(#itemUnit) {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
    }

    .form-item.form-item-usage,
    .form-item:has(#itemUsage) {
        grid-column: 3 / 4 !important;
        grid-row: 2 !important;
    }

    .form-item.form-item-capacity,
    .form-item:has(#itemCapacity) {
        grid-column: 4 / 5 !important;
        grid-row: 2 !important;
    }

    /* 開封残存率のパーセント表示 */
    .usage-input-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: 11.5px !important;
    }

    .usage-input-wrapper select {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 4px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    .form-item.form-item-expiry,
    .form-item:has(#itemExpiryDate) {
        grid-column: 5 / 6 !important;
        grid-row: 2 !important;
    }

    #itemExpiryDate {
        padding: 0 4px !important;
        font-size: 11.5px !important;
        letter-spacing: -0.5px !important;
    }

    .form-item.form-item-purchase,
    .form-item:has(#itemPurchase) {
        grid-column: 6 / 7 !important;
        grid-row: 2 !important;
    }

    .form-item.form-item-memo,
    .form-item:has(#itemMemo) {
        grid-column: 7 / 9 !important;
        grid-row: 2 !important;
    }

    /* 3行目: 追加ボタン(4) / スキャンモードボタン(2) / 出力チェックボックス(2) = 計8マス */
    #addButton {
        grid-column: 1 / 5 !important;
        grid-row: 3 !important;
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        margin-top: 4px !important;
        border-radius: 5px !important;
    }

    #scanButton {
        grid-column: 5 / 7 !important;
        grid-row: 3 !important;
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        padding: 0 2px !important;
        margin-top: 4px !important;
        border-radius: 5px !important;
        white-space: nowrap !important;
    }

    .form-item.form-item-checkbox,
    .form-item:has(#itemOutput) {
        grid-column: 7 / 9 !important;
        grid-row: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin-top: 4px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        cursor: pointer;
    }

    .form-item.form-item-checkbox label,
    .form-item:has(#itemOutput) label,
    .form-item.form-item-checkbox .form-item-checkbox-label,
    .form-item:has(#itemOutput) .form-item-checkbox-label {
        margin: 0 !important;
        cursor: pointer;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .form-item-checkbox-box {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
    }

    .form-item-checkbox-box .checkbox-box-text {
        display: none !important;
    }

    .form-item.form-item-checkbox input[type="checkbox"],
    .form-item:has(#itemOutput) input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        cursor: pointer;
    }

    /* 6. タブ3: ファイル・データ管理（左にタイトル2行幅・右にボタン群2行集約） */
    .management-tab-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .management-group {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: max-content repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .management-group-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 100% !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;
        background: #f8fafc !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        box-sizing: border-box !important;
        border-radius: 4px !important;
        line-height: 1.2 !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 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-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: 2px 4px !important;
        box-sizing: border-box !important;
        border-radius: 5px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    label[for="importInventoryFile"],
    #cleanupSoleButton {
        grid-column: 2 / 3 !important;
    }

    /* 全削除ボタンも他ボタンと同じサイズ（1枠幅） */
    #clearAllLink {
        grid-column: 3 / 4 !important;
    }

    #aiSettingsLink {
        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;
        gap: 3px !important;
    }

    #apiKeyStatusBadge {
        font-size: 9.5px !important;
        padding: 1px 4px !important;
    }

    /* 7. 常時表示アクションバー（スマホ縦モード: ソート・文字色上ラベル、一括保存・ソートボタン排除） */
    .global-action-bar {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: flex-end !important;
        row-gap: 5px !important;
        column-gap: 8px !important;
        padding: 5px 8px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .inventory-content > .global-action-bar {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    /* 一括保存ボタン・ソートボタン・保存ラベルを完全非表示 */
    #saveAllButton,
    #sortExecuteButton,
    .save-group-label {
        display: none !important;
    }

    /* 1行目・左: ソート（上ラベル＋下セレクトボックス: zaiko追加タブ同様） */
    .action-group.sort-action-group {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .action-bar-item-label,
    .sort-group-label,
    .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 {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !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;
    }

    /* 1行目・右: 文字色（上ラベル＋下ボタン: zaiko追加タブ同様） */
    .color-priority-control {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .color-priority-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        height: 30px !important;
    }

    .action-group.save-action-group {
        display: contents !important;
    }

    /* 2行目: 最新保存時刻 ＋ 直近更新率（点線区切りで左右均等配置） */
    .meta-info-control {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 4px 8px !important;
        margin-top: 4px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #cbd5e1 !important;
        box-sizing: border-box !important;
    }

    #saveTimeDisplay {
        font-size: 11px !important;
        color: #64748b !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .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;
        margin: 0 !important;
        padding: 0 !important;
    }

    .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;
    }

    .color-priority-buttons button,
    .color-priority-control button {
        width: auto !important;
        min-width: 76px !important;
        height: 26px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 0 12px !important;
        border-radius: 4px !important;
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        color: #475569 !important;
        box-sizing: border-box !important;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .color-priority-control button.active,
    .color-priority-control button[aria-pressed="true"] {
        background: #285f88 !important;
        background-color: #285f88 !important;
        border-color: #204d6e !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* 8. 在庫テーブル（横スクロールで快適操作） */
    .inventory-content {
        width: 100%;
        overflow-x: visible;
    }

    .inventory-table-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* ヘッダのstickyオフセット(操作バー高さ)は表ラッパー内では不要。ずれ防止で0に固定 */
    .inventory-table-scroll #inventory thead th {
        top: 0 !important;
    }

    /* ==========================================================================
       スマホモード限定: テーブル内コントロールのスリム化＆誤タップ防止（番号タップ編集限定）
       ========================================================================== */
    #inventory {
        min-width: 480px !important;
        font-size: 12.5px;
        width: 100% !important;
    }

    /* ヘッダー側（th）: 見やすさを維持するため4pxパディングを確保 */
    #inventory thead th,
    #inventory th {
        padding: 4px 2px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        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;
    }

    /* データ側（td）: 上下パディングを2px詰めて超コンパクト化 */
    #inventory tbody td {
        padding: 4px 2px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        line-height: 1.25 !important;
    }

    /* 各列の配置: PCモードと同様の左寄せ・センタリング基準に統一 */
    /* 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. 数値・日付・記号列（No:1, 数量:5, 残存率:6, 内容量:7, 更新日時:8, 賞味期限:9, 購入数:11, 出力:12）は中央揃え */
    #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;
    }

    /* 1. ＋ー（ステッパー）ボタンを削る */
    #inventory .quantity-adjuster button,
    #inventory .numeric-adjuster button,
    #inventory .quantity-adjust-button {
        display: none !important;
    }

    /* 2. 枠線・矢印・背景を削ってテキスト化 ＆ 入力禁止（スクロール誤タップ防止） */
    #inventory tbody td input:not(.export-checkbox):not(.history-checkbox),
    #inventory tbody td select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        user-select: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        color: inherit !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 1.25 !important;
    }

    /* 数量セル・単位セルの幅調整 */
    .quantity-unit-cell {
        min-width: 0 !important;
        width: auto !important;
    }
    .quantity-adjuster select.qty-input,
    .quantity-unit-inner select.unit-input {
        width: auto !important;
        min-width: 0 !important;
    }

    /* 日付スピン・カレンダーアイコンを非表示 */
    #inventory tbody td input::-webkit-inner-spin-button,
    #inventory tbody td input::-webkit-outer-spin-button,
    #inventory tbody td input::-webkit-calendar-picker-indicator {
        display: none !important;
        -webkit-appearance: none !important;
    }

    /* 3. スマホモード: 操作列（更新・操作ボタン）は詳細シート側にあるため表内では非表示にして横幅を大幅圧縮 */
    #inventory th:nth-child(13),
    #inventory td:nth-child(13) {
        display: none !important;
    }


    /* 3-1. 分類列（3列目）: 全角4文字分の最小幅（min-width）を確保 */
    #inventory th:nth-child(3),
    #inventory td:nth-child(3) {
        min-width: 56px !important;
        box-sizing: border-box !important;
    }

    /* 3-2. 内容量列（7列目）がだらしなく広がるのを防ぎ、コンパクト（約55px）に固定 */
    #inventory th:nth-child(7),
    #inventory td:nth-child(7) {
        width: 55px !important;
        min-width: 48px !important;
        max-width: 65px !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    #inventory td:nth-child(7) input {
        width: 100% !important;
        max-width: 55px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* 3-3. 未開封数量ヘッダ: スマホでは「+単位」を非表示にして省スペース化 */
    #inventory th .header-unit-suffix {
        display: none !important;
    }

    /* 3-4. 在庫量更新日時と最短賞味期限のフォント・文字サイズ・行送りを完全一致 */
    #inventory td.update-time-cell,
    #inventory td.expiry-date,
    #inventory td.expiry-date input[type="date"],
    #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit,
    #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-text,
    #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-month-field,
    #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-day-field,
    #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-year-field {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
        font-size: 12px !important;
        color: #1e293b !important;
        line-height: 1.35 !important;
        vertical-align: middle !important;
    }

    /* 3-5. 品名列（4列目）: スマホ表示時に現在の約8割幅（最大115px）に抑制 */
    #inventory th:nth-child(4),
    #inventory td:nth-child(4) {
        max-width: 115px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
    #inventory td:nth-child(4) input {
        max-width: 115px !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* 3-6. メモ列（10列目）: スマホ表示時に現在の約8割幅（最大120px）に抑制 */
    #inventory th.memo,
    #inventory td.memo,
    #inventory th:nth-child(10),
    #inventory td:nth-child(10) {
        max-width: 120px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
    #inventory td.memo input,
    #inventory td:nth-child(10) input {
        max-width: 120px !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* 3-7. 区切り線（.separator-row）: スマホ表示時に太すぎる黒帯を解消し2px細線に調整＆パディング排除 */
    #inventory tr.separator-row,
    #inventory tbody tr.separator-row {
        height: 2px !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }
    #inventory tr.separator-row td,
    #inventory tbody tr.separator-row td {
        padding: 0 !important;
        height: 2px !important;
        line-height: 0 !important;
        font-size: 0 !important;
        background-color: #333 !important;
        border: none !important;
    }

    /* 4. スマホモード限定: Noセルタップで詳細シート起動の案内スタイル */
    #inventory tbody tr:not(.separator-row) td:first-child,
    body.force-mobile-mode:not(.force-pc-mode) #inventory tbody tr:not(.separator-row) td:first-child,
    body:not(.force-pc-mode) #inventory tbody tr:not(.separator-row) td:first-child {
        cursor: pointer !important;
        font-weight: 700 !important;
        color: #0284c7 !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
        border-bottom: 1px solid #ccc !important;
        transition: background-color 0.15s, color 0.15s;
        user-select: none;
        position: relative;
        text-align: center !important;
        padding: 0 6px !important;
        background: rgba(2, 132, 199, 0.05);
    }

    /* 9. バーコードスキャンモーダル（スマホ対応） */
    #barcodeOverlay > div {
        width: 92% !important;
        max-width: 400px !important;
        padding: 20px 16px !important;
        box-sizing: border-box;
    }

    /* 10. スマホモード限定: Noセルタップで詳細シート起動の案内スタイル */
    #inventory tbody tr:not(.separator-row) td:first-child,
    body.force-mobile-mode:not(.force-pc-mode) #inventory tbody tr:not(.separator-row) td:first-child,
    body:not(.force-pc-mode) #inventory tbody tr:not(.separator-row) 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;
        transition: background-color 0.15s, color 0.15s;
        user-select: none;
        position: relative;
    }

    #inventory tbody tr:not(.separator-row) td:first-child:hover {
        background-color: #e0f2fe !important;
        color: #0284c7 !important;
        text-decoration: underline !important;
    }

    #inventory tbody tr:not(.separator-row) td:first-child:active {
        background-color: #bae6fd !important;
    }
}

/* ==========================================================================
   10. レコード詳細・直接編集ボトムシート (スマホ専用)
   ========================================================================== */

/* PCモード（769px以上 かつ 横持ちスマホ以外）ではボトムシートを完全非表示 */
@media (min-width: 769px) and (min-height: 501px) {
    body:not(.force-mobile-mode) .mobile-detail-overlay {
        display: none !important;
    }
}
body.force-pc-mode .mobile-detail-overlay {
    display: none !important;
}

/* スマホモード時：No列の数字をクリッカブルとしてアンダーライン表示 */
body.force-mobile-mode #inventory tbody td:first-child {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    cursor: pointer !important;
}

@media screen and (max-width: 768px),
       screen and (max-height: 500px) and (orientation: landscape) {
    body:not(.force-pc-mode) #inventory tbody td:first-child {
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
        cursor: pointer !important;
    }
}

/* ボトムシート オーバーレイ背景 */
.mobile-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.mobile-detail-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ボトムシート本体 */
.mobile-detail-sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10001;
    box-sizing: border-box;
    overflow: hidden;
}

.mobile-detail-sheet.open {
    transform: translateX(-50%) translateY(0);
}

/* 上部ドラッグバー風ハンドル */
.sheet-drag-handle {
    width: 44px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 3px;
    margin: 8px auto 4px;
    flex-shrink: 0;
}

/* シートヘッダー */
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px 10px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.sheet-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sheet-no-badge {
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.sheet-header-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s;
}

.sheet-header-checkbox:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.sheet-header-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

.sheet-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.sheet-title-short {
    display: none;
}

.sheet-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sheet-header .sheet-update-time {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
}

@media screen and (max-width: 480px) {
    .sheet-title-full {
        display: none;
    }
    .sheet-title-short {
        display: inline;
    }
}

.sheet-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background-color 0.15s, color 0.15s;
}

.sheet-close-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* シートボディ（スクロール領域） */
.sheet-body {
    padding: 14px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.sheet-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sheet-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.sheet-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sheet-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sheet-field-name {
    grid-column: span 2;
    order: 1;
}
.sheet-field-location {
    order: 2;
}
.sheet-field-category {
    order: 3;
}
.sheet-field-quantity {
    order: 4;
}
.sheet-field-unit {
    order: 5;
}
.sheet-field-usage {
    order: 6;
}
.sheet-field-purchase {
    order: 7;
}
.sheet-field-expiry {
    order: 8;
}
.sheet-field-capacity {
    order: 9;
}
.sheet-field-memo {
    grid-column: span 2;
    order: 10;
}

.sheet-input,
.sheet-select {
    width: 100%;
    height: 40px;
    padding: 6px 10px;
    font-size: 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    background: #ffffff;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sheet-input:focus,
.sheet-select:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.sheet-name-input {
    font-size: 16px;
    font-weight: 700;
}

/* ステッパーコントロール */
.sheet-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sheet-step-btn {
    width: 38px;
    height: 40px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background-color 0.15s, transform 0.05s;
}

.sheet-step-btn:hover {
    background: #e2e8f0;
}

.sheet-step-btn:active {
    background: #cbd5e1;
    transform: scale(0.95);
}

.sheet-qty-select {
    flex: 1;
    text-align: center;
    font-weight: 700;
}

.sheet-num-input {
    flex: 1;
    text-align: center;
    font-weight: 700;
}

.sheet-unit-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    padding: 0 2px;
}

/* メタ情報行 */
.sheet-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 6px;
}

.sheet-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    user-select: none;
}

.sheet-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.sheet-update-time {
    font-size: 12px;
    color: #64748b;
}

/* フッターアクションバー */
.sheet-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}

.sheet-btn {
    flex: 1 1 auto;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.15s, opacity 0.15s, transform 0.05s;
    white-space: nowrap;
}

.sheet-btn:active {
    transform: scale(0.97);
}

.sheet-btn-update {
    background: #16a34a;
    color: #ffffff;
    flex: 2 1 140px;
    font-size: 15px;
}

.sheet-btn-update:hover {
    background: #15803d;
}

.sheet-btn-history {
    background: #0284c7;
    color: #ffffff;
}

.sheet-btn-history:hover {
    background: #0369a1;
}

.sheet-btn-undo {
    background: #64748b;
    color: #ffffff;
}

.sheet-btn-undo:hover {
    background: #475569;
}

.sheet-btn-delete {
    background: #dc2626;
    color: #ffffff;
}

.sheet-btn-delete:hover {
    background: #b91c1c;
}

.sheet-btn-close {
    background: #e2e8f0;
    color: #334155;
}

.sheet-btn-close:hover {
    background: #cbd5e1;
}


/* 強制スマホモード時のツールチップオーバーレイ */
body.force-mobile-mode .app-title-group {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;
    row-gap: 2px !important;
    column-gap: 8px !important;
    position: relative !important;
}

/* 左列 (Column 1): ざいのーと アイコン (上) ＆ [アプリ名] (下) */
body.force-mobile-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: 2px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

body.force-mobile-mode .app-title a {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    color: inherit !important;
    text-decoration: none !important;
}

body.force-mobile-mode .app-title-main,
body.force-mobile-mode .app-title-tag {
    font-size: 17px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    display: block !important;
}

/* スマホモード（縦・横）: tipは完全非表示 */
body.force-mobile-mode .mobile-title-tip,
body.force-mobile-mode .mobile-title-tip.active {
    display: none !important;
}
body.force-mobile-mode .tab-button.management-help-anchor.help-visible::after {
    display: none !important;
}
[data-tooltip]::before,
[data-tooltip]::after {
    display: none !important;
}

/* 中央列 (Column 2): 補足文 (上下2行エリア) */
body.force-mobile-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: 2px !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
}

body.force-mobile-mode .subtitle-line1,
body.force-mobile-mode .subtitle-line2 {
    font-size: 11px !important;
    opacity: 0.85 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    display: block !important;
}

/* 右列 (Column 3): 1行目: 契約アイコン（プランバッジ） */
body.force-mobile-mode #zainotePlanBadge,
body.force-mobile-mode .zainote-plan-badge {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
}

/* 右列 (Column 3): 2行目: 画面モード切替ボタン */
body.force-mobile-mode #zainoteModeToggleBtn,
body.force-mobile-mode .zainote-mode-toggle-btn {
    grid-column: 3 / 4 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
}

/* --- customizeLists.html スマホ縦モード（削除で改行・2段カード型レイアウト） --- */
@media (max-width: 600px) {
    .list-page-container {
        padding: 10px 8px 30px !important;
        overflow-x: hidden !important;
    }

    /* 新しい項目の追加フォーム */
    .form-section {
        padding: 10px 10px 12px !important;
        margin-bottom: 14px !important;
    }

    .form-section h2, .list-section h2 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .form-section .add-form-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    .form-section .add-form-row label {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding-right: 0 !important;
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .form-section .add-form-row input[type="text"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .form-section .add-form-row .custom-button {
        flex: 0 0 auto !important;
        height: 32px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    /* ソートセクション */
    .sort-section {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 14px !important;
        border-radius: 6px 6px 0 0 !important;
    }

    .sort-section div:first-child {
        width: 100% !important;
        height: auto !important;
        padding: 5px 8px !important;
        border-right: none !important;
        border-bottom: 1px solid #b8d0e8 !important;
        font-size: 12px !important;
        justify-content: flex-start !important;
    }

    .sort-buttons {
        padding: 4px 6px !important;
        gap: 4px !important;
    }

    .sort-buttons button {
        padding: 3px 6px !important;
        font-size: 10.5px !important;
    }

    /* リスト一覧テーブル */
    .list-table-wrapper {
        overflow: visible !important;
        border-radius: 0 0 6px 6px !important;
        margin-bottom: 18px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .list-table {
        display: block !important;
        width: 100% !important;
    }

    .list-table thead {
        display: none !important;
    }

    .list-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .list-table tr {
        display: grid !important;
        grid-template-columns: 24px 1fr auto auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 7px 6px !important;
        border-bottom: 1px solid #e3edf7 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        row-gap: 5px !important;
        column-gap: 4px !important;
    }

    /* 1段目: No, 項目名, 件数, 削除 */
    .list-table th:nth-child(1),
    .list-table td:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        text-align: center !important;
        font-size: 11px !important;
        color: #718096 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .list-table th:nth-child(2),
    .list-table td:nth-child(2) {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        text-align: left !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        padding: 0 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .list-table th:nth-child(3),
    .list-table td:nth-child(3) {
        grid-column: 3 / 4 !important;
        grid-row: 1 !important;
        width: auto !important;
        text-align: right !important;
        font-size: 11px !important;
        color: #4a5568 !important;
        padding: 0 4px !important;
        white-space: nowrap !important;
    }

    .list-table td:nth-child(3)::after {
        content: "件";
        font-size: 10px;
        margin-left: 1px;
        color: #718096;
    }

    .list-table th:nth-child(4),
    .list-table td:nth-child(4) {
        grid-column: 4 / 5 !important;
        grid-row: 1 !important;
        width: auto !important;
        text-align: right !important;
        padding: 0 !important;
        justify-self: end !important;
    }

    .del-btn, .transfer-btn {
        height: 24px !important;
        padding: 2px 8px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }

    /* 2段目: 文字色(左) ＋ 順序ボタン(常に右寄せ) */
    .list-table th:nth-child(5),
    .list-table td:nth-child(5) {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        width: auto !important;
        text-align: left !important;
        padding: 0 0 0 24px !important;
        display: flex !important;
        align-items: center !important;
    }

    .list-table th:nth-child(6),
    .list-table td:nth-child(6) {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
        width: auto !important;
        text-align: right !important;
        padding: 0 !important;
        justify-self: end !important; /* カラー有無に関わらず常に右寄せ！ */
    }

    .list-color-settings {
        gap: 3px !important;
    }

    .classic-color-swatch {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
    }

    .list-color-enable {
        font-size: 10.5px !important;
        margin-left: 2px !important;
    }

    .order-btn-group {
        display: inline-flex !important;
        gap: 2px !important;
    }

    .order-btn {
        width: 29px !important;
        height: 23px !important;
        font-size: 9.5px !important;
        padding: 0 !important;
    }
}

/* --- ファイル・データ管理タブ: スマホ縦のみ「タイトル1行目＋ボタン2〜3行目(横幅いっぱい)」 --- */
@media (max-width: 768px) and (orientation: portrait), (max-width: 500px) {
    .management-group {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .management-group-title {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 24px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 2px 6px !important;
        border-right: none !important;
        border-bottom: 2px solid #cbd5e1 !important;
        border-radius: 4px 4px 0 0 !important;
        white-space: nowrap !important;
    }

    label[for="importInventoryFile"],
    #cleanupSoleButton,
    #clearAllLink {
        grid-column: auto !important;
    }
}

/* スマホ縦: タイトル中の <br> による改行を無効化して1行表示 */
@media (max-width: 768px) and (orientation: portrait), (max-width: 500px) {
    .management-group-title br {
        display: none !important;
    }
}

/* --- スマホ縦: タブ1（検索・絞り込み）＆タブ2（新在庫追加）を4列から3列構成へ最適化 --- */
@media (max-width: 768px) and (orientation: portrait), (max-width: 500px) {
    /* 1. タブ1: 検索・絞り込み（3列構成） */
    .search-tab-content {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    /* 1行目: スキャン(1) / 保管場所(1) / 分類(1) */
    .search-tab-content button[onclick*="openBarcodeScanner"] {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }

    #locationFilter {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
    }

    #categoryFilter {
        grid-column: 3 / 4 !important;
        grid-row: 1 !important;
    }

    /* 2行目: 品名検索(2列幅) / 検索ボタン(1) */
    #searchInput {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
    }

    #searchButton {
        grid-column: 3 / 4 !important;
        grid-row: 2 !important;
    }

    /* 3行目: 在庫切れ抽出(2列幅) / 絞り込み解除(1) */
    #outOfStockButton {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
    }

    #clearFilterButton {
        grid-column: 3 / 4 !important;
        grid-row: 3 !important;
    }

    /* 2. タブ2: 新在庫の追加フォーム（12列グリッド・4行構成に集約） */
    #addForm,
    .add-form-container {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    /* 1行目: 保管場所(4) / 分類(4) / 商品名(4) */
    .form-item.form-item-location,
    .form-item:has(#itemLocation) {
        grid-column: 1 / 5 !important;
        grid-row: 1 !important;
    }

    .form-item.form-item-category,
    .form-item:has(#itemCategory) {
        grid-column: 5 / 9 !important;
        grid-row: 1 !important;
    }

    .form-item.form-item-full,
    .form-item.form-item-name,
    .form-item:has(#itemName) {
        grid-column: 9 / 13 !important;
        grid-row: 1 !important;
    }

    /* 2行目: 数量(3) / 単位(3) / 開封残存率(3) / 内容量(3) */
    .form-item.form-item-quantity,
    .form-item:has(#itemQuantity) {
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
    }

    .form-item.form-item-unit,
    .form-item:has(#itemUnit) {
        grid-column: 4 / 7 !important;
        grid-row: 2 !important;
    }

    .form-item.form-item-usage,
    .form-item:has(#itemUsage) {
        grid-column: 7 / 10 !important;
        grid-row: 2 !important;
    }

    .form-item.form-item-capacity,
    .form-item:has(#itemCapacity) {
        grid-column: 10 / 13 !important;
        grid-row: 2 !important;
    }

    /* 3行目: 賞味期限(4) / 購入数(4) / 出力(4) */
    .form-item.form-item-expiry,
    .form-item:has(#itemExpiryDate) {
        grid-column: 1 / 5 !important;
        grid-row: 3 !important;
    }

    .form-item.form-item-purchase,
    .form-item:has(#itemPurchase) {
        grid-column: 5 / 9 !important;
        grid-row: 3 !important;
    }

    .form-item.form-item-checkbox,
    .form-item:has(#itemOutput) {
        grid-column: 9 / 13 !important;
        grid-row: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        height: auto !important;
        margin-top: 0 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .form-item.form-item-checkbox .form-item-checkbox-label,
    .form-item:has(#itemOutput) .form-item-checkbox-label {
        display: block !important;
        min-width: auto !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .form-item.form-item-checkbox .form-item-checkbox-box,
    .form-item:has(#itemOutput) .form-item-checkbox-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        cursor: pointer;
        padding: 0 4px !important;
        transition: background-color 0.15s ease;
    }

    .form-item.form-item-checkbox .form-item-checkbox-box:active,
    .form-item:has(#itemOutput) .form-item-checkbox-box:active {
        background: #e2e8f0 !important;
    }

    .form-item.form-item-checkbox .form-item-checkbox-box .checkbox-box-text,
    .form-item:has(#itemOutput) .form-item-checkbox-box .checkbox-box-text {
        display: inline !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        margin: 0 !important;
        line-height: 1 !important;
        cursor: pointer;
    }

    .form-item.form-item-checkbox .form-item-checkbox-box input[type="checkbox"],
    .form-item:has(#itemOutput) .form-item-checkbox-box input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        cursor: pointer;
    }

    /* 4行目: メモ(2: 6カラム) / 追加ボタン(1: 3カラム) / スキャンモードボタン(1: 3カラム) */
    .form-item.form-item-memo,
    .form-item:has(#itemMemo) {
        grid-column: 1 / 7 !important;
        grid-row: 4 !important;
    }

    #addButton {
        grid-column: 7 / 10 !important;
        grid-row: 4 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        margin: 0 !important;
        align-self: end !important;
        width: 100% !important;
        font-size: 12px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    #scanButton {
        grid-column: 10 / 13 !important;
        grid-row: 4 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        margin: 0 !important;
        align-self: end !important;
        width: 100% !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        padding: 0 2px !important;
        box-sizing: border-box !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;
    }

    /* iOS Safariにおける日付入力のネイティブ固有最小幅リセット */
    input[type="date"],
    #itemExpiryDate {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        line-height: normal !important;
    }

    input[type="date"]::-webkit-date-and-time-value,
    #itemExpiryDate::-webkit-date-and-time-value {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 1.2em !important;
        line-height: normal !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:not(.form-item-checkbox-box),
    #addForm label:not(.form-item-checkbox-box),
    .form-item label:not(.form-item-checkbox-box) {
        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;
}

/* ==========================================================================
   スマホ縦モード（Portrait）＆ 画面:スマホ時:
   検索タブ「3行集約構成（トータル1行削減）」
   - 1行目: スキャン(1/3) / 保管場所(1/3) / 分類(1/3)
   - 2行目: 品名検索(41%) / 検索ボタン(25%) / 全データが表示されています(34%)
   - 3行目: 在庫切れ抽出(25%) / 絞り込み解除(25%) / 残存警告(50%)
   ※横モード（Landscape）を破壊しないよう、必ず portrait メディアクエリ内に完結！
   ========================================================================== */
@media screen and (orientation: portrait), (max-width: 768px) and (orientation: portrait) {
    #tab-panel-search.active,
    body.force-mobile-mode #tab-panel-search.active {
        display: grid !important;
        grid-template-columns: repeat(100, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
        gap: 3px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 6px 4px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #tab-panel-search .search-tab-content,
    .search-tab-content,
    body.force-mobile-mode #tab-panel-search .search-tab-content,
    body.force-mobile-mode .search-tab-content {
        display: contents !important;
    }

    /* 1行目: スキャン(33) / 保管場所(34) / 分類(33) [1:1:1] */
    .search-tab-content button[onclick*="openBarcodeScanner"],
    #tab-panel-search button[onclick*="openBarcodeScanner"],
    body.force-mobile-mode .search-tab-content button[onclick*="openBarcodeScanner"],
    body.force-mobile-mode #tab-panel-search button[onclick*="openBarcodeScanner"] {
        grid-column: 1 / 34 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: clamp(10px, 2.8vw, 11.5px) !important;
        font-weight: 700 !important;
        border-radius: 5px !important;
        margin: 0 !important;
        padding: 0 1px !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .search-tab-content #locationFilter,
    #tab-panel-search #locationFilter,
    body.force-mobile-mode #locationFilter {
        grid-column: 34 / 68 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        padding: 0 2px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .search-tab-content #categoryFilter,
    #tab-panel-search #categoryFilter,
    body.force-mobile-mode #categoryFilter {
        grid-column: 68 / 101 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        padding: 0 2px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2行目: 品名検索(41%) / 検索ボタン(25%) / 全データが表示されています(34%) */
    .search-tab-content #searchInput,
    #tab-panel-search #searchInput,
    body.force-mobile-mode #searchInput {
        grid-column: 1 / 42 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: clamp(10.5px, 2.9vw, 12px) !important;
        padding: 0 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .search-tab-content #searchButton,
    #tab-panel-search #searchButton,
    body.force-mobile-mode #searchButton {
        grid-column: 42 / 67 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: clamp(10.5px, 2.9vw, 12px) !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 2px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .search-tab-content #filterStatus,
    #tab-panel-search #filterStatus,
    body.force-mobile-mode #filterStatus {
        grid-column: 67 / 101 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: clamp(8.5px, 2.4vw, 10px) !important;
        line-height: 1.1 !important;
        color: #64748b !important;
        margin: 0 !important;
        padding: 0 1px !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;
    }

    /* 3行目: 在庫切れ抽出(25%) / 絞り込み解除(25%) / 残存警告(50%) */
    .search-tab-content #outOfStockButton,
    #tab-panel-search #outOfStockButton,
    body.force-mobile-mode #outOfStockButton {
        grid-column: 1 / 26 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: clamp(9px, 2.5vw, 10.5px) !important;
        font-weight: 600 !important;
        letter-spacing: -0.4px !important;
        margin: 0 !important;
        padding: 0 1px !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .search-tab-content #clearFilterButton,
    #tab-panel-search #clearFilterButton,
    body.force-mobile-mode #clearFilterButton {
        grid-column: 26 / 51 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: clamp(9px, 2.5vw, 10.5px) !important;
        font-weight: 600 !important;
        letter-spacing: -0.4px !important;
        margin: 0 !important;
        padding: 0 1px !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 残存警告（3行目右端 50% 幅へ集約・均等縮小・スクロール防止） */
    #tab-panel-search .residual-warning-row,
    .residual-warning-row,
    body.force-mobile-mode #tab-panel-search .residual-warning-row,
    body.force-mobile-mode .residual-warning-row {
        grid-column: 51 / 101 !important;
        grid-row: 3 !important;
        position: static !important;
        top: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 2px !important;
        font-size: clamp(8.5px, 2.4vw, 9.8px) !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 4px !important;
        background: #f8fafc !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    #tab-panel-search .residual-warning-row label,
    #tab-panel-search .residual-warning-row span,
    .residual-warning-row label,
    .residual-warning-row span,
    body.force-mobile-mode .residual-warning-row label,
    body.force-mobile-mode .residual-warning-row span {
        font-size: clamp(8.5px, 2.4vw, 9.8px) !important;
        letter-spacing: -0.4px !important;
        margin: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    #tab-panel-search .residual-warning-row input[type="number"],
    .residual-warning-row input[type="number"],
    body.force-mobile-mode .residual-warning-row input[type="number"] {
        height: 20px !important;
        font-size: 10px !important;
        width: 20px !important;
        min-width: 16px !important;
        max-width: 22px !important;
        padding: 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    #tab-panel-search .residual-warning-row input[type="checkbox"],
    .residual-warning-row input[type="checkbox"],
    body.force-mobile-mode .residual-warning-row input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
        margin: 0 1px 0 0 !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
    }

    /* スマホモードでは「かつ」「残存率」「%以下で表示」を非表示（未開封数量のみでフィルター） */
    #tab-panel-search #residualWarningAnd,
    #tab-panel-search #residualRateWarningLabel,
    #tab-panel-search #residualRateWarningThreshold,
    #tab-panel-search #residualRateWarningSuffix,
    .residual-warning-row #residualWarningAnd,
    .residual-warning-row #residualRateWarningLabel,
    .residual-warning-row #residualRateWarningThreshold,
    .residual-warning-row #residualRateWarningSuffix,
    body.force-mobile-mode #residualWarningAnd,
    body.force-mobile-mode #residualRateWarningLabel,
    body.force-mobile-mode #residualRateWarningThreshold,
    body.force-mobile-mode #residualRateWarningSuffix {
        display: none !important;
    }

    /* --------------------------------------------------------------------------
       アクションバー（強制スマホモード縦: 2段レイアウト）:
       1段目: ソート（左）＋ 文字色（右）
       2段目: 最新保存時刻 ＋ 直近更新率（全幅）
       -------------------------------------------------------------------------- */
    body.force-mobile-mode .action-group.sort-action-group {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .color-priority-control,
    body.force-mobile-mode .color-priority-control {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }

    body.force-mobile-mode .meta-info-control {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 4px 8px !important;
        margin-top: 4px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #cbd5e1 !important;
        box-sizing: border-box !important;
    }

    .color-priority-control span,
    body.force-mobile-mode .color-priority-control span {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        white-space: nowrap !important;
        margin-right: 1px !important;
    }

    .color-priority-control button,
    body.force-mobile-mode .color-priority-control button {
        width: auto !important;
        min-width: 0 !important;
        height: 22px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 0 6px !important;
        border-radius: 3px !important;
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        color: #475569 !important;
        box-sizing: border-box !important;
        cursor: pointer;
        line-height: 20px !important;
    }

    .color-priority-control button.active,
    .color-priority-control button[aria-pressed="true"],
    body.force-mobile-mode .color-priority-control button.active,
    body.force-mobile-mode .color-priority-control button[aria-pressed="true"] {
        background: #0284c7 !important;
        color: #ffffff !important;
        border-color: #0284c7 !important;
    }

    .update-rate-control,
    body.force-mobile-mode .update-rate-control {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        font-size: 11px !important;
        color: #64748b !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .update-rate-control input[type="number"],
    body.force-mobile-mode .update-rate-control input[type="number"] {
        width: 30px !important;
        height: 20px !important;
        text-align: center !important;
        font-size: 11px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 3px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin: 0 1px !important;
    }
}

/* ==========================================================================
   強制スマホモード時（PCデスクトップでのスマホプレビュー等）のテーブルスリム化
   ========================================================================== */
body.force-mobile-mode:not(.force-pc-mode) #inventory {
    min-width: 480px !important;
    font-size: 12.5px !important;
    width: 100% !important;
}

/* ヘッダー側（th）: 見やすさを維持するため4pxパディングを確保 */
body.force-mobile-mode:not(.force-pc-mode) #inventory thead th,
body.force-mobile-mode:not(.force-pc-mode) #inventory th {
    padding: 4px 2px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    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;
}

/* データ側（td）: 上下パディングを2px詰めて超コンパクト化 */
body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td {
    padding: 4px 2px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
}

/* 各列の配置: PCモードと同様の左寄せ・センタリング基準に統一 */
/* 1. テキスト列（保管場所:2, 分類:3, 商品名:4, メモ:10）は左寄せ */
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;
}

/* 2. 数値・日付・記号列（No:1, 数量:5, 残存率:6, 内容量:7, 更新日時:8, 賞味期限:9, 購入数:11, 出力:12）は中央揃え */
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;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory .quantity-adjuster button,
body.force-mobile-mode:not(.force-pc-mode) #inventory .numeric-adjuster button,
body.force-mobile-mode:not(.force-pc-mode) #inventory .quantity-adjust-button {
    display: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td input:not(.export-checkbox):not(.history-checkbox),
body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
}

body.force-mobile-mode:not(.force-pc-mode) .quantity-unit-cell {
    min-width: 0 !important;
    width: auto !important;
}

body.force-mobile-mode:not(.force-pc-mode) .quantity-adjuster select.qty-input,
body.force-mobile-mode:not(.force-pc-mode) .quantity-unit-inner select.unit-input {
    width: auto !important;
    min-width: 0 !important;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td input::-webkit-inner-spin-button,
body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td input::-webkit-outer-spin-button,
body.force-mobile-mode:not(.force-pc-mode) #inventory tbody td input::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory th:nth-child(13),
body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(13) {
    display: none !important;
}


/* 3-1. 分類列（3列目）: 全角4文字分の最小幅（min-width）を確保 */
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;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory th:nth-child(7),
body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(7) {
    width: 55px !important;
    min-width: 48px !important;
    max-width: 65px !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(7) input {
    width: 100% !important;
    max-width: 55px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory th .header-unit-suffix {
    display: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory td.update-time-cell,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date input[type="date"],
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-text,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-month-field,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-day-field,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.expiry-date input[type="date"]::-webkit-datetime-edit-year-field {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
    font-size: 12px !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

body.force-mobile-mode:not(.force-pc-mode) #inventory th:nth-child(4),
body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(4) {
    max-width: 115px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}
body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(4) input {
    max-width: 115px !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* 3-6. メモ列（10列目）: スマホ表示時に現在の約8割幅（最大120px）に抑制 */
body.force-mobile-mode:not(.force-pc-mode) #inventory th.memo,
body.force-mobile-mode:not(.force-pc-mode) #inventory td.memo,
body.force-mobile-mode:not(.force-pc-mode) #inventory th:nth-child(10),
body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(10) {
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}
body.force-mobile-mode:not(.force-pc-mode) #inventory td.memo input,
body.force-mobile-mode:not(.force-pc-mode) #inventory td:nth-child(10) input {
    max-width: 120px !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* 3-7. 区切り線（.separator-row）: スマホ表示時に太すぎる黒帯を解消し2px細線に調整＆パディング排除 */
body.force-mobile-mode:not(.force-pc-mode) #inventory tr.separator-row,
body.force-mobile-mode:not(.force-pc-mode) #inventory tbody tr.separator-row {
    height: 2px !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
body.force-mobile-mode:not(.force-pc-mode) #inventory tr.separator-row td,
body.force-mobile-mode:not(.force-pc-mode) #inventory tbody tr.separator-row td {
    padding: 0 !important;
    height: 2px !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background-color: #333 !important;
    border: none !important;
}


/* スマホ縦: 保存アクションブロック完全非表示 */
@media (max-width: 768px) {
    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;
}

/* ==========================================================================
   【スマホモード統一】タブエリア（タブナビゲーション＋タブパネル内）ボタン統一スタイル
   ※タブの外（アクションバー・ヘッダー・テーブル等）には干渉しないようタブ内に完全限定
   ========================================================================== */

/* 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;
}