/* Mobile support styles. Only active at <=767px (Tailwind's `md` breakpoint)
   -- desktop is untouched.

   ---------------------------------------------------------------------
   2026-09-10 policy change for lists/tables: the previous approach forced
   every table to fit the viewport width via table-layout:fixed + per-column
   nth-child width percentages + white-space:normal word-break + a blanket
   font-size:9px shrink. That produced 1-2 character-per-line wrapping and
   crushed columns on real data. New policy (explicit user direction):
   tables keep their NATURAL width (table-layout:auto, no forced width),
   cell text never wraps (white-space:nowrap), and the table's own existing
   wrapper div (every shared <Table> instance already renders
   `<div class="relative w-full overflow-auto"><table>...`) provides the
   horizontal scroll when content is wider than the viewport. Column
   padding is only modestly reduced for mobile, not columns' widths or
   font legibility. See [[orderhub_procurement_feature]] memory: this file
   must never affect the /procurement page, which has its own fully
   page-scoped stylesheet (procurement-addon.css) and is not touched here.
   ---------------------------------------------------------------------
*/
@media (max-width: 767px) {
  /* Tables: natural width + horizontal scroll, never wrap, never shrink to
     unreadable size. table-layout defaults to `auto` (not set here on
     purpose -- forcing `fixed` is exactly what caused the old cramming). */
  table { font-size: 13px; }
  th, td {
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }
  /* The shared Table component's own wrapper (`relative w-full
     overflow-auto`) already provides horizontal scroll -- just make sure
     it scrolls smoothly on touch and never fights the page's own vertical
     scroll container (scoped to a wrapper that actually contains a table,
     never applied to main/body). */
  .overflow-auto:has(> table),
  .overflow-x-auto:has(table) {
    -webkit-overflow-scrolling: touch;
  }

  .recharts-default-legend { flex-wrap: wrap; }
  .recharts-legend-wrapper { white-space: normal !important; overflow: visible !important; }

  /* 顧客管理: 総顧客数カードを1行・低めの高さに */
  [data-testid="stat-total-customers"] {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  [data-testid="stat-total-customers"] > div {
    padding: 6px 10px !important;
    margin: 0 !important;
  }
  [data-testid="stat-total-customers"] svg { display: none; }
  [data-testid="stat-total-customers"] .text-2xl { font-size: 1.1rem; }

  /* 顧客管理: 顧客数推移チャートを横長(約3:1)に */
  [data-testid="chart-customer-trend"] {
    height: auto !important;
    aspect-ratio: 3 / 1;
  }

  /* 受注一覧 / 顧客管理: 上部の操作ボタンをモバイルで1行・コンパクトに */
  div:has(> [data-testid="button-csv-import"]) {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: visible;
  }
  [data-testid="button-csv-import"],
  [data-testid="button-import-amazon"],
  [data-testid="button-csv-export"],
  [data-testid="button-export-customers"] {
    padding: 4px 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  [data-testid="button-csv-import"] svg,
  [data-testid="button-import-amazon"] svg,
  [data-testid="button-csv-export"] svg,
  [data-testid="button-export-customers"] svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 4px !important;
  }

  /* ダッシュボード: 上部KPI4枚(未発送/今日/30日間/1年間)を1行・均等4列に
     収める。1年間カードを目印に:has()でこのグリッドだけを特定し、他ページの
     同名クラス(grid-cols-4)には影響させない。 */
  .grid.grid-cols-4:has([data-testid="text-1year-orders"]) {
    gap: 4px !important;
  }
  .grid.grid-cols-4:has([data-testid="text-1year-orders"]) > div {
    min-width: 0;
  }
  .grid.grid-cols-4:has([data-testid="text-1year-orders"]) > div > div:first-child {
    padding: 6px 4px 2px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden;
    gap: 2px !important;
  }
  .grid.grid-cols-4:has([data-testid="text-1year-orders"]) > div > div:last-child {
    padding: 0 4px 6px !important;
  }
  .grid.grid-cols-4:has([data-testid="text-1year-orders"]) .text-2xl {
    font-size: 1.05rem !important;
    white-space: nowrap;
  }
  .grid.grid-cols-4:has([data-testid="text-1year-orders"]) svg {
    width: 10px !important;
    height: 10px !important;
  }
  .grid.grid-cols-4:has([data-testid="text-1year-orders"]) [data-testid="text-kpi-trend"] {
    white-space: nowrap;
  }

  /* 受注一覧: 「すべての店舗」セレクタと検索欄を1行に収める。
     このflex-wrapコンテナには詳細フィルター/列の表示ボタンも同じ兄弟として
     並んでいるため、コンテナ全体をnowrapにはしない -- 代わりに詳細フィルター
     の直前で強制改行させ(flex-basis:100%は「このアイテムは今の行に収まらない
     ものとして扱う」という意味になり、flexアイテムを次の行へ送る一般的な手法)、
     店舗セレクタ+検索欄だけを1行目に、詳細フィルター+列の表示を2行目に分ける。 */
  div:has(> [data-testid="button-store-selector"]) {
    gap: 6px !important;
  }
  [data-testid="button-toggle-filters"] {
    flex-basis: 100%;
  }
  [data-testid="button-store-selector"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: 96px;
    padding: 4px 6px !important;
    font-size: 10px !important;
    height: 32px !important;
    flex: 0 0 auto;
  }
  [data-testid="button-store-selector"] span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-testid="button-store-selector"] svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 2px !important;
    margin-left: 2px !important;
  }
  div:has(> [data-testid="button-store-selector"]) > div:has(> [data-testid="input-search-orders"]) {
    flex: 1 1 auto;
    min-width: 0;
  }
  [data-testid="input-search-orders"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 11px !important;
  }

  /* 売上・利益分析 > 概要: 5枚のKPIカードを1枚にまとめ、各項目を1行(左ラベル/
     右数値)にする。text-summary-revenueを目印に:has()でこのグリッドだけを
     特定 -- 同じ「grid gap-4」クラスの組が他にあっても影響させない。 */
  .grid.gap-4:has([data-testid="text-summary-revenue"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) > div {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
    gap: 8px;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) > div + div {
    border-top: 1px solid hsl(var(--border)) !important;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) > div > div:first-child,
  .grid.gap-4:has([data-testid="text-summary-revenue"]) > div > div:last-child {
    padding: 0 !important;
    margin: 0 !important;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) > div > div:last-child {
    text-align: right;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) svg {
    display: none !important;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) .text-2xl {
    font-size: 1rem !important;
    white-space: nowrap;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) .text-sm {
    font-size: 0.8rem !important;
    white-space: nowrap;
  }
  /* リピーター率行だけの補足(分数表示・期間切替トグル)は1行に収まらないため
     モバイルでは省略する。件数・増減率にあたる主数値(text-summary-repeat-rate)
     自体は残す。 */
  .grid.gap-4:has([data-testid="text-summary-revenue"]) [data-testid="text-summary-repeat-rate-fraction"],
  .grid.gap-4:has([data-testid="text-summary-revenue"]) div:has(> [data-testid^="button-rep-mode-summary"]) {
    display: none !important;
  }
  /* リピーター率の行だけ他4行と構造が違う: Cardの子が[header, CardContent,
     絶対配置のトグルdiv]の3つあり(他4行は[header, CardContent]の2つ)。
     `> div > div:last-child`ルールはCardの最後の子を狙うが、この行では
     それが(非表示済みの)トグルdivになってしまい、本来のCardContentには
     当たらず、CardContentがデフォルトpadding(p-6 pt-0)を保持したままに
     なって縦に高くなっていた。CardContentは常にCardの2番目の子なので、
     nth-child(2)で直接指定して他4行と揃える。 */
  .grid.gap-4:has([data-testid="text-summary-revenue"]) > div:has([data-testid="text-summary-repeat-rate"]) > div:nth-child(2) {
    padding: 0 !important;
    margin: 0 !important;
    text-align: right;
  }
  .grid.gap-4:has([data-testid="text-summary-revenue"]) > div:has([data-testid="text-summary-repeat-rate"]) .flex.items-baseline {
    gap: 0;
  }

  /* 売上・利益分析: 期間選択カードをモバイルでコンパクトに。
     開始/終了/集計単位/リセットの4つを2x2グリッドにする(開始+終了が1行目、
     集計単位+リセットが2行目)。button-reset-filtersを目印に:has()で特定。 */
  div:has(> [data-testid="button-reset-filters"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  div:has(> [data-testid="button-reset-filters"]) > div {
    width: 100%;
  }
  div:has(> [data-testid="button-reset-filters"]) [data-testid^="button-ym-"] {
    width: 100%;
    min-width: 0;
  }
  [data-testid="button-reset-filters"] {
    width: 100%;
    justify-self: stretch;
  }
  /* カード自体(CardContent)のpaddingも縮小。pt-6は他のカードにも使われる
     汎用クラスのため、button-reset-filtersを含む場合だけに:has()で限定。 */
  .pt-6:has([data-testid="button-reset-filters"]) {
    padding: 10px !important;
  }
  .pt-6:has([data-testid="button-reset-filters"]) .mt-4 {
    margin-top: 8px !important;
  }
  div:has(> [data-testid="button-reset-filters"]) ~ div [data-testid^="button-preset-"] {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  /* 「集計単位」セルはラベルの下にセレクトが積まれる構成(flex flex-col)
     だったのを、ラベル+セレクトを横並びにしてリセットボタンと同じ行に完全に
     収める(集計単位 [月別▼] [リセット] の1行)。 */
  div:has(> [data-testid="button-reset-filters"]) > div:has(> [data-testid="select-period"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  div:has(> [data-testid="button-reset-filters"]) > div:has(> [data-testid="select-period"]) label {
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1.2;
    flex: 0 0 auto;
  }
  [data-testid="select-period"] {
    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    font-size: 12.5px !important;
    line-height: 1.2;
    padding: 2px 6px !important;
  }
  [data-testid="button-reset-filters"] {
    height: 28px !important;
    font-size: 12.5px !important;
    line-height: 1.2;
    padding: 2px 10px !important;
  }

  /* 名寄せ管理: 切替タブ(名寄せ候補/名寄せ済み/統合しない/会社名候補を確認)を
     1行に収める。件数バッジは非表示。 */
  div[role="tablist"]:has([data-testid="tab-candidates"]) {
    height: auto !important;
    padding: 2px !important;
    gap: 2px;
    width: 100%;
  }
  [data-testid="tab-candidates"],
  [data-testid="tab-merged"],
  [data-testid="tab-dismissed"],
  [data-testid="tab-company-candidates"] {
    padding: 5px 4px !important;
    font-size: 9px !important;
    white-space: nowrap;
    flex: 1 1 0;
  }
  [data-testid="tab-candidates"] .ml-2,
  [data-testid="tab-merged"] .ml-2,
  [data-testid="tab-dismissed"] .ml-2,
  [data-testid="tab-company-candidates"] .ml-2 {
    display: none !important;
  }

  /* 顧客リスト検索欄: プレースホルダーが長いため、モバイルではfont-size/
     paddingを縮小して欄内に自然に収める。 */
  [data-testid="input-search-customers"] {
    font-size: 11px !important;
    height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  [data-testid="input-search-customers"]::placeholder {
    font-size: 11px;
  }

  /* -------------------------------------------------------------------
     パートナー制度 ＞ 報酬管理 (/partner-management, partner-mgmt-admin.js)
     モバイルで縦に長くなりすぎないよう、Card padding・行間・タブを圧縮。
     .partner-mgmt-page はそのページのルート要素にだけ付けたスコープ用
     クラスなので、ここでのTailwindユーティリティ上書きは他ページに一切
     影響しない。
     ------------------------------------------------------------------- */
  .partner-mgmt-page { padding: 10px !important; }
  .partner-mgmt-page > * + * { margin-top: 10px !important; }
  .partner-mgmt-page .space-y-4 > * + * { margin-top: 8px !important; }
  .partner-mgmt-page .space-y-3 > * + * { margin-top: 6px !important; }
  .partner-mgmt-page .space-y-2 > * + * { margin-top: 4px !important; }
  .partner-mgmt-page .space-y-1 > * + * { margin-top: 2px !important; }
  .partner-mgmt-page .p-6 { padding: 10px !important; }
  .partner-mgmt-page .pt-6 { padding-top: 10px !important; }
  .partner-mgmt-page .p-3 { padding: 8px !important; }
  .partner-mgmt-page .gap-3 { gap: 6px !important; }
  .partner-mgmt-page .gap-2 { gap: 4px !important; }
  .partner-mgmt-page .text-2xl { font-size: 1.15rem !important; }
  .partner-mgmt-page [role="tablist"] {
    height: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  .partner-mgmt-page [role="tab"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .partner-mgmt-page input {
    height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* 顧客LTVランキング(モバイル): 「順位」ヘッダーの文字は不要(spec) -- テキスト
     ノードなのでCSSで直接消せない分、font-size:0で視覚的に空欄化しつつレイアウト
     の当たり判定自体は保つ。順位セルは数字のみ表示なので左右paddingを最小限に
     絞り、列を可能な限り狭くする。 */
  [data-testid="header-ltv-rank"] {
    font-size: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 1%;
    white-space: nowrap;
  }
  [data-testid^="text-ltv-rank-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 1%;
  }
}

/* ---- round120: モバイル(<=767px)だけ「外側カード」を外す(二重枠の解消) ----
   対象は各ページのチャンクで明示的にクラスを付けた要素だけ(このファイルの他のルールのような要素セレクタ一括適用はしない):
   - .oh-mflat-card : 実コンテンツ(表・パネル)をさらに囲っている外側のカード。枠線・角丸・影・背景と、
                      直下の CardHeader / CardContent の左右 padding(24px)を外す。上下の余白はそのまま。
   - .oh-mflat-page : ルートが p-6(左右24px)のページ。左右のページ余白を .ship-page と同じ 10px にする。
   付与先: 出荷・在庫管理(集計/年度商品設定)、受注一覧、名寄せ管理(4タブのカード)、売行分析(月次分析/季節分析)。
   内側の表・パネル・入力欄・個別カード(統計カード等)の枠は一切変えない。PC(>=768px)は対象外。 */
@media (max-width: 767px) {
  .oh-mflat-page { padding-left: 10px !important; padding-right: 10px !important; }
  .oh-mflat-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  .oh-mflat-card > * { padding-left: 0 !important; padding-right: 0 !important; }
}