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

/* ==========================================================================
   スマホ表示最適化 (@media (max-width: 768px))
   ========================================================================== */
@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;
    }

    .tab-content-panel {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 5px 8px 4px !important;
        margin-bottom: 6px !important;
        min-height: 0 !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 !important;
        overflow-x: hidden !important;
    }

    /* 2. ヘッダー */
    .app-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        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;
    }

    /* スマホモード（縦・横）: 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;
    }

    .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. タブナビゲーション（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 var(--tab-border) !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 0 auto !important;
        min-width: 0 !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 0 auto !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;
    }

    /* 4. タブ1: 検索・絞り込み（3列グリッド・コンパクト集約） */
    .search-tab-content {
        width: 100% !important;
        top: 0 !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .search-tab-content .form-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .search-tab-spacer-row,
    .search-tab-content .search-tab-spacer-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .search-tab-content .form-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .search-tab-content .form-item label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #634b22 !important;
        margin-bottom: 1px !important;
    }

    #tabGenreFilter,
    #tabShopFilter,
    #tabSearchInput {
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        font-size: 12.5px !important;
        padding: 2px 4px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    #tabSearchButton {
        grid-column: 1 / 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 5px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        box-sizing: border-box !important;
    }

    #tabClearFilterButton {
        grid-column: 2 / 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 5px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        padding: 4px 2px !important;
        box-sizing: border-box !important;
    }

    #tabFilterStatus {
        grid-column: 3 / 4 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        color: #475569 !important;
        font-weight: 600 !important;
        word-break: break-all !important;
        padding: 0 2px !important;
    }

    /* 5. タブ2: 新規登録フォーム（全3行集約グリッド・追加ボタンも同一行に配置） */
    #addPriceForm,
    .add-form-container {
        display: grid !important;
        grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: end !important;
    }

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

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

    .form-item label {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #634b22 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .form-item input,
    .form-item select,
    #addPriceForm input,
    #addPriceForm select {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: 12px !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"],
    #itemDate {
        -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,
    #itemDate::-webkit-date-and-time-value {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 1.2em !important;
        line-height: normal !important;
    }

    /* 1行目: 記録日(5) / 店舗名(5) / ジャンル(5) / 分類品名(5) = 計20マス */
    .form-item:has(#itemDate) {
        grid-column: span 5 !important;
        grid-row: 1 !important;
    }

    .form-item:has(#itemShop) {
        grid-column: span 5 !important;
        grid-row: 1 !important;
    }

    .form-item:has(#itemGenre) {
        grid-column: span 5 !important;
        grid-row: 1 !important;
    }

    .form-item:has(#itemGenericName) {
        grid-column: span 5 !important;
        grid-row: 1 !important;
    }

    /* 2行目: メーカー(5) / 商品名(5) / 内容量(5) / 税率(5) = 計20マス */
    .form-item:has(#itemMaker) {
        grid-column: span 5 !important;
        grid-row: 2 !important;
    }

    .form-item:has(#itemProductName) {
        grid-column: span 5 !important;
        grid-row: 2 !important;
    }

    /* 内容量 ＆ 単位を横並びにして1マスに収める */
    .form-item:has(#itemQuantity) {
        grid-column: span 5 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 2px 4px !important;
    }

    .form-item:has(#itemQuantity) label {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .form-item:has(#itemQuantity) #itemQuantity {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    .form-item:has(#itemQuantity) #itemUnit {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    /* 税率 ＆ プリセットボタンを横並びにして1マスに収める（ボタンは2×2配置） */
    .form-item:has(#itemTaxRate) {
        grid-column: span 5 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 2px 4px !important;
    }

    .form-item:has(#itemTaxRate) label {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .form-item:has(#itemTaxRate) #itemTaxRate {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .form-item:has(#itemTaxRate) > div {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        gap: 2px !important;
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .tax-preset-btn {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 3px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* 3行目（追加ボタンも同一行）: 税抜(4) / 税込(4) / 換算単価(3) / メモ(6) / 追加(3) = 計20マス */
    .form-item:has(#itemPriceEx) {
        grid-column: span 4 !important;
        grid-row: 3 !important;
    }

    .form-item:has(#itemPriceIn) {
        grid-column: span 4 !important;
        grid-row: 3 !important;
    }

    .form-item:has(#calcUnitPriceDisplay) {
        grid-column: span 3 !important;
        grid-row: 3 !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }

    #calcUnitPriceDisplay {
        font-size: 12px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
    }

    .form-item:has(#itemMemo) {
        grid-column: span 6 !important;
        grid-row: 3 !important;
    }

    /* 記号 ⇋ の完全非表示（確実にセル占有を排除） */
    .tax-swap-symbol,
    #addPriceForm .form-row > span:not(#calcUnitPriceDisplay),
    #addPriceForm span:not(#calcUnitPriceDisplay):not(.tax-preset-btn) {
        display: none !important;
    }

    /* 追加ボタン（3行目の右端・入力欄と同一水平ラインに配置） */
    #addPriceSubmitBtn {
        grid-column: span 3 !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: 13px !important;
        font-weight: 700 !important;
        border-radius: 5px !important;
        margin: 0 !important;
        align-self: end !important;
        justify-content: center !important;
        white-space: nowrap !important;
        background: #54456b !important;
        color: #ffffff !important;
    }

    /* 6. タブ3: データ管理（1行3ボタン横並び構成: 左タイトル108px + 右3ボタン） */
    .management-tab-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

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

    .management-group-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 36px !important;
        border-right: 2px solid #d5cee0 !important;
        border-bottom: none !important;
        padding: 2px 6px !important;
        margin: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
        background: #fdfbf7 !important;
        color: #433559 !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: 6px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* 7. グローバルアクションバー（スマホ共通ベース: 上ラベル化・不要ボタン非表示） */
    .action-bar-container,
    .global-action-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 4px 6px !important;
        margin-top: 2px !important;
        margin-bottom: 4px !important;
        box-sizing: border-box !important;
    }

    /* 一括保存ボタン・ソートボタンを完全非表示 */
    #saveAllButton,
    #sortExecuteButton,
    .save-group-label {
        display: none !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-bar-left .filter-input-group:has(#genreFilter),
    .action-bar-left .filter-input-group:has(#shopFilter),
    .action-bar-left .filter-input-group:has(#searchInput) {
        display: none !important;
    }

    .action-bar-left select,
    .action-bar-left input,
    #statusFilterSelect,
    #sortSelect {
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
        padding: 2px 4px !important;
        text-overflow: ellipsis !important;
    }



    /* 8. 一覧テーブルの表示最適化（表内スクロールバー非表示＆固定レイアウト維持） */
    .price-table-container {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }

    .price-table-container::-webkit-scrollbar {
        display: none !important;
    }

    #priceTable {
        min-width: 1090px !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #priceTable thead th,
    .price-table th {
        position: static !important;
        top: auto !important;
        padding: 4px 2px !important;
        font-size: 10px !important;
        height: 24px !important;
        max-height: 24px !important;
        line-height: normal !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    #priceTable td,
    .price-table td {
        padding: 4px 2px !important;
        font-size: 12.5px !important;
        vertical-align: middle !important;
    }

    /* 枠線・矢印・背景を削ってテキスト化 ＆ 入力禁止（スクロール誤タップ防止: zaiko / recipe踏襲） */
    #priceTable tbody td input,
    #priceTable tbody td select,
    #priceTable tbody td .table-input,
    #priceTable tbody td .table-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;
    }

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

    /* スマホモード: 操作列（11列目・最終列）は詳細シート側にあるため表内では非表示にして横幅を大幅圧縮 */
    #priceTable th:nth-child(11),
    #priceTable td:nth-child(11),
    #priceTable th:last-child,
    #priceTable td:last-child,
    #priceTable .row-action-cell,
    #priceTable .row-action-trigger,
    #priceTable .row-action-menu {
        display: none !important;
    }

    /* スマホ縦画面: 保管場所列 (105px) */
    #priceTable th:nth-child(2),
    #priceTable td:nth-child(2) {
        width: 105px !important;
        min-width: 105px !important;
    }

    /* スマホ縦画面: 分類・名前列の最小幅 (5文字分拡幅: 164px) */
    #priceTable th:nth-child(3),
    #priceTable td:nth-child(3) {
        width: 164px !important;
        min-width: 164px !important;
    }

    #priceTable th:nth-child(4),
    #priceTable td:nth-child(4) {
        width: 136px !important;
        min-width: 136px !important;
    }

    /* スマホ縦画面: 下4桁・期限・電話・状態列の最小幅最適化（スマホ横と同等に圧縮） */
    #priceTable th:nth-child(5),
    #priceTable td:nth-child(5) {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }

    #priceTable th:nth-child(6),
    #priceTable td:nth-child(6) {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
    }

    #priceTable th:nth-child(7),
    #priceTable td:nth-child(7) {
        width: 126px !important;
        min-width: 126px !important;
        max-width: 126px !important;
    }

    /* スマホ縦画面: 公式案内URL (140px) */
    #priceTable th:nth-child(8),
    #priceTable td:nth-child(8) {
        width: 140px !important;
        min-width: 140px !important;
    }

    #priceTable th:nth-child(9),
    #priceTable td:nth-child(9) {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
    }

    /* スマホ縦画面: メモ列 (140px) */
    #priceTable th:nth-child(10),
    #priceTable td:nth-child(10) {
        width: 140px !important;
        min-width: 140px !important;
    }

    /* スマホモード限定: Noセルタップで詳細・編集シート起動の案内スタイル */
    #priceTable tbody tr td:first-child,
    #priceTable tbody tr td:first-child .no-text,
    #priceTable tbody tr td:first-child .no-cell-content,
    body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody tr td:first-child,
    body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody tr td:first-child .no-text,
    body:not(.force-pc-mode) #priceTable tbody tr td:first-child,
    body:not(.force-pc-mode) #priceTable tbody tr td:first-child .no-text {
        cursor: pointer !important;
        pointer-events: auto !important;
        font-weight: 700 !important;
        color: #433559 !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;
    }

    #priceTable tbody tr td:first-child:hover,
    #priceTable tbody tr td:first-child:hover .no-text {
        background-color: #efeaf6 !important;
        color: #312740 !important;
        text-decoration: underline !important;
    }

    #priceTable tbody tr td:first-child:active {
        background-color: #dfd7ec !important;
    }
}

/* スマホ（縦・横）: メイン表を横スクロール可能にする（実クラスは .table-container、PCは対象外） */
@media (max-width: 768px), (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        scrollbar-width: thin !important;
    }

    .table-container::-webkit-scrollbar {
        display: block !important;
        height: 6px !important;
    }

    .table-container::-webkit-scrollbar-thumb {
        background: #c9b27a !important;
        border-radius: 3px !important;
    }
}



/* スマホ縦のみ適用するレイアウト調整 */
@media screen and (orientation: portrait), (max-width: 768px) and (orientation: portrait) {
    /* データ管理タブ: スマホ縦のみ「タイトル1行目＋ボタン2行目(横幅いっぱい3等分)」 */
    #tab-manage,
    body.force-mobile-mode #tab-manage {
        padding: 1px 8px 4px !important;
    }

    .management-tab-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .management-group {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
        margin-top: 0 !important;
        margin-bottom: 2px !important;
    }

    .management-group:first-child {
        margin-top: 0 !important;
    }

    .management-group:last-child {
        margin-bottom: 0 !important;
    }

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

    .management-group-title br {
        display: none !important;
    }

    /* 価格の登録タブ: スマホ縦（6列グリッド・4行構成に集約して1行削減） */
    #addPriceForm,
    .add-form-container {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    /* 1行目 (3項目): 記録日 / 店舗名 / ジャンル */
    .form-item:has(#itemDate) {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }
    .form-item:has(#itemShop) {
        grid-column: 3 / 5 !important;
        grid-row: 1 !important;
    }
    .form-item:has(#itemGenre) {
        grid-column: 5 / 7 !important;
        grid-row: 1 !important;
    }

    /* 2行目 (3項目): 分類品名 / メーカー / 商品名 */
    .form-item:has(#itemGenericName) {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
    }
    .form-item:has(#itemMaker) {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
    }
    .form-item:has(#itemProductName) {
        grid-column: 5 / 7 !important;
        grid-row: 2 !important;
    }

    /* 3行目 (内容量・税率・税抜・税込): 税抜と税込を半分ずつ配置 */
    .form-item:has(#itemQuantity) {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
    }
    .form-item:has(#itemTaxRate) {
        grid-column: 3 / 5 !important;
        grid-row: 3 !important;
    }
    .form-item:has(#itemPriceEx) {
        grid-column: 5 / 6 !important;
        grid-row: 3 !important;
    }
    .form-item:has(#itemPriceIn) {
        grid-column: 6 / 7 !important;
        grid-row: 3 !important;
    }
    .form-item:has(#itemPriceEx) label,
    .form-item:has(#itemPriceIn) label {
        font-size: 10.5px !important;
        letter-spacing: -0.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #itemPriceEx,
    #itemPriceIn {
        padding: 0 4px !important;
        font-size: 12px !important;
    }

    /* 4行目 (換算単価・メモ・追加ボタン): 換算・メモをずらし空いたスペースに追加ボタンを配置 */
    .form-item:has(#calcUnitPriceDisplay) {
        grid-column: 1 / 3 !important;
        grid-row: 4 !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .form-item:has(#itemMemo) {
        grid-column: 3 / 5 !important;
        grid-row: 4 !important;
    }
    #addPriceSubmitBtn {
        grid-column: 5 / 7 !important;
        grid-row: 4 !important;
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        align-self: end !important;
        border-radius: 5px !important;
        background: #54456b !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
    }

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

    .action-bar-left,
    .action-bar-right {
        display: contents !important;
    }

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

    /* 共通上ラベル（zaiko踏襲） */
    .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-bar-left .filter-input-group:has(#genreFilter),
    .action-bar-left .filter-input-group:has(#shopFilter),
    .action-bar-left .filter-input-group:has(#searchInput) {
        display: none !important;
    }

    /* 1段目・1列: 表示フィルター（上ラベル＋下セレクト） */
    .action-group.display-action-group,
    .action-bar-left .filter-input-group:has(#statusFilterSelect) {
        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-left .filter-input-group:has(#statusFilterSelect) select,
    #statusFilterSelect {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
        text-overflow: ellipsis !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    /* 1段目・2列: 並び替え（上ラベル＋下セレクト） */
    .action-group.sort-action-group,
    .action-bar-left .filter-input-group:has(#sortSelect) {
        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;
        width: 100% !important;
        gap: 0 !important;
    }
    .action-bar-left .filter-input-group:has(#sortSelect) select,
    #sortSelect {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
        text-overflow: ellipsis !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    /* 1段目・3列: 文字色（上ラベル＋下ボタン） */
    .color-priority-control {
        grid-column: 3 / 4 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        width: auto !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    .color-priority-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        height: 30px !important;
    }
    .color-priority-buttons button,
    .color-priority-control button {
        min-width: 0 !important;
        width: auto !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        padding: 0 4px !important;
        border-radius: 4px !important;
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .color-priority-buttons button.active,
    .color-priority-control button.active {
        background-color: #54456b !important;
        color: #ffffff !important;
        border-color: #423557 !important;
    }

    /* 2段目: 最新保存時刻（点線区切り・左右均等整列: zaiko踏襲） */
    .meta-info-control {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin-top: 4px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #c4bad4 !important;
        box-sizing: border-box !important;
    }
    #lastSavedTime,
    .save-time-display {
        font-size: 11px !important;
        color: #433559 !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }
}



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

/* 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 #priceTable tbody td:first-child,
body.force-mobile-mode #priceTable tbody td:first-child .no-text,
body.force-mobile-mode #priceTable tbody td:first-child .no-cell-content {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-bottom: 1px solid #ccc !important;
}

@media screen and (max-width: 768px),
       screen and (max-height: 500px) and (orientation: landscape) {
    body:not(.force-pc-mode) #priceTable tbody td:first-child,
    body:not(.force-pc-mode) #priceTable tbody td:first-child .no-text,
    body:not(.force-pc-mode) #priceTable tbody td:first-child .no-cell-content {
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        border-bottom: 1px solid #ccc !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: #d97706;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

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

.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: #854d0e;
}

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

.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: #d97706;
    outline: none;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

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

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

/* フッターアクションバー */
.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: #d97706;
    color: #ffffff;
    flex: 2 1 140px;
    font-size: 15px;
}

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

.sheet-btn-history {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

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

.sheet-btn-delete {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

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



/* ==========================================================================
   スマホ全モード共通（縦・横・強制スマホ）:
   - タブ余白削減 (padding: 4px 8px 3px)
   - ドロップダウン・テキストボックス・日付: 上下サイズ30pxに圧縮
   - 価格登録フォームのサイズばらつき完全解消（ラベル高さを16px固定、換算単価・税率ボタン枠・追加ボタンを完全統一）
   - データ管理タブボタン: 30px統一
   - ソートエリア: 30px統一
   ========================================================================== */
@media (max-width: 768px), (max-height: 600px) and (orientation: landscape), (orientation: portrait) and (max-width: 768px) {
    #tab-search,
    #tab-add,
    .tab-content-panel {
        padding: 4px 8px 3px !important;
        margin-bottom: 4px !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #tab-manage {
        padding: 1px 8px 4px !important;
        margin-bottom: 4px !important;
        min-height: 0 !important;
    }

    .search-tab-content .form-item label {
        font-size: 10.5px !important;
        margin-bottom: 1px !important;
    }

    #tabGenreFilter,
    #tabShopFilter,
    #tabSearchInput,
    #tabSearchButton,
    #tabClearFilterButton,
    #tabFilterStatus {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 11.5px !important;
        line-height: 28px !important;
        box-sizing: border-box !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-bar-left .filter-input-group:has(#sortSelect) select,
    .action-bar-left .filter-input-group:has(#sortSelect) .sort-execute-button,
    .action-bar-left .filter-input-group:has(#periodFilter) select,
    .action-bar-left .filter-input-group:has(#displayModeSelect) select,
    .action-bar-container #saveAllButton,
    #saveAllButton,
    #periodFilter,
    #displayModeSelect,
    #sortSelect,
    #sortExecuteButton {
        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-search input,
    #tab-search select,
    #tab-add input,
    #tab-add select,
    #addPriceForm input,
    #addPriceForm select,
    #itemDate,
    #itemShop,
    #itemGenre,
    #itemGenericName,
    #itemMaker,
    #itemProductName,
    #itemQuantity,
    #itemUnit,
    #itemTaxRate,
    #itemPriceEx,
    #itemPriceIn,
    #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;
        font-size: 12px !important;
    }

    /* iOS Safariにおける日付入力のネイティブ固有最小幅リセット */
    input[type="date"],
    #itemDate {
        -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,
    #itemDate::-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） */
    #calcUnitPriceDisplay {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
    }

    /* 税率プリセットボタン枠 */
    .form-item:has(#itemTaxRate) > div {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        box-sizing: border-box !important;
    }

    .tax-preset-btn {
        font-size: 10px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* タブ内ボタンの高さも30pxで揃える */
    #addPriceSubmitBtn,
    #tabSearchButton,
    #tabClearFilterButton {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        box-sizing: border-box !important;
    }

    /* 価格登録フォームの全ラベル高さを16px固定にして要素間の上下ずれ・ばらつきを解消 */
    #addPriceForm label,
    .add-form-container label,
    .form-item label {
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        line-height: 16px !important;
        font-size: 11px !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;
    }

    #addPriceForm label strong,
    .form-item label strong {
        font-size: 11px !important;
        line-height: 16px !important;
    }
}

/* 強制スマホモード（PCでの検証用）にも同一ルールを適用 */
body.force-mobile-mode #tab-search,
body.force-mobile-mode #tab-add,
body.force-mobile-mode .tab-content-panel {
    padding: 4px 8px 3px !important;
    margin-bottom: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.force-mobile-mode #tab-manage {
    padding: 1px 8px 4px !important;
    margin-bottom: 4px !important;
    min-height: 0 !important;
}

body.force-mobile-mode #tabGenreFilter,
body.force-mobile-mode #tabShopFilter,
body.force-mobile-mode #tabSearchInput,
body.force-mobile-mode #tabSearchButton,
body.force-mobile-mode #tabClearFilterButton,
body.force-mobile-mode #tabFilterStatus,
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-bar-left .filter-input-group:has(#sortSelect) select,
body.force-mobile-mode .action-bar-left .filter-input-group:has(#sortSelect) .sort-execute-button,
body.force-mobile-mode #saveAllButton,
body.force-mobile-mode #periodFilter,
body.force-mobile-mode #displayModeSelect,
body.force-mobile-mode #sortSelect,
body.force-mobile-mode #sortExecuteButton,
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 #calcUnitPriceDisplay,
body.force-mobile-mode #addPriceSubmitBtn {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box !important;
}

body.force-mobile-mode #addPriceForm label,
body.force-mobile-mode .form-item label {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    line-height: 16px !important;
    font-size: 11px !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 記録日列の飛び出し防止・左右均等の隙間（モード共通） */

.price-table input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
}

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




/* ==========================================================================
   財布管理 (wallet) 専用: スマホ縦画面 (Portrait) 最適化
   ========================================================================== */
@media screen and (orientation: portrait),
       screen and (max-width: 600px) {
    /* 1. カードの登録タブ: 6列グリッド・ゆったり4行構成 */
    #addWalletForm,
    .add-form-container,
    body.force-mobile-mode #addWalletForm,
    body.force-mobile-mode .add-form-container {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: end !important;
    }

    #addWalletForm .form-row,
    body.force-mobile-mode #addWalletForm .form-row {
        display: contents !important;
    }

    #addWalletForm .form-item,
    body.force-mobile-mode #addWalletForm .form-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 2px !important;
    }

    #addWalletForm input,
    #addWalletForm select,
    body.force-mobile-mode #addWalletForm input,
    body.force-mobile-mode #addWalletForm select {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 12px !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    /* 1行目: テンプレ引用(3列) + 保管場所(3列) */
    #addWalletForm .form-item:has(#itemPresetSelect),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemPresetSelect) {
        grid-column: 1 / 4 !important;
        grid-row: 1 !important;
    }
    #addWalletForm .form-item:has(#itemLocation),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemLocation) {
        grid-column: 4 / 7 !important;
        grid-row: 1 !important;
    }

    /* 2行目: 分類(2列) + カード・機関名(3列) + 下4桁(1列) */
    #addWalletForm .form-item:has(#itemCategory),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemCategory) {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
    }
    #addWalletForm .form-item:has(#itemName),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemName) {
        grid-column: 3 / 6 !important;
        grid-row: 2 !important;
    }
    #addWalletForm .form-item:has(#itemLast4),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemLast4) {
        grid-column: 6 / 7 !important;
        grid-row: 2 !important;
    }

    /* 3行目: 有効期限(2列) + 緊急連絡先(2列) + 状態(2列) */
    #addWalletForm .form-item:has(#itemExpiry),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemExpiry) {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
    }
    #addWalletForm .form-item:has(#itemTel),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemTel) {
        grid-column: 3 / 5 !important;
        grid-row: 3 !important;
    }
    #addWalletForm .form-item:has(#itemStatus),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemStatus) {
        grid-column: 5 / 7 !important;
        grid-row: 3 !important;
    }

    /* 4行目: 公式案内URL(2列) + メモ(3列) + 追加ボタン(1列) */
    #addWalletForm .form-item:has(#itemUrl),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemUrl) {
        grid-column: 1 / 3 !important;
        grid-row: 4 !important;
    }
    #addWalletForm .form-item:has(#itemMemo),
    body.force-mobile-mode #addWalletForm .form-item:has(#itemMemo) {
        grid-column: 3 / 6 !important;
        grid-row: 4 !important;
    }
    #addWalletSubmitBtn,
    body.force-mobile-mode #addWalletSubmitBtn {
        grid-column: 6 / 7 !important;
        grid-row: 4 !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: 12.5px !important;
        font-weight: 700 !important;
        padding: 0 4px !important;
        margin: 0 !important;
        align-self: end !important;
        justify-content: center !important;
        border-radius: 5px !important;
        background: #54456b !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
    }

    /* 2. 検索タブ: スマホ縦 (6列グリッド・2段構成) */
    #tab-search .search-tab-content .form-row,
    body.force-mobile-mode #tab-search .search-tab-content .form-row {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
    }

    #tab-search .form-item:has(#tabLocationFilter),
    body.force-mobile-mode #tab-search .form-item:has(#tabLocationFilter) {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }
    #tab-search .form-item:has(#tabCategoryFilter),
    body.force-mobile-mode #tab-search .form-item:has(#tabCategoryFilter) {
        grid-column: 3 / 5 !important;
        grid-row: 1 !important;
    }
    #tab-search .form-item:has(#tabSearchInput),
    body.force-mobile-mode #tab-search .form-item:has(#tabSearchInput) {
        grid-column: 5 / 7 !important;
        grid-row: 1 !important;
    }

    #tabLocationFilter,
    #tabCategoryFilter,
    #tabSearchInput,
    body.force-mobile-mode #tabLocationFilter,
    body.force-mobile-mode #tabCategoryFilter,
    body.force-mobile-mode #tabSearchInput {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        font-size: 12px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    #tabSearchButton,
    body.force-mobile-mode #tabSearchButton {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    #tabExpiringButton,
    body.force-mobile-mode #tabExpiringButton {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 30px !important;
        font-size: 11.5px !important;
        padding: 0 4px !important;
    }
    #tabClearFilterButton,
    body.force-mobile-mode #tabClearFilterButton {
        grid-column: 5 / 7 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 30px !important;
        font-size: 11.5px !important;
    }
    #tabFilterStatus,
    body.force-mobile-mode #tabFilterStatus {
        display: none !important;
    }

    /* 期限警告設定行 & 紛失緊急ボタン (スマホ縦で柔軟整列・重なり防止) */
    .desktop-only-text,
    body.force-mobile-mode .desktop-only-text,
    .wallet-security-note,
    body.force-mobile-mode .wallet-security-note {
        display: none !important;
    }

    .residual-warning-row,
    body.force-mobile-mode .residual-warning-row {
        height: auto !important;
        min-height: 28px !important;
        line-height: normal !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        gap: 4px 6px !important;
        font-size: 11px !important;
        margin-top: 4px !important;
        padding-top: 4px !important;
        border-top: 1px dashed rgba(107, 83, 140, 0.25) !important;
    }

    .residual-warning-controls,
    body.force-mobile-mode .residual-warning-controls {
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    .residual-warning-controls label,
    .residual-warning-controls span,
    body.force-mobile-mode .residual-warning-controls label,
    body.force-mobile-mode .residual-warning-controls span {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .residual-warning-controls input[type="number"],
    body.force-mobile-mode .residual-warning-controls input[type="number"] {
        width: 32px !important;
        min-width: 30px !important;
        height: 24px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .emergency-modal-btn,
    #openEmergencyModalBtn,
    body.force-mobile-mode .emergency-modal-btn,
    body.force-mobile-mode #openEmergencyModalBtn {
        height: 24px !important;
        line-height: 22px !important;
        font-size: 11px !important;
        padding: 0 6px !important;
        margin-left: auto !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* 3. データ管理タブ: スマホ縦 (1行3ボタン構成: 4つ目は2行目へ配置) */
    .management-group,
    body.force-mobile-mode .management-group {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }
    .management-group .custom-button,
    body.force-mobile-mode .management-group .custom-button {
        font-size: 11px !important;
        padding: 4px 2px !important;
    }
}

/* ==========================================================================
   財布管理 (wallet) 専用: レコード詳細・直接編集ボトムシート (スマホ縦画面)
   ========================================================================== */
.sheet-no-badge {
    background: #7c3aed !important;
}

.sheet-label {
    color: #5b21b6 !important;
}

.sheet-btn-update {
    background: #7c3aed !important;
}

.sheet-btn-update:hover {
    background: #6d28d9 !important;
}

/* スマホ強制モード (force-mobile-mode) 用の非入力化・不要ボタン非表示ルール */
body.force-mobile-mode #saveAllButton,
body.force-mobile-mode #sortExecuteButton,
body.force-mobile-mode .save-group-label {
    display: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td select,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td .table-input,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td .table-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) #priceTable tbody td input::-webkit-inner-spin-button,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-outer-spin-button,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(11),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(11),
body.force-mobile-mode:not(.force-pc-mode) #priceTable th:last-child,
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:last-child,
body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-cell,
body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-trigger,
body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-menu {
    display: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable {
    min-width: 1090px !important;
    width: 100% !important;
    table-layout: fixed !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(2),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(2) {
    width: 105px !important;
    min-width: 105px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(3),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(3) {
    width: 164px !important;
    min-width: 164px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(4),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(4) {
    width: 136px !important;
    min-width: 136px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(5),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(5) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(6),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(6) {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(7),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(7) {
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(8),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(8) {
    width: 140px !important;
    min-width: 140px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(9),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(9) {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(10),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(10) {
    width: 140px !important;
    min-width: 140px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td:first-child,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td:first-child .no-text,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td:first-child .no-cell-content {
    cursor: pointer !important;
    pointer-events: auto !important;
    font-weight: 700 !important;
    color: #433559 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td {
    vertical-align: middle !important;
    padding: 4px 2px !important;
}

/* ==========================================================================
   項目リスト設定 (customizeLists.html) スマホ縦モード（文字色の手前で改行・2段カード型レイアウト: zaiko / price踏襲）
   ========================================================================== */
@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"],
    .form-section .add-form-row select {
        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 var(--border-color, #c4bad4) !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;
    }

    /* リスト一覧テーブル: 2段カード型レイアウト（文字色の手前で改行） */
    .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 var(--border-color, #efeaf6) !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: 13px !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 {
        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;
    }
}

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

/* 緊急紛失モーダル（スマホ用・1行キープ・コンパクト） */
.emergency-item-card {
    border: 1px solid #e5a0a0;
    background: #fff;
    border-radius: 5px;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box;
}
.emergency-item-card.is-done {
    border-color: #cbd5e1;
    background: #f1f5f9;
    opacity: 0.68;
}
.emergency-item-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.emergency-item-meta {
    font-size: 11px !important;
    color: var(--muted-color);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25;
}
.emergency-item-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25;
}
.emergency-item-card.is-done .emergency-item-title {
    text-decoration: line-through;
}
.emergency-item-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}
.emergency-item-actions .wallet-tel-link {
    height: 25px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
}
.emergency-item-actions .wallet-url-link {
    height: 25px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
}
.emergency-item-actions .emg-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !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;
}