/* body 全体 */
body {
  margin: 0;
  padding: 0;

  /* ★変更：丸みのある日本語フォント優先（無ければ従来フォールバック） */
  font-family:
    "Hiragino Maru Gothic ProN",
    "Hiragino Maru Gothic Pro",
    "Yu Gothic UI",
    "Yu Gothic",
    "Meiryo",
    "M PLUS Rounded 1c",
    "Noto Sans JP",
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  width: 100%;
  height: 100%;
  overflow: auto;
}

/**********************************
  * 左側ナビゲーション (固定表示)
  **********************************/
  nav#sidebar {
  position: fixed;
  top: 0; 
  left: 0;
  width: 250px;               /* 通常幅 */
  height: 100vh;
  color: #ffffff;
  background-color: #183181;
  box-shadow: 2px 0 5px rgba(24, 49, 129, 0.4);

  /* サブメニューがはみ出しても表示できるように */
  overflow: visible;
  transition: width 0.3s;
  z-index: 2000;
  padding: 10px;
  box-sizing: border-box;    /* paddingを含めて幅計算 */
  display: flex;            /* タイトルやメニューを縦方向に */
  flex-direction: column;
}
/* 折りたたみ nav */
nav#sidebar.collapsed {
  width: 60px;
}

/* ============================================
   プラン不足ナビ項目：グレーアウト + ツールチップ
   ============================================ */

/* サイドナビ */
.is-plan-locked .plan-locked-link {
  color: #adb5bd;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.85rem;
}
.is-plan-locked .plan-locked-link i.fa-lock {
  font-size: 0.65em;
  opacity: 0.7;
}

/* ツールチップ（CSS疑似要素）*/
.is-plan-locked {
  position: relative;
}
.is-plan-locked:hover::after {
  content: attr(data-plan-tip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(33, 37, 41, 0.92);
  color: #fff;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 1050;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  pointer-events: none;
  animation: planTipFadeIn 0.15s ease;
}
@keyframes planTipFadeIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* サイドバー折りたたみ時 */
.sidebar-collapsed .is-plan-locked:hover::after {
  left: calc(100% + 4px);
}

/* レポート画面「その他」タブ */
.sr-filter--locked {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
}
.sr-filter-label--locked {
  color: #adb5bd;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sr-filter--locked:hover::after {
  content: attr(data-plan-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(33, 37, 41, 0.92);
  color: #fff;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 1050;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* 総合レポート(Hub)の combobox option ロック表示 */
.sr-combobox__option.is-locked{
  color: #9ca3af !important;
  background: #f3f4f6 !important;
  cursor: not-allowed !important;
  position: relative;
}

.sr-combobox__option.is-locked:hover{
  background: #f3f4f6 !important;
}

.sr-combobox__option.is-locked i.fa-lock{
  opacity: 0.75;
  margin-right: 6px;
}

/* option hover時の案内 */
.sr-combobox__option.is-locked:hover::after{
  content: attr(data-lock-message);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: rgba(33, 37, 41, 0.92);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2000;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  pointer-events: none;
}
@media (max-width: 900px){
  .sr-combobox__option.is-locked:hover::after{
    left: 8px;
    right: 8px;
    bottom: calc(100% + 6px);
    transform: none;
    white-space: normal;
    text-align: center;
  }
}


/*****************************
  * nav-header: タイトル + トグル
  *****************************/
.nav-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.nav-header h1 {
  margin: 0;
  font-size: 2.5em; 
  line-height: 1.2;
  white-space: nowrap;
}
/* 畳んだときタイトルを消す */
nav#sidebar.collapsed .nav-header h1 {
  display: none;
}
/* AI在庫一元管理システム + S-wallet を同じ行に */
.system-title {
  white-space: nowrap;  /* 改行なし */
}
/* 畳んだ時は表示しない */
nav#sidebar.collapsed .system-title {
  display: none;
}

/* 小さく「AI在庫一元管理システム」、そのあと大きく「S-wallet」 */
.system-title .small-label {
  font-size: 0.8em;  /* 小さめ */
  vertical-align: middle;
}
.system-title .big-label {
  font-family: "Futura", "Futura PT", "Avenir", "Helvetica Neue", Arial, sans-serif;
  font-size: 2.2em;
  font-weight: 600;        /* Futuraは太さ控えめが綺麗 */
  letter-spacing: 0.04em; /* ロゴ感を出す */
  margin-left: 0;
  vertical-align: middle;
}
.big-label .tm {
  font-family: inherit;
  font-size: 0.45em;
  vertical-align: super;
  margin-left: 2px;
  letter-spacing: 0;
  opacity: 0.9;
}

/* トグルボタン */
.nav-toggle {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.3em;
  cursor: pointer;
  transition: transform 0.3s;
}
nav#sidebar.collapsed .nav-toggle i {
  transform: rotate(180deg);
}

/********************************
  * ユーザー情報部分
  ********************************/
.user-info {
  margin-bottom: 10px;
}
/* 畳んだとき非表示にする */
nav#sidebar.collapsed .user-info {
  display: none;
}        
.user-info p {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  white-space: nowrap; /* 折り返さない */
  font-size: 0.9em;    /* 好みでサイズ調整 */            
}
/* Thank you for always を元の cursive style に */
.thankyou {
  font-family: cursive;
  letter-spacing: 1px;
  font-size: 1.5em;
}        

/********************************
  * メニューリスト
  ********************************/
  nav#sidebar ul {
    list-style: none;
    margin: 0; 
    padding: 0;
    flex-grow: 1;
  }
  /* 親＋子を横並びにする：左=親ボタン / 右=子+孫リスト */
nav#sidebar ul.nav-main > li {
  display: flex;
  align-items: flex-start;
}

  nav#sidebar ul li {
    position: relative;
    margin-bottom: 2px;
  }
  nav#sidebar ul li button {
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    background: none;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
  }
  nav#sidebar ul li button:hover,
  nav#sidebar ul li button.active,
  nav#sidebar ul li a.submenu-link:hover,
  nav#sidebar ul li a.submenu-link.active {
    background-color: #243fa3;
  }
/* アイコン */
.nav-icon {
  width: 20px;
  margin-right: 8px;
  text-align: center;
}
/* 折りたたみ時の文字ラベルを消す */
.nav-label {
  transition: opacity 0.2s;
}
nav#sidebar.collapsed .nav-label {
  display: none;
}


.nav-three-level {
display: flex;
gap: 8px;
}

/* 親：アイコン列 */
.nav-parent {
list-style: none;
margin: 0;
padding: 0;
flex: 0 0 60px;        /* 親アイコン列の幅 */
}
.nav-three-level .nav-parent li + li {
margin-top: 4px;
}
.nav-parent .parent-btn {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 4px;
border-radius: 8px;
background: none;
border: none;
color: #fff;
cursor: pointer;
}
.nav-parent .parent-btn:hover,
.nav-parent .parent-btn.is-active {
background: rgba(0,0,0,0.18);
}
.nav-parent .nav-icon {
margin-right: 0;      /* 共通CSSの右余白を打ち消す */
font-size: 18px;
}
.nav-parent .nav-label {
font-size: 11px;
margin-top: 2px;
text-align: center;
}

/* 子＋孫側のエリア */
.nav-child-grandchild {
flex: 1 1 auto;
background: rgba(0,0,0,0.05);
border-radius: 8px;
padding: 8px 6px;
overflow-y: auto;
}

/* カテゴリ(子) */
.nav-section + .nav-section {
margin-top: 10px;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.nav-section-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}

/* 孫：実際のページリンク */
.nav-grandchild {
list-style: none;
margin: 0;
padding: 0;
}
.nav-grandchild li + li {
margin-top: 2px;
}
.nav-grandchild-btn {
width: 100%;
padding: 4px 6px;
font-size: 13px;
text-align: left;
border-radius: 4px;
border: none;
background: transparent;
color: #fff;
cursor: pointer;
}
.nav-grandchild-btn:hover,
.nav-grandchild-btn.is-active {
  background: rgba(24,49,129,0.45);
}

/* サイドバーを畳んだときは子＋孫エリアを非表示に */
nav#sidebar.collapsed .nav-three-level {
flex-direction: column;
}
nav#sidebar.collapsed .nav-child-grandchild {
display: none;
}

/* 親（在庫管理 / レポート）のボタン：アイコン＋ラベルを縦並び＆左寄せ */
nav#sidebar ul.nav-main > li > .nav-parent-btn {
  display: flex;
  flex-direction: column;      /* アイコンの下にラベル */
  align-items: flex-start;     /* 左寄せ */
  justify-content: center;
  padding: 6px 8px;
  gap: 2px;
  flex: 0 0 80px;              /* ★ 親カラムの幅を 80px に固定（子がはみ出さないように） */
}
.nav-parent-icon {
font-size: 18px;
line-height: 1;
}
.nav-parent-label {
font-size: 13px;
line-height: 1.2;
}
/* アクティブな親行をハイライト */
/* nav-parent-active が li に付いていても button に付いていても効くようにしておく */
nav#sidebar ul.nav-main > li.nav-parent-active > .nav-parent-btn,
nav#sidebar ul.nav-main > li > .nav-parent-btn.nav-parent-active {
  background-color: #12245f;
  box-shadow: inset 3px 0 0 #ffffff;  /* 左に白ライン */
}

/* アクティブ親のラベルだけ少し太字にしたければ残す */
nav#sidebar ul.nav-main > li.nav-parent-active .nav-parent-label,
nav#sidebar ul.nav-main > li > .nav-parent-btn.nav-parent-active .nav-parent-label {
  font-weight: 700;
}

/* ============================================================
   ★FIX: サイドバー折りたたみ時は「アイコンだけ」にして、幅を60pxに合わせる
   ============================================================ */
   nav#sidebar.collapsed ul.nav-main > li{
    display: block;              /* 横並び(flex)をやめる → はみ出し防止 */
  }
  
  nav#sidebar.collapsed ul.nav-main > li > ul{
    display: none !important;    /* 念のため：子メニューは必ず非表示 */
  }
  
  nav#sidebar.collapsed ul.nav-main > li > .nav-parent-btn{
    flex: none !important;       /* ★ 80px固定を無効化 */
    width: 100% !important;      /* 60px内に収める */
    padding: 10px 0 !important;  /* 横の余白をなくして中央寄せ */
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px;         /* お好み。見た目がきれいになる */
  }
  
  /* 折りたたみ時：親ラベル文字は非表示（アイコンだけ） */
  nav#sidebar.collapsed .nav-parent-label{
    display: none !important;
  }
  
  /* 折りたたみ時：アイコンを中央寄せに（余計な高さ/幅ブレ防止） */
  nav#sidebar.collapsed .nav-parent-icon{
    font-size: 20px;             /* お好み。少し大きくして視認性UP */
    line-height: 1;
  }

  /* 折りたたみ時：ハイライトも60px幅にフィット（左白ラインは不要なら消す） */
nav#sidebar.collapsed ul.nav-main > li.nav-parent-active > .nav-parent-btn,
nav#sidebar.collapsed ul.nav-main > li > .nav-parent-btn.nav-parent-active{
  box-shadow: none !important;           /* ←白ライン不要なら */
  /* もし“選択感”を残したいなら、代わりに枠線にしてもOK
  border: 2px solid rgba(255,255,255,0.9);
  */
}

/* ===== embed=1 で読み込まれる iframe 用（ヘッダー/サイドバーを消す） ===== */
body.embed-mode nav#sidebar,
body.embed-mode header.app-header {
  display: none !important;
}

body.embed-mode main {
  margin-left: 0 !important;
  padding-top: 0 !important;
}


/********************************
  * サブメニュー（ポップアップ）
  ********************************/
/* メインメニュー用：親(li)直下のul は通常フロー + 非表示 */
nav#sidebar ul.nav-main > li > ul {
  position: static;
  top: auto;
  left: auto;
  flex: 1 1 auto;                         /* ★ 親以外の残り幅をすべて子にあてる */
  min-width: 0;                           /* ★ はみ出さないようにする */
  background-color: rgba(0, 0, 0, 0.08);  /* ★ 親より少し明るい帯色に */
  padding: 4px 0 6px;
  margin: 0;
  display: none;                          /* デフォルトは隠す */
}

/* 親(li)に .nav-open が付いたときだけ表示 */
nav#sidebar ul.nav-main > li.nav-open > ul {
display: block;
}

/* nav-bottom 側（マイページ）はこれまで通りポップアップ継続 */
nav#sidebar ul.nav-bottom li ul{
position: absolute;
top: auto;
bottom: 0;
left: 100%;
min-width: 180px;
background-color: rgba(24, 49, 129, 0.6);
padding: 10px 0;
z-index: 9999;
opacity: 0;
pointer-events: none;
transform: translateX(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
nav#sidebar ul.nav-bottom li:hover > ul{
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}

/* サブメニューカテゴリー見出し (太字) */
/* 子：カテゴリ見出し（フォント大きめ・色明るめ） */
.submenu-category {
  font-weight: 700;
  margin: 6px 10px 2px;
  color: #E4EEFF;
  font-size: 14px;
  position: relative;
  padding: 3px 10px 3px 18px;
  background-color: rgba(0, 0, 0, 0.12); /* ★ 子の背景：親より濃い／孫より薄い */
}

/* ▼ / ▶ マーク（CSSだけで付ける） */
.submenu-category::before {
  content: "▶";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: 0.9;
}
.submenu-category.cat-open::before {
  content: "▼";
}

/* 子の右側に「(nページ)」を出す用 */
.submenu-category .submenu-count {
  font-size: 11px;
  opacity: 0.8;
  margin-left: 4px;
}

/* 孫：実際のページ（フォント少し小さめ） */
.submenu-item button,
.submenu-item a.submenu-link {
  border-left: 2px solid transparent;
  padding: 3px 10px 3px 18px;
  font-size: 13px !important;
  width: 100%;
  background: transparent;
  color: #F9FBFF;
  border: none;
  text-align: left;
  cursor: pointer;

  /* aをbuttonと同じ“箱”にする */
  display: block;
  line-height: 1.4;
  box-sizing: border-box;

  /* リンク見た目を消す */
  text-decoration: none;
}

.submenu-item button:hover,
.submenu-item a.submenu-link:hover {
  background-color: rgba(0, 0, 0, 0.22);
  border-left-color: #ffffff;
}

#sidebar .submenu-item.active > button:hover,
#sidebar .submenu-item.active > a.submenu-link:hover {
  background-color: #fff3b0 !important;
  color: #333 !important;
}

/* === ナビを上下で分割：上段は伸びて、下段は最下部に固定配置 === */
nav#sidebar ul.nav-main {            /* 上段：既存メニュー（マイページ以外） */
  flex: 1 1 auto;                    /* 余白をすべて占有して上側に伸びる */
}
nav#sidebar ul.nav-bottom {          /* 下段：マイページ + お問い合わせ */
  flex: 0 0 auto;
  margin-top: auto;                  /* サイドバー最下部へ */
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.25);
}

/* 下段のサブメニューは“上方向”に開く（見切れ防止） */
nav#sidebar ul.nav-bottom li ul{
  top: auto;                         /* 既定の top:0 を打ち消し */
  bottom: 0;                         /* 親 li の下端にそろえる ⇒ 上に展開される */
  transform-origin: left bottom;     /* アニメの基準も下端に */
}
nav#sidebar ul.nav-bottom li:hover > ul{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);          /* 左右のスライドだけにする（縦は固定） */
}

/* ★ submenu-item が選択されている時の色（button/a 完全統一） */
#sidebar .submenu-item.active > button,
#sidebar .submenu-item.active > a.submenu-link,
#sidebar .submenu-item > a.submenu-link.active {
  background-color: #fff3b0 !important;
  color: #333 !important;
  font-weight: 700;
  border-radius: 4px;
}
/* 左ナビ：クリックできる項目は pointer に */
#sidebar .submenu-item > button,
#sidebar .submenu-item > a.submenu-link {
  cursor: pointer !important;
}


/* 親ボタン（在庫管理・レポート・システム設定）も pointer */
#sidebar .nav-parent-btn {
  cursor: pointer !important;
}

#sidebar .submenu-item > button:hover,
#sidebar .submenu-item > a.submenu-link:hover {
  filter: brightness(1.08);
}

/* 全体ダッシュボード：フロー図カーソル
   - 基本は矢印（Plotly の crosshair を消す）
   - pointer は JS（plotly_hover）で遷移ノードの時だけ付与する
*/
#flow-graph svg.main-svg,
#flow-graph .main-svg,
#flow-graph .draglayer,
#flow-graph .draglayer * {
  cursor: default !important;
}

/* ★ここ重要：.points に cursor:pointer は書かない（draglayerが上なので効かない） */






/********************************
  * フッター（最終更新日時・カンパニーコード）
  ********************************/
.nav-footer {
  margin-top: auto;  /* 上の要素を押し上げ、フッターを下端に配置 */
  font-size: 0.8em;
  opacity: 0.8;
}
/* 畳んだときは非表示にする */
nav#sidebar.collapsed .nav-footer {
  display: none;
}
.nav-footer p {
  margin: 0; 
  line-height: 1.4;
  white-space: nowrap; /* 折返さず1行表示 */
  font-size: 0.8em;
}

/**************************************
  * 右側 メインコンテンツ
  **************************************/
main {
  margin-left: 250px; /* nav と同じ幅 */
  padding: 0;         /* paddingを0に */
  background-color: #ffffff;
  min-height: 100vh;
  transition: margin-left 0.3s;
}
nav#sidebar.collapsed ~ main {
  margin-left: 60px;/* 畳んだ時に60pxだけ左余白 */
}

/* ===== iframe 埋め込み用（総合レポートの右ペイン） =====
   /s_wallet/?...&embed=1 で表示されるページは、
   ナビやヘッダーを隠して「中身だけ」を表示する。
*/
body.embed-mode nav#sidebar {
  display: none !important;
}
body.embed-mode main {
  margin-left: 0 !important;
  min-height: auto;
}
body.embed-mode main > header {
  display: none !important;
}

header {
  /* 背景色は inline-style で上書きされるのでここは最低限でOK */
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;                 /* ★ 左右に分割 */
  align-items: center;
  justify-content: space-between;
}
header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700 !important;     /* ← 太字を強制 */
  color: inherit !important;       /* ← 各PFの色をそのまま継承 */
}

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

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

/* ✅ ヘッダーが濃紺固定(#183181)なので、右上ボタンは全ページ白系で統一 */
.header-action-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 10px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.75);
  color:#ffffff;
  background: rgba(255,255,255,.08);

  font-weight:700;
  font-size:12px;
  line-height:1;
  text-decoration:none;
}

.header-action-btn i {
  font-size: 13px;
}
.header-action-btn:hover{
  background: rgba(255,255,255,.16);
  color:#ffffff;
}

/* 選択中の時だけ少し強調したい場合 */
.header-action-btn.is-active {
  background: #ffffff;
  color: #343a40;
}

/* ★LINE風：件数バッジ（数字） */
.sw-badge-count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  display: none;
}
 
/* =========================
   お知らせ：ベル直下ドロップダウン
   ========================= */

/* ベル＋ドロップダウンのラッパー */
.notice-menu{
  position: relative;     /* ベルを基準に配置 */
  display: inline-block;
}

/* ドロップダウン本体 */
.notice-dropdown{
  position: absolute;
  top: 100%;              /* ベルの直下 */
  right: 0;
  margin-top: 6px;
  width: 360px;
  max-width: 90vw;

  background: var(--dd-bg);
  color: var(--dd-text);
  border-color: var(--dd-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.20);

  padding: 10px;
  z-index: 20000;

  display: none;          /* JSで開閉 */
}

/* 表示状態 */
.notice-dropdown.is-open{
  display: block;
}

/* しっぽ（ベルに向ける） */
.notice-dropdown::before{
  content:"";
  position:absolute;
  top:-8px;
  right: 18px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent var(--dd-bg) transparent;
  filter: drop-shadow(0 -1px 0 #e5e7eb);
}

/* ヘッダー */
.notice-dropdown-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 2px 4px 8px;
}
.notice-dropdown-title{
  font-weight: 800;
  font-size: 14px;
}
.notice-close{
  border:none;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  color: var(--dd-subtext);
}
.notice-close:hover{ color:#111827; }

/* ここを修正 */
.header-menu {
  position: relative;
  display: inline-block;

  /* ▼ 追加：見た目のスキマは padding で作る */
  padding-bottom: 4px;
}

/* ドロップダウン本体 */
.header-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0;
  min-width: 220px;
  background: var(--dd-bg);
  color: var(--dd-text);
  border-color: var(--dd-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  padding: 4px 0;
  list-style: none;

  /* ★ 最前面にする */
  z-index: 9999;

  /* ★ JSで制御するためのデフォルト */
  display: none;
}

/* 吹き出しの三角（上にちょこっと出す） */
.header-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 24px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}

/* プロフィール行 */
.header-dropdown-profile-row {
  padding: 8px 12px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.header-profile-wrap {
  display: flex;
  align-items: center;
}

.header-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  flex-shrink: 0;
  object-fit: cover;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

/* 画像が無いときのプレースホルダ */
.header-profile-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-profile-avatar-placeholder i {
  font-size: 14px;
  color: #6b7280;
}

.header-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header-profile-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-profile-email {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ▼ プラン＋ステータス行用 */
.header-profile-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.95;
  margin-top: 2px;
}

.header-profile-plan-label {
  white-space: nowrap;
}

/* ステータス（● / !） */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.status-dot-active {
  background-color: #22c55e;  /* 緑の丸 */
}

.status-icon-inactive {
  font-size: 11px;
  color: #f97316;             /* オレンジの注意マーク */
}

/* メニュー項目は既存の .header-dropdown-item を利用 */
.header-dropdown-item {
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--dd-text);
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}
.header-dropdown-item:hover {
  background: #f3f4f6;
}

.header-dropdown-item.active {
  font-weight: 700;
  background: #e5f0ff;
}

/* ログアウトなど */
.header-dropdown-item.text-danger {
  color: #b91c1c;
}
.header-dropdown-item.text-danger:hover {
  background: #fee2e2;
}


.header-dropdown.is-open {
  display: block; /* 開いたときだけ表示 */
}

/* メニュー内の1行（ボタン） */
.header-dropdown-item {
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--dd-text);  
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}
.header-dropdown-item:hover {
  background: #f3f4f6;
}

/* 現在表示中のページを少し強調したいとき */
.header-dropdown-item.active {
  font-weight: 700;
  background: #e5f0ff;
}

/* ログアウトなど警告系 */
.header-dropdown-item.text-danger {
  color: #b91c1c;
}
.header-dropdown-item.text-danger:hover {
  background: #fee2e2;
}

.header-profile-email,
.sw-notice-asof,
.sw-notice-empty{
  color: var(--dd-subtext);
}

/* そのほか既存のテーブルやフォームなどのCSSは変えずに残す */
.table-container {
  max-height: 500px;
  overflow-y: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
}
table th {
  background-color: #243fa3; 
  color: white; 
  font-size: 14px; 
  text-align: center; 
  padding: 8px;            
}
thead tr {
  position: sticky; 
  top: 0;
  background-color: #243fa3;            
  z-index: 2;
}
.status-active { color: rgb(53,187,19); }
iframe {
  width: 75vw;
  height: 75vh;
  border: none;
}
.category-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 200px;
  max-height: 200px;
}
.summary-row { background-color: #f0f0f0; font-weight: bold; }
.highlight { background-color: #ffcccc; }
.radio-buttons-container { text-align: right; margin-bottom: 10px; }
.radio-buttons-container label { margin-left: 10px; }


table thead th {
  text-align: center;
}
table tbody td {
  text-align: right;
}   


.draggable {
  cursor: grab;
}

.drop-zone {
  margin-top: 1em;
  padding: 1em;
  border: 2px dashed #888;
  text-align: center;
  user-select: none;
}

.no-copy {
  background-color: #f9f9f9;
}

/* 選択範囲のハイライト */
.col-select-highlight {
  background-color: rgba(24, 49, 129, 0.3) !important;
}



/* ===========================
  ヘルプタブ用スタイル
=========================== */
/* — Help タブ用スタイル — */
.search-box {
  margin: 20px 0;
  display: flex;
}
.search-box input[type="text"] {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}
.search-box button {
  padding: 8px 16px;
  border: none;
  background: #183181;
  color: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

/* ===========================
   Help：サジェスト（予測候補）
   =========================== */
   .help-search-input-wrap{
    position: relative;
    flex: 1;
    display: flex; /* input の flex:1 を効かせる */
  }
  
  /* hidden 属性で非表示にする（ブラウザ標準でもOKだが明示） */
  .help-suggest[hidden]{
    display: none;
  }
  
  .help-suggest{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    z-index: 2600;         /* sidebar(2000)より上に */
    max-height: 320px;
    overflow: auto;
  }
  
  .help-suggest-item{
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  
  .help-suggest-item:hover,
  .help-suggest-item.is-active{
    background: #eef1fb; /* 既存の青系UIに寄せる */
  }
  
  .help-suggest-text{
    min-width: 0;
  }
  
  .help-suggest-title{
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
  }
  
  .help-suggest-meta{
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .help-suggest-arrow{
    color: #9ca3af;
    font-size: 12px;
    flex: 0 0 auto;
  }
  
  .help-suggest mark{
    background: #FFF7BF;
    padding: 0 2px;
    border-radius: 3px;
  }
  
  .help-suggest-empty{
    padding: 10px 12px;
    color: #6b7280;
  }

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 16px;
  margin-top: 16px;
}
.help-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.help-card .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.help-card .card-header i {
  font-size: 1.4em;
  color: #183181;
  margin-right: 8px;
}
.help-card h2 {
  margin: 0;
  font-size: 1.1em;
}
.help-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  flex: 1;
}
.help-card ul li {
  margin-bottom: 6px;
}
.help-card ul li a {
  color: #183181;
  text-decoration: none;
}
.help-card .card-footer {
  text-align: right;
}
.help-card .card-footer a {
  display: inline-block;
  padding: 6px 12px;
  background: #183181;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
}
/* ★ スマートチップ共通スタイル ★ */
.smart-chip {
display: inline-block;
padding: 4px 10px;
font-size: 0.9rem;
border: 1px solid #444444;        /* やや濃い枠線 */
border-radius: 1rem;             /* チップらしく丸みを付与 */
background-color: #b0b0b0;       /* 濃いグレー */
color: #ffffff;                  /* 白文字 */
cursor: default;
margin-right: 0.5rem;
outline: none; /* focus時に不要なアウトラインが出るなら外す */
}

/* フォーカス時のハイライト (参考) */
.smart-chip:focus {
box-shadow: 0 0 0 2px rgba(66,133,244,0.6);
border-color: #4285f4;
}        
/* ★ 欠品アラート用のスマートチップ (薄いピンク + 赤文字) */
.stockout-alert-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.9rem;
  border: 1px solid #FDBA74;       /* 薄いオレンジ枠 */
  border-radius: 1rem;
  background-color: #FFEDD5;       /* 薄いオレンジ背景 */
  color: orange;
  cursor: default;
  margin-right: 0.5rem;
  outline: none;
  display: none !important; /* 薄一時的に非表示 */
}

.stockout-alert-chip:focus {
  box-shadow: 0 0 0 2px rgba(255,165,0,0.4);  /* オレンジ系のフォーカスリング */
  border-color: #FFA500;                     /* フォーカス時の濃いオレンジ枠 */
}

/* ===== 工場用：即生産チップ ===== */
/* 既存の smart/stockout を触らず、新規だけ追加 */
.now-chip {
display: inline-block;
padding: 4px 10px;               /* 既存チップと同じスケール */
font-size: 0.9rem;
border-radius: 1rem;
background: #e53935;             /* 赤 */
color: #fff;
border: 1px solid #c62828;
cursor: default;
margin-right: 0.5rem;
white-space: nowrap;
vertical-align: middle;
line-height: 1.6;
}


/* ===== Skeleton Loader ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #e0e0e0;        /* 台座色 */
}

/* きらっと走るハイライト */
.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 100%
  );
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(150%);
  }
}

/* 最初に本体を隠す共通クラス */
.hidden {
  display: none !important;
}

/* Skeleton を自然にフェードアウトさせる（任意：無くても OK） */
.fade-out {
  animation: fadeOut 0.35s ease-out forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ============================================================
   販売レポート_全体（販売全体サマリー）
   - 既存の .dashboard-wrapper 系には乗せず、専用クラスで分離
   - style.css の末尾に追加
   ============================================================ */

   body[data-active-subtab="販売レポート_全体"] .sales-overview-page{
    width:95%;
    max-width:1600px;
    margin:0 auto;
    padding:8px 0 24px;
    display:flex;
    flex-direction:column;
    gap:16px;
    box-sizing:border-box;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-page *{
    box-sizing:border-box;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-filters{
    background:#fff;
    border:1px solid #e7ebf3;
    border-radius:18px;
    padding:14px 16px;
    box-shadow:0 10px 28px rgba(15, 23, 42, .05);
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-filter{
    min-width:150px;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-filter--button{
    min-width:auto;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-filters .form-label{
    font-size:12px;
    color:#64748B;
    font-weight:700;
    letter-spacing:.02em;
  }

  body[data-active-subtab="販売レポート_全体"] .sales-overview-kpis{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:12px;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-kpi{
    position:relative;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border:1px solid #dbe7f5;
    border-radius:18px;
    padding:16px 18px;
    box-shadow:0 12px 32px rgba(15, 23, 42, .06);
    min-height:110px;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-kpi::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    border-radius:18px 18px 0 0;
    background:linear-gradient(90deg, #2563EB 0%, #0EA5E9 48%, #14B8A6 100%);
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-kpi__label{
    font-size:12px;
    color:#667085;
    font-weight:700;
    letter-spacing:.02em;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-kpi__value{
    font-size:28px;
    line-height:1.15;
    font-weight:800;
    color:#0F172A;
    margin-top:8px;
    word-break:break-word;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-kpi__sub{
    font-size:12px;
    color:#6B7280;
    margin-top:6px;
    line-height:1.5;
  }

  body[data-active-subtab="販売レポート_全体"] .sales-overview-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "monthly colortrend"
      "sunburst platform";
    gap:14px;
    align-items:stretch;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-monthly{
    grid-area: monthly;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-sunburst{
    grid-area: sunburst;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-platform{
    grid-area: platform;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-colortrend{
    grid-area: colortrend;
  }

  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel{
    background:#fff;
    border:1px solid #e7ebf3;
    border-radius:20px;
    box-shadow:0 12px 32px rgba(15, 23, 42, .06);
    padding:14px 16px 12px;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    overflow:hidden;
  }
  

  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__title{
    margin:0;
    font-size:16px;
    font-weight:800;
    color:#0F172A;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__sub{
    margin-top:4px;
    font-size:12px;
    color:#64748B;
    line-height:1.5;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__body{
    min-width:0;
    min-height:340px;
    display:flex;
    flex-direction:column;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__body > *{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
  }
  
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-sunburst .sales-overview-panel__body,
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-platform .sales-overview-panel__body{
    min-height:420px;
  }

  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-sunburst .sales-overview-panel__body{
    align-items:center;
    justify-content:center;
  }

  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-sunburst .sales-overview-panel__body > *{
    width:100%;
    max-width:760px;
    margin-inline:auto;
  }
  
  /* Plotly を親いっぱいに伸ばす */
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__body .js-plotly-plot,
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__body .plot-container,
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__body .svg-container,
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__body .plotly-graph-div,
  body[data-active-subtab="販売レポート_全体"] .sales-overview-panel__body .plotly-graph-div .main-svg{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }
  @media (max-width: 1280px){
    body[data-active-subtab="販売レポート_全体"] .sales-overview-kpis{
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 900px){
    body[data-active-subtab="販売レポート_全体"] .sales-overview-grid{
      grid-template-columns:1fr;
    }
  
    body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-sunburst,
    body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-monthly{
      grid-row:auto;
      grid-column:auto;
    }
  
    body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-sunburst .sales-overview-panel__body,
    body[data-active-subtab="販売レポート_全体"] .sales-overview-panel.is-platform .sales-overview-panel__body{
      min-height:380px;
    }
  }
  
  @media (max-width: 640px){
    body[data-active-subtab="販売レポート_全体"] .sales-overview-kpis{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  
    body[data-active-subtab="販売レポート_全体"] .sales-overview-filter{
      min-width:calc(50% - 8px);
    }
  
    body[data-active-subtab="販売レポート_全体"] .sales-overview-filter--button{
      min-width:100%;
    }
  }
  body.embed-mode[data-active-subtab="販売レポート_全体"] .sales-overview-page{
    width:100%;
    max-width:none;
    padding:0 8px 16px;
  }
  
  body.embed-mode[data-active-subtab="販売レポート_全体"] .sales-overview-grid{
    min-width:0;
  }

/* ============================================================
   販売レポート_個別（商品別販売分析）
   ============================================================ */
   body[data-active-subtab="販売レポート_個別"] .sales-individual-page{
    width:95%;
    max-width:1600px;
    margin:0 auto;
    padding:8px 0 24px;
    display:flex;
    flex-direction:column;
    gap:16px;
    box-sizing:border-box;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-page *{
    box-sizing:border-box;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-filters,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-current-box,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-kpi{
    background:#fff;
    border:1px solid #e7ebf3;
    box-shadow:0 10px 28px rgba(15, 23, 42, .05);
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-filters{
    border-radius:18px;
    padding:14px 16px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-filter{
    min-width:150px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-filter--wide{
    min-width:380px;
    flex:1 1 380px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-filter--button{
    min-width:auto;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-filters .form-label{
    font-size:12px;
    color:#64748B;
    font-weight:700;
    letter-spacing:.02em;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-current-box{
    border-radius:18px;
    padding:16px 18px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-current-main{
    font-size:18px;
    font-weight:800;
    color:#0F172A;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-current-sub{
    margin-top:6px;
    font-size:12px;
    color:#64748B;
    line-height:1.6;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-kpis{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:12px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-kpi{
    position:relative;
    border-radius:18px;
    padding:16px 18px;
    min-height:110px;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-kpi::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    border-radius:18px 18px 0 0;
    background:linear-gradient(90deg, #2563EB 0%, #0EA5E9 48%, #14B8A6 100%);
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-kpi__label{
    font-size:12px;
    color:#667085;
    font-weight:700;
    letter-spacing:.02em;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-kpi__value{
    font-size:28px;
    line-height:1.15;
    font-weight:800;
    color:#0F172A;
    margin-top:8px;
    word-break:break-word;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-kpi__sub{
    font-size:12px;
    color:#6B7280;
    margin-top:6px;
    line-height:1.5;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-grid-top,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-grid-bottom{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    align-items:stretch;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel{
    border-radius:20px;
    padding:14px 16px 12px;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    overflow:hidden;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__title{
    margin:0;
    font-size:16px;
    font-weight:800;
    color:#0F172A;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__sub{
    margin-top:4px;
    font-size:12px;
    color:#64748B;
    line-height:1.5;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__body{
    min-width:0;
    min-height:320px;
    display:flex;
    flex-direction:column;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__body > *{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__body .js-plotly-plot,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__body .plot-container,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__body .svg-container,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__body .plotly-graph-div,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel__body .plotly-graph-div .main-svg{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-panel--table .sales-individual-panel__body{
    min-height:0;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-table-wrap{
    max-height:420px;
    overflow:auto;
    border:1px solid #e5e7eb;
    border-radius:12px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table th,
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table td{
    padding:10px 12px;
    border-bottom:1px solid #eef2f7;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table th{
    position:sticky;
    top:0;
    z-index:2;
    background:#183181;
    color:#fff;
    font-weight:700;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table td{
    background:#fff;
    color:#0F172A;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table tr.is-selected td{
    background:#EFF6FF;
    font-weight:700;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table .is-num{
    text-align:right;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-compare-table .is-center{
    text-align:center;
  }
  
  body[data-active-subtab="販売レポート_個別"] .sales-individual-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    color:#64748B;
    font-size:13px;
  }
  
  @media (max-width: 1280px){
    body[data-active-subtab="販売レポート_個別"] .sales-individual-kpis{
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 900px){
    body[data-active-subtab="販売レポート_個別"] .sales-individual-grid-top,
    body[data-active-subtab="販売レポート_個別"] .sales-individual-grid-bottom{
      grid-template-columns:1fr;
    }
  }
  
  @media (max-width: 640px){
    body[data-active-subtab="販売レポート_個別"] .sales-individual-kpis{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  
    body[data-active-subtab="販売レポート_個別"] .sales-individual-filter{
      min-width:calc(50% - 8px);
    }
  
    body[data-active-subtab="販売レポート_個別"] .sales-individual-filter--wide,
    body[data-active-subtab="販売レポート_個別"] .sales-individual-filter--button{
      min-width:100%;
      flex-basis:100%;
    }
  }
  
  body.embed-mode[data-active-subtab="販売レポート_個別"] .sales-individual-page{
    width:100%;
    max-width:none;
    padding:0 8px 16px;
  }

/* ===============================
 ① “販売レポート_全体” 専用レイアウト
 =============================== */
 
/* ＝＝＝＝＝ “販売レポート_全体” レイアウト専用 ＝＝＝＝＝ */
html,body{height:100%;margin:0;}

.dashboard-wrapper{
    display:flex;                 /* ←縦方向に：①フィルタ ②グラフ場 */
    flex-direction:column;
    min-height:calc(100vh - 94px);  /* 必要なら「最低高さ」だけ残す */
    overflow:hidden;
}

/* ——— フィルタバー ——— */
.filter-wrapper{ flex:0 0 46px; }

/* ——— グラフ４枚エリア ——— */
.graph-area{
    flex:1 1 auto;
    display:grid;                 /* ★ Grid に変更 */
    grid-template-columns:repeat(2, minmax(0, 1fr));/* 2列 */
    grid-template-rows:1fr 1fr;   /* 2行 */
    gap:24px;
    height:100%;           /* 余さず埋める */
}

/* 各セル内 — plotly を 100%×100% で入れるだけ */
.graph-cell{
    position:relative;
    width:100%;height:100%;
    min-width:0;           /* flex/grid のお約束 */
    min-height:0;
    display:flex;
}

/* Plotly div & svg を100% に */
.graph-cell .plotly-graph-div,
.graph-cell .plotly-graph-div .main-svg{
    width:100%!important;
    height:100%!important;
    display:flex;    
}
/* 5) Pie 下のフォームだけはセル内で高さを取らないよう調整 ---- */
.graph-cell .flex-fill{     /* = pie 図本体 */
    flex:1 1 auto;
    display:flex;
}
.graph-cell .flex-shrink-0{ /* 日付フォーム */
    flex:0 0 auto;
}

/* 右上セル: .flex-fill をフルに伸ばす ------------------------- */
.graph-col .flex-fill{
  flex:1 1 auto;      /* ← 高さ 100% で伸びる */
  display:flex;       /* ここも flex にして中身を埋める */
}

/* Plotly 本体をセル一杯に ----------------------------------- */
.graph-col .flex-fill .plotly-graph-div,
.graph-col .flex-fill .plotly-graph-div .main-svg{
  flex:1 1 100%;
  width:100%!important;
  height:100%!important;
  /* 余白ぎりぎりまで描画したい場合は下で調整 ↑ */
}


/* ★ 右上セル (=flex-column) 専用 ------------------------ */
.graph-cell.flex-column{                /* ← Pie を含むセル */
  flex-direction:column;
  min-height:0;                       /* 縮むことを許可   */
}
.graph-cell.flex-column>.flex-fill{     /* 円グラフ本体     */
  flex:1 1 0;                         /* ← 高さ 100 %     */
  min-height:0;
  display:flex;
}

/* 円グラフの Plotly div / svg を“完全”に 100 % ---------- */
.graph-cell.flex-column .plotly-graph-div,
.graph-cell.flex-column .plotly-graph-div .main-svg{
  flex:1 1 100%;
  width:100%!important;
  height:100%!important;
}

/* フッターフォームは必要な高さだけ確保 ------------------ */
.graph-cell.flex-column>.flex-shrink-0{ /* 期間フォーム部   */
  flex:0 0 auto;
}

/* ======== Pie セル専用 ========== */
.pie-cell .plotly-wrapper{
  position:relative;          /* オーバーレイの基準 */
  flex:1 1 100%;
  display:flex;               /* Plotly を伸ばす */
}
.pie-cell .plotly-wrapper .plotly-graph-div,
.pie-cell .plotly-wrapper .plotly-graph-div .main-svg{
  width:100%!important;
  height:100%!important;      /* ← 円グラフがセル高いっぱい */
  flex:1 1 100%;
}

/* 期間フォームを円グラフ中央へ重ねる ------------------ */
.date-overlay{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.85);   /* 半透明の白背景 */
  padding:6px 12px;
  border-radius:6px;
  box-shadow:0 0 4px rgba(0,0,0,.15);
  font-size:.9rem;
  line-height:1.2;
  z-index:10;                /* モードバーより手前 */
}



/* モードバーをやや縮小（任意） */
.modebar{transform:scale(.85);transform-origin:top right;}

/* 傾向分析タブ専用：高さ固定＆overflow:hidden を解除して縦スクロール可にする */
.dashboard-wrapper.trend-wrapper {
width: 90%;
max-width: 1400px;
margin: 0 auto;

display: block;               /* flex 解除 */
height: auto;                 /* 高さ固定を解除 */
min-height: calc(100vh - 94px);
overflow-y: auto;             /* 縦スクロール */
overflow-x: hidden;
}

/* グラフカードは最低高さだけ確保（中の Plotly が潰れないように） */
.trend-graph-card .card-body {
min-height: 320px;
}

/* ===========================
 並列グラフの Flex アイテム最小幅解除
 =========================== */
 .d-flex > .flex-fill {
  /* これがないと、子要素（Plotly）が内側の最小幅を持ったまま折り返します */
  min-width: 0 !important;
}


/* ===== Sales‑report filter bar : 可変センター ===== */
/* ---▼▼ 2025‑06‑18 改訂版 --- */
body{ --sidebar-w:250px;}                /* 展開時の幅を変数化 */
nav#sidebar.collapsed ~ main{
  --sidebar-w:60px;                    /* 畳み時に上書き */
}

.filter-wrapper{
  display:flex;
  justify-content:center;
  width:100%;
  position:relative;
  left:calc(var(--sidebar-w) / -2);    /* ★NEW: 画面中央を常に維持 */
}
.filter-wrapper form select,
.filter-wrapper form span,
.filter-wrapper form button{
  margin:0 4px;
}

/* ========== マイページ > 登録情報テーブル ========== */
.profile-table-wrapper{
  /* 幅：最大でも 600 px、かつ画面幅の 50 % */
  width: 50%;
  max-width: 600px;

  /* 表が詰まり過ぎないよう余白 */
  margin-top: 1.5rem;
}
.profile-table-wrapper table{
  width:100%;            /* ラッパの幅しか使わせない */
  table-layout:auto;    /* これがポイント！（＝強制的に固定レイアウト） */
}

.profile-table-wrapper th,
.profile-table-wrapper td{
  word-break:break-all;  /* 長い文字列を折り返す */
}

/* ---------- 登録情報テーブル：メールアドレスは改行させない ---------- */
.profile-table-wrapper td.nowrap{
  word-break: normal;   /* break-all を打ち消す        */
  white-space: nowrap;  /* 連続文字列でも折り返さない  */
}

/* 画像セル（右端） */
.profile-photo-cell{
  width:120px;                /* 横幅を確定 */
  text-align:center;
  vertical-align:middle;
  padding:4px;                /* ← パディングを小さく */
  }

/* 画像そのもの */
.profile-photo{
  max-width:100px;            /* 画像が列を広げない */
  height:auto;
  border-radius:50%;
  border:1px solid #ccc;
}


/* ==========================================================
 実績ベース発送推奨（在庫＝左／販売＝右）専用スタイル
 ========================================================== */
 #jr-wrap{ --grid:#e9ecef; --ink:#212529; --bg:#fff; --muted:#6c757d; --accent:#0d6efd; }
 #jr-wrap{ color:var(--ink); background:var(--bg); }
 
 /* カード／ラベル */
 #jr-wrap .card{ background:#fff; border:1px solid var(--grid); border-radius:12px; padding:14px; }
 #jr-wrap h2{ font-size:18px; margin:0 0 10px; }
 #jr-wrap .controls{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-bottom:8px; }
 #jr-wrap .chip{ display:inline-flex; gap:8px; align-items:center; padding:7px 10px; border:1px solid var(--grid); border-radius:999px; background:#fff; }
 #jr-wrap .chip input{ background:transparent; border:none; color:var(--ink); outline:none; width:88px; }
 #jr-wrap .radio{ display:flex; gap:10px; align-items:center; padding:6px 10px; border:1px solid var(--grid); border-radius:999px; background:#fff; }
 #jr-wrap .pill{ color:#0d6efd; font-size:12px; padding:3px 8px; border:1px solid #b6d4fe; border-radius:999px; margin-left:6px; background:#e7f1ff; }
 
  /* ---- 表（全体） ---- */
  #jr-wrap .table-wrap{ border:1px solid var(--grid); border-radius:10px; overflow:auto; }
  #jr-wrap .half{ max-height:50vh; } /* 画面半分 */
  #jr-wrap table{ width:100%; border-collapse:separate; border-spacing:0; min-width:980px; }
  #jr-wrap th, #jr-wrap td{ padding:9px 10px; border-bottom:1px solid var(--grid); }
  /* ← ここがポイント：th への白背景をやめ、tbody だけ白にする */
  #jr-wrap td{ background:#fff; }

  /* ヘッダーの整列：デフォルトは中央、必要な列だけ left/right を付与 */
  #jr-wrap table thead th{ text-align:center; }
  #jr-wrap table thead th.left{ text-align:left; }
  #jr-wrap table thead th.right{ text-align:right; }

  /* sticky 左3列（カテゴリ／カラーサイズ／合計） */
  #jr-wrap .sticky{ position:sticky; z-index:4; box-shadow:2px 0 0 var(--grid); }
  #jr-wrap .s1{ left:0;    min-width:180px; }
  #jr-wrap .s2{ left:180px; min-width:160px; }
  #jr-wrap .s3{ left:340px; min-width:110px; }
  /* thead の青は既存ルール（table th { background:#007bff } / thead tr）を使う */
  #jr-wrap th.sticky{ background:inherit; } /* ヘッダー左3列は行色を継承 */
  #jr-wrap td.sticky{ background:#fff; }

  /* ===== 1行目は必ず“横並び”に（狭いときは横スクロール） ===== */
  #jr-row-two{
  display:flex; flex-wrap:nowrap; gap:14px; overflow-x:auto; align-items:stretch;
  -webkit-overflow-scrolling:touch;
  }
  #jr-row-two > .card{
  flex:0 0 var(--jr-col-w, 560px);
  min-width:var(--jr-col-w, 560px);
  max-width:var(--jr-col-w, 560px);
  }
  @supports (grid-auto-flow: column){
  #jr-row-two{ display:grid; grid-auto-flow:column; grid-auto-columns:var(--jr-col-w,560px); }
  #jr-row-two > .card{ min-width:0; max-width:none; }
  }

  /* ===== 合計列のハイライト（ヘッダー＋明細） ===== */
  #jr-wrap table thead th.sum-head{
  background:#fff8c6 !important; color:#212529 !important;
  }
  #jr-wrap table tbody td.sum-cell{
  background:#fff8c6 !important; color:#212529 !important;
  }

  /* 計算結果テーブルのヘッダーも青ベース（合計は上の薄黄が優先） */
  #jr-wrap table.jr-result thead th{
  background:#183181; color:#fff;
  }
 
 /* KPI */
 #jr-wrap .kpi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
 #jr-wrap .tile{ padding:12px; border:1px solid var(--grid); border-radius:12px; background:#fff; }
 #jr-wrap .label{ color:var(--muted); font-size:12px; margin-bottom:4px; }
 #jr-wrap .value{ font-size:22px; font-variant-numeric:tabular-nums; }
 #jr-wrap .good{ color:#20c997; }
 #jr-wrap .bad { color:#dc3545; }
 
 /* ===== 1行目は必ず“横並び”に（狭いときは横スクロール） ===== */
 #jr-row-two{
   /* まず Flex で堅牢に */
   display:flex;
   flex-wrap:nowrap;
   gap:14px;
   overflow-x:auto;
   align-items:stretch;
   -webkit-overflow-scrolling:touch;
 }
 #jr-row-two > .card{
   /* 2枚見せを目標に列幅を固定（JS が --jr-col-w を上書き） */
   flex:0 0 var(--jr-col-w, 560px);
   min-width:var(--jr-col-w, 560px);
   max-width:var(--jr-col-w, 560px);
 }
 /* Grid が使える環境では Grid に切替（よりスムーズ） */
 @supports (grid-auto-flow: column){
   #jr-row-two{
     display:grid;
     grid-auto-flow:column;
     grid-auto-columns:var(--jr-col-w, 560px);
   }
   #jr-row-two > .card{ min-width:0; max-width:none; }
 }
 
 /* ===== 合計列のハイライト（ヘッダ＋明細） ===== */
 /* thead の青や .sticky の継承より強くするために高い優先度＋ !important */
 #jr-wrap table thead th.sum-head{ 
   background:#fff8c6 !important; 
   color:#212529 !important; 
 }
 #jr-wrap table thead th.sum-head.sticky{ 
   background:#fff8c6 !important; 
 }
 #jr-wrap table tbody td.sum-cell{ 
   background:#fff8c6 !important; 
   color:#212529 !important; 
 }
 #jr-wrap table tbody td.sum-cell.sticky{ 
   background:#fff8c6 !important; 
 }

 /* ==========================================================
 実績ベース発送推奨：summary を常に画面下に見せ、
 表パネルは画面高いっぱいにして内部のみ縦スクロール
 （単一 details(#jr-details) と 分割 details(#jr-details-stock/#jr-details-sales) の両対応）
 ========================================================== */

/* ▼ まとめてここで調整できます */
#jr-wrap{
  --jr-bottom-offset: 14px;   /* 画面下からの余白（販売summaryの基準） */
  --jr-stack-gap: 28px;       /* 在庫summaryと販売summaryの間隔 */
  --jr-sales-summary-h: 44px; /* 販売summaryの高さ（JSで実寸を上書き） */
}

/* 上側「結果テーブル」も内側スクロールにする（高さはJSで決定） */
#jr-wrap #jr-results-card #jr-result-wrap{
  overflow-y: auto;
}

/* 結果カードが summary に隠れないよう、少しだけ余白を確保（任意） */
#jr-wrap #jr-results-card{
  padding-bottom: .5rem;
}

/* ---------------- 単一 details（後方互換） ---------------- */
/* details 全体は “上：内容(1fr) / 下：summary(自動)” の2行グリッド。 */
#jr-wrap #jr-details{
  display: grid;
  grid-template-rows: 1fr auto;
  /* 高さは JS で計算して明示指定（画面高 － 先行コンテンツ高） */
  height: var(--jr-details-h, auto);
  min-height: 0;
}

/* summary を“画面下から少し上”に固定（iOS セーフエリアにも対応） */
#jr-wrap #jr-details > summary{
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--jr-bottom-offset, 14px));
  z-index: 5;
  background:#fff;
  border-top: 1px solid var(--grid, #e9ecef);
}

/* details の本文は自身の枠内だけ縦スクロール */
#jr-wrap #jr-details > .details-body{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------------- 分割 details：在庫 / 販売 ---------------- */
/* 販売の summary を最下部に固定 */
#jr-wrap #jr-details-sales > summary{
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--jr-bottom-offset));
  z-index: 12;
  background:#fff;
  border-top:1px solid var(--grid, #e9ecef);
}

/* 在庫の summary を“販売の少し上”に固定 */
#jr-wrap #jr-details-stock > summary{
  position: sticky;
  bottom: calc(
    env(safe-area-inset-bottom, 0px)
    + var(--jr-bottom-offset)
    + var(--jr-stack-gap)
    + var(--jr-sales-summary-h)
  );
  z-index: 11;
  background:#fff;
  border-top:1px solid var(--grid, #e9ecef);
}

/* 分割 details の本文は自身の枠内だけ縦スクロール（高さはJSで調整） */
#jr-wrap #jr-details-stock > .details-body,
#jr-wrap #jr-details-sales > .details-body{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------------- 伸長率列（確認用の折りたたみ） ---------------- */
/* 初期は非表示にする */
#jr-wrap #jr-result.hide-growth th.col-growth,
#jr-wrap #jr-result.hide-growth td.col-growth{
  display: none;
}

/* 伸長率列トグルの見た目（小さめのインライン details） */
#jr-wrap .jr-inline-toggle{ margin-bottom:.25rem; }
#jr-wrap .jr-inline-toggle > summary{
  list-style:none; cursor:pointer;
  font-size:12px; color:var(--muted, #6c757d);
}
#jr-wrap .jr-inline-toggle > summary::-webkit-details-marker{ display:none; }

/* === Mode toggle === */
.mode-toggle .btn-mode {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 14px;
  border: 1px solid #d1d5db; /* slate-300 */
  background: #fff;
  color: #374151;            /* gray-700 */
  transition: all .15s ease;
}
.mode-toggle .btn-mode .check { display: none; margin-right: 4px; }

/* active な側を強調、非アクティブは“ゴースト” */
.btn-mode-actual.active {
  background: #FDE68A;       /* amber-200 */
  border-color: #F59E0B;     /* amber-500 */
  color: #78350F;            /* amber-900 */
}
.btn-mode-forecast.active {
  background: #DBEAFE;       /* blue-100 */
  border-color: #3B82F6;     /* blue-500 */
  color: #1E3A8A;            /* blue-900 */
}
.mode-toggle .btn-mode.active .check { display: inline; }
.mode-toggle .btn-mode:not(.active):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* 表示モードのチップ（右側） */
.mode-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-weight: 700; border: 1px solid transparent;
  background: #fff; color: #111827;
}
.mode-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.mode-chip.actual   { border-color: #F59E0B55; background: linear-gradient(180deg,#fff,#FFF7ED); color: #7C2D12; }
.mode-chip.forecast { border-color: #3B82F655; background: linear-gradient(180deg,#fff,#EFF6FF); color: #1E3A8A; }

/* 在庫更新のチップ */
.update-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  background: #fff; border: 1px solid #e5e7eb; /* gray-200 */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-weight: 600; color: #111827;
}
.update-chip .icon     { opacity: .8; }
.update-chip .label    { opacity: .85; }
.update-chip .sep      { opacity: .4; }
.update-chip .time-text{ font-variant-numeric: tabular-nums; }

/* モードに応じてほんのり色味を変える */
.update-chip.actual   { border-color: #F59E0B33; background: linear-gradient(180deg,#fff,#FFF7ED); }
.update-chip.forecast { border-color: #3B82F633; background: linear-gradient(180deg,#fff,#EFF6FF); }

/* ── 2表を1画面に収める・約90%縮小のコンパクト表示 ───────────────── */
.dual-fit {
  /* 調整用の変数：必要あれば数字だけ変えればOK */
  --font-scale: 0.92;      /* ≒90%前後の縮小（0.90〜0.95で調整） */
  --table-vh: 42vh;        /* 各テーブルの最大高さ：画面高の約42%（見出し分を残す） */
  --cell-py: 6px;          /* セル上下パディング（小さめ） */
  --cell-px: 8px;          /* セル左右パディング（小さめ） */
  --img-w: 64px;           /* カテゴリ画像の幅（既存80px→縮小） */
}

.dual-fit h1 { margin: 6px 0 8px; font-size: 20px; }
.dual-fit h2 { margin: 8px 0 6px; font-size: 16px; }

/* 表自体を縮小（フォント/余白） */
.dual-fit table { font-size: calc(14px * var(--font-scale)); }
.dual-fit thead th,
.dual-fit tbody td { padding: var(--cell-py) var(--cell-px); }

/* カテゴリ画像を小さく */
.dual-fit .category-image { width: var(--img-w); height: auto; }

/* 1画面に収める：各テーブルに固有の最大高さを与え、内部スクロールにする */
.dual-fit .table-container {
  max-height: var(--table-vh);
  overflow: auto;           /* 横も縦も必要ならスクロール */
}

/* 余白を詰める */
.dual-fit .divider { margin: 10px 0 12px; }
.dual-fit .subtle { margin-bottom: 12px; }

/* 見出し行の高さが出過ぎる場合の抑制（任意） */
.dual-fit thead th { line-height: 1.2; }
  /* 画像をセル幅いっぱいに。縦はアスペクト維持で自動 */
  .container.dual-fit .category-image{
  width: 100% !important;   /* セルの横幅にフィット */
  height: auto;             /* 縦は比率維持 */
  max-height: none;         /* 以前の制限を無効化 */
  display: block;
  }

  /* 見やすさ: カテゴリセルの中を縦積み配置（任意） */
  .container.dual-fit .category-cell {
  vertical-align: top;
  }  


/* 供給計算明細：2ペインを常に横並びにする */
.two-plot-row{ 
  flex-wrap: nowrap !important;       /* 折り返さない */
  overflow-x: auto;                   /* 画面が狭い時は横スクロール */
  gap: 12px;
}
.two-plot-row .col-6{
  min-width: 620px;                   /* つぶれ防止。必要に応じて調整 */
}
.plot-wrap{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 6px;
}

/* 発送シミュレーション用 */
.panel-blue  { background: #eef7ff; border: 1px solid #e3f0ff; border-radius: 8px; padding: 10px; }
.panel-green { background: #eaffea; border: 1px solid #d6f5d6; border-radius: 8px; padding: 10px; }

.graph-360 { height: 360px; }
.graph-340 { height: 340px; }

.nowrap { white-space: nowrap; }
.minw-90 { min-width: 90px; }

/* デバッグ出力 */
.sim-debug {
white-space: pre-wrap;
font-size: 12px;
background: #f7f7f7;
padding: 8px;
border: 1px solid #ddd;
border-radius: 6px;
margin-top: 8px;
}
/* ===========================
 在庫サマリー表(2段ヘッダー) 固定＋前面化（ページスクロール基準）
 =========================== */

/* ❶ ラッパー：スクロールは持たせない／前面の新しい層を作る */
#stock-summary-wrap{
/* 内部スクロールは作らない */
/* max-height: 520px;  不要 */
/* overflow: auto;     不要 */

border: 1px solid #ddd;
border-radius: 8px;

/* フロー図より前面に出すための層（stacking context） */
position: relative;
isolation: isolate;
z-index: 5;
background: transparent;
}

/* ❷ この領域に限り、既存の thead sticky 指定をリセット（競合回避） */
#stock-summary-wrap thead tr{
position: static !important;
top: auto !important;
z-index: auto !important;
background: transparent !important;   /* ★ 青い帯を消す */
}

/* ❸ stickyが効く前提のテーブル設定（collapseをやめる＆幅つぶれ防止） */
#stock-summary-wrap table{
border-collapse: separate !important;
border-spacing: 0;
width: 100%;
table-layout: fixed;
}

/* ❹ 1段目ヘッダー：ページ上部固定バーの高さ分だけ下げて固定
    （--app-header-h はJSでセット。未設定なら 0px） */
#stock-summary-wrap table.sticky-header thead th{
position: sticky;
background: #fff;                  /* 透け防止 */
box-shadow: 0 1px 0 rgba(0,0,0,.08);
top: var(--app-header-h, 0px);
z-index: 1000;                     /* 図より前面 */
font-weight: 600;
line-height: 1.2;
}

/* ❺ 1段目を最前面に */
#stock-summary-wrap table.sticky-header thead tr:first-child th{
top: var(--app-header-h, 0px) !important;
z-index: 1001 !important;
}

/* ❻ 2段目ヘッダー：1段目の実高さも加算（--thead-row1-h はJSでセット） */
#stock-summary-wrap table.sticky-header thead tr:nth-child(2) th{
top: calc(var(--app-header-h, 0px) + var(--thead-row1-h, 38px)) !important;
z-index: 1000 !important;
}

/* ===========================
 フロー図(Plotly)を背面に回す
 =========================== */
.js-plotly-plot,
.plotly-graph-div,
.plot-container,
.svg-container{
position: relative !important;
z-index: 0 !important;   /* 表ヘッダーより背面に固定 */
}

/* ★ 在庫サマリー表ヘッダーを上に詰める微調整 */
#stock-summary-wrap { --thead-nudge: -52px; }  /* 数値は好みで -6px ～ -20px など */

#stock-summary-wrap table.sticky-header thead tr:first-child th{
top: calc(var(--app-header-h, 0px) + var(--thead-nudge, 0px)) !important;
}
#stock-summary-wrap table.sticky-header thead tr:nth-child(2) th{
top: calc(var(--app-header-h, 0px) + var(--thead-row1-h, 38px) + var(--thead-nudge, 0px)) !important;
}
/* ========================
 発送予定タブ：100vh内に収める統合CSS（index変更不要）
 ======================== */

/* ヘッダー高（必要なら実寸に調整） */
:root { --header-h: 64px; }

/* 外枠：中央寄せ（上下余白は最小に） */
.shipment-outer{
display:flex;
justify-content:center;
padding:8px 0;                 /* 小さめに固定して高さ確保 */
box-sizing:border-box;
margin-top: -8px;  /* ★追加：headerの影響を打ち消して上詰め */
}

/* 中身：画面幅-サイドバーの90%で、縦flex＋高さ固定（100svh基準） */
.shipment-scale{
/*width: calc((100vw - var(--sidebar-w, 250px)) * 0.90);*/
width: calc(100vw - var(--sidebar-w, 250px));  /* ★フル幅に */
max-width: 1800px;
box-sizing: border-box;
display: flex;
flex-direction: column;
/* 必ずビューポート内に収める（外枠8+8pxとヘッダー分を差し引く） */
/* height: calc(100svh - var(--header-h, 64px) - 16px); ← 削除 */
/* min-height: calc(100svh - var(--header-h, 64px) - 16px); */
/* 外overflow: clip;                 側スクロール禁止（はみ出しを切る） */
overflow: visible;
padding-right: 16px;   /* ★右にクッションを作る */
}

.shipment-scale .table-container{
padding-right: 8px;   /* ★ 追加（スクロールバー＆境界分の逃げ） */
}

/* 直下の子は縮められるように（flexのデフォ最小高autoを無効化） */
.shipment-scale > * { min-height: 0; }

/* トグル（実績/予測）: ヘッダーに当たらないよう、ほんの少し下げる */
.shipment-scale .mode-toolbar{
margin-top: 4px;               /* ←必要に応じて 2〜6px で微調整 */
margin-bottom: 8px;
position: relative;
z-index: 2;
}

.mode-toolbar{
  margin-top: 4px;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;      /* ★ボタンとバッジを同じ行に維持 */
}

/* 左側（トグル + カテゴリ）を横一列固定 */
.mode-toolbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;        /* ★折り返し禁止 */
  white-space: nowrap;      /* ★文字も折らない */
}

/* カテゴリwrapも横一列固定 */
.category-filter-wrap{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;        /* ★折り返し禁止 */
  white-space: nowrap;
}

/* Bootstrapのselectが落ちないように、幅を固定しつつ縮みも制御 */
.category-filter{
  display: inline-block;    /* ★block落ち防止 */
  width: 220px;             /* ★ここが効く（必要なら 180-260で調整） */
  min-width: 180px;
  max-width: 260px;
  border-radius: 999px;
  font-weight: 700;
  flex: 0 0 auto;           /* ★flexでも縮みすぎない */
}

/* 画面が狭い時だけ少し縮める */
@media (max-width: 900px){
  .category-filter{ width: 180px; min-width: 160px; }
}

.mode-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  background: #fff;
  color: #111827;
  white-space: nowrap;     /* ★中で改行させない */
}


/* ------------- グラフ（現行indexのまま） ------------- */
/* 高さはclamp：最小320px～最大38svh、背面固定で被りなし（トグル余白ぶん少し控えめ） 
#factory-graph,#gb-graph,#fba-graph,#rakuten-graph{
width: 100% !important;
height: clamp(320px, 38svh, 40svh) !important; /* ★ 34→33svh / 40→38svh に微調整 
margin-bottom: 12px !important;
position: relative;
z-index: 0;
overflow: visible !important;
}*/

#factory-graph,#gb-graph,#fba-graph,#rakuten-graph{
  width: 100% !important;
  height: 100% !important;     /* ← ここを100%に */
  margin-bottom: 12px !important;
  position: relative;
  z-index: 0;
  overflow: visible !important;
}

/* ------------- 在庫更新チップ ------------- */
.update-chip{ position: relative; z-index: 2; }

/* ------------- 表エリア ------------- */
/* 残り高さを受け持つ・内側だけスクロール・スクロールバー分の溝を確保して横ズレ防止 */
.shipment-scale .table-container,
.shipment-scale .overflow-x-auto{
flex: 1 1 auto;                 /* 残り高をすべて受ける */
max-height: 90vh;             /* ★ 表自体は画面の約 60% までにして中スクロール */
min-height: 320px;
overflow: auto;
box-sizing: border-box;
padding: 0 12px 4px 0;
position: relative;
z-index: 2;
/*scrollbar-gutter: stable both-edges;   チャートと列幅の横ズレ防止 */
}

/* 画面基準stickyを無効化 →  */
/* ✅ stickyヘッダーは「必ず塗る」＋「z-indexを上げる」 */
.shipment-scale .table-container thead th,
.shipment-scale .overflow-x-auto thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;

  /* ★透け防止：必ず不透明で塗る（基本は濃紺） */
  background-color: #243fa3 !important;
  color: #fff !important;

  /* ちらつき防止の保険（任意だが効くこと多い） */
  background-clip: padding-box;
}

/* ✅ 2段ヘッダーの場合も「塗り」を維持（黄色系も既存 !important が勝つ） */
.factory-enabled thead tr:first-child th,
.gb-table-top    thead tr:first-child th,
#fba-table       thead tr:first-child th,
.rakuten-enabled thead tr:first-child th{
  position: sticky !important;
  top: 0 !important;
  z-index: 22 !important;
}

.factory-enabled thead tr:nth-child(2) th,
.gb-table-top    thead tr:nth-child(2) th,
#fba-table       thead tr:nth-child(2) th,
.rakuten-enabled thead tr:nth-child(2) th{
  position: sticky !important;
  top: var(--sw-thead-row1-h) !important;
  z-index: 21 !important;
}
/* colspan 見出しが“消えたように見える”対策：最前面化 */
th.next-recommend-group{
  z-index: 30 !important;
}



/* 最後の要素のmarginで1～2pxはみ出すのを抑制（保険） */
.shipment-scale > *:last-child{ margin-bottom: 0; }

/* ===== （任意）shipment-stack を使う場合のサポート（indexに追加した時のみ有効） ===== */
.shipment-stack{
display: grid;
grid-template-rows:
  minmax(360px, 40svh)  /* グラフ：最小360px～最大32svh（必ず収まる） */
  auto                  /* 在庫更新チップ */
  minmax(340px, 1fr);   /* 表：最小340px、残り全部 */
gap: 10px;
}
.shipment-stack .graph-block{ height:100%; position:relative; z-index:0; overflow:hidden; }

/* ===== 発送予定：左に全体フロー（mini）、右に各ページグラフ ===== */
.graph-with-flow{
  height:100%;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 10px;
}

.flow-panel{
  height:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.flow-panel__head{
  padding:8px 10px;
  border-bottom:1px solid #e5e7eb;
  font-size:12px;
  font-weight:700;
  color:#374151;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.flow-panel__sub{
  font-size:11px;
  font-weight:600;
  color:#6b7280;
}

#flow-graph-mini{
  width:100% !important;
  height:100% !important;
  flex:1 1 auto;
}

#flow-graph-mini .plotly-graph-div{
  width:100% !important;
  height:100% !important;
}

.main-graph-panel{
  position:relative;
  height:100%;
  overflow:hidden;
}

.main-graph-panel .graph-empty-message{
  margin:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  font-weight:600;
  text-align:center;
  padding: 0 10px;
}

@media (max-width: 860px){
  .graph-with-flow{
    grid-template-columns: 1fr;
    grid-template-rows: 240px 1fr;
  }
  .flow-panel{
    min-height:240px;
  }
}

.shipment-stack #flow-graph,
.shipment-stack #factory-graph,
.shipment-stack #gb-graph,
.shipment-stack #fba-graph,
.shipment-stack #rakuten-graph{ width:100% !important; height:100% !important; }

/* 工場：左フロー / 右グラフ を 50:50 にする */
.shipment-stack .graph-split{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* ★半々 */
  gap: 10px;
  height: 100%;
  min-width: 0;
}

/* 中身がはみ出して幅計算を壊さない保険 */
.shipment-stack .graph-split > .graph-block{
  min-width: 0;
}
.shipment-stack .graph-split > .graph-block{
  height:100%;
}
.shipment-stack .update-block{ position:relative; z-index:2; }
.shipment-stack .table-container{
min-height: 340px;
overflow: auto;
padding-bottom: 4px;
box-sizing: border-box;
position: relative;
z-index: 2;
scrollbar-gutter: stable both-edges;
}
.shipment-stack .table-container thead th{
position: sticky !important; top:0; z-index:3; background: inherit;
}


/* 1) 全体ダッシュボードは1段目を内容高さに合わせる */
.dashboard-page .shipment-stack{
  grid-template-rows:
    auto
    auto
    auto !important;
  row-gap: 16px;
}

/* 2) フロー図は行の高さに100%追随（初回から縦が潰れない） */
.dashboard-page .shipment-stack #flow-graph{
height: 100% !important;
}


/* ============================================================
   GBの表を他PF(Amazon/Rakuten/工場)と同じ見た目に合わせる
   ============================================================ */
.gb-table-top{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;     /* Amazon/Rakutenと同等の感触に */
  font-size: 0.95rem;     /* 体感を合わせる（必要なら 1.0rem に） */
}
.gb-table-top th, .gb-table-top td{
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

/* overflow-x-auto クラスが未定義だった場合の保険 */
.overflow-x-auto{ overflow-x: auto; }

/* ダッシュボードだけ少しだけ上下配分を変える（表を小さくして下の切れ防止） */
.dashboard-page #flow-graph{
height: clamp(320px, 31svh, 36svh) !important;   /* ★ダッシュボード用: ほんの少し控えめ */
}

.dashboard-page .table-container{
  height: calc(100svh - var(--app-header-h, 0px) - 16px) !important;
  max-height: calc(100svh - var(--app-header-h, 0px) - 16px) !important;
  overflow: auto !important;

  min-height: 320px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}



/* ============================================================
 供給計算
 ============================================================ */
/* 供給計算明細：発送予定と同じ“90%幅＋1画面内スクロール”レイアウト */
.supply-outer{
display:flex;
justify-content:center;
padding:8px 0;
box-sizing:border-box;
margin-top:-8px;                     /* header 分を少し打ち消す */
}

.supply-scale{
width: calc((100vw - var(--sidebar-w, 250px)) * 0.90);
max-width: 1800px;
box-sizing:border-box;
display:flex;
flex-direction:column;
/* 発送予定と同じく、1画面内に収める */
height: calc(100svh - var(--header-h, 64px) - 16px);
}

/* 中身はここでだけ縦スクロールさせる */
.supply-inner{
flex:1 1 auto;
min-height:0;
overflow:auto;
}

/* ============================
* 販売レポート_傾向分析 専用レイアウト
* ============================ */

/* 横幅 90%・中央寄せ */
.trend-wrapper {
width: 90%;
max-width: 1400px;
margin: 0 auto;
}

/* Plotly は .plotly-graph-div に height:100% が入っているので、
 親カード側で最低限の高さを持たせておく */
.trend-graph-card .card-body {
min-height: 320px;      /* 好みで 280〜400px ぐらいに調整可 */
}

/* スマホなど狭い画面では少し低め */
@media (max-width: 767.98px) {
.trend-graph-card .card-body {
  min-height: 260px;
}
}

/* =====================================
* 表示設定：？アイコンのポップアップ
* ===================================== */

/* ？アイコン本体 */
.page-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
width: 18px;
height: 18px;
border-radius: 999px;
background: #e5e7eb;          /* 灰色の丸 */
color: #374151;
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: help;
position: relative;
}

/* ポップアップ本体 */
/* ポップアップ本体 */
.page-info-tooltip {
  position: absolute;
  top: 120%;
  right: 0;          /* 右寄せして画面からはみ出しづらく */
  left: auto;
  margin-top: 4px;

  /* ★ 枠を少し広めにして、テキストがちゃんと収まるように */
  max-width: 340px;
  padding: 8px 12px;

  border-radius: 8px;
  background: #111827;
  color: #f9fafb;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

  /* ★ ナビ (#sidebar: z-index 2000) より前面に */
  z-index: 3000;

  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;

  /* ★ はみ出さずに折り返す用の保険 */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ホバーで表示 */
.page-info-icon:hover .page-info-tooltip {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

/* タイトル・説明 */
.page-info-tooltip-title {
font-weight: 700;
margin-bottom: 4px;
font-size: 0.95rem;
}
.page-info-tooltip-desc {
font-size: 0.84rem;
line-height: 1.5;
margin-top: 4px;
}

/* ビジュアル枠 */
.page-info-tooltip-visual {
background: #020617;
border-radius: 4px;
padding: 6px;
margin-top: 2px;
}

/* ---- グラフっぽいアイコン ---- */
.page-info-visual-graph {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: flex-end;
gap: 3px;
height: 42px;
}
.page-info-visual-graph span {
display: block;
border-radius: 2px 2px 0 0;
background: #22c55e;
}
.page-info-visual-graph span:nth-child(1) { height: 30%; }
.page-info-visual-graph span:nth-child(2) { height: 60%; }
.page-info-visual-graph span:nth-child(3) { height: 45%; }
.page-info-visual-graph span:nth-child(4) { height: 75%; }

/* ---- 表っぽいアイコン ---- */
.page-info-visual-table {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.page-info-visual-table span {
display: block;
height: 9px;
border-radius: 2px;
background: #4b5563;
}
/* 1行目（ヘッダー）だけ少し明るく */
.page-info-visual-table span:nth-child(-n+4) {
background: #6b7280;
}
/* ポップアップ内の Plotly プレビュー領域 */
.page-info-tooltip-visual {
margin-top: 2px;
}

.page-info-preview-graph {
width: 100%;
height: 160px;      /* ツールチップの高さ */
}

/* ============================
 ？アイコンのツールチップ
============================ */

/* ？アイコン本体 */
.page-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
width: 18px;
height: 18px;
border-radius: 999px;
background: #e5e7eb;          /* 灰色の丸 */
color: #374151;
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: help;
position: relative;
}

/* ポップアップ本体 */
/* ヘッダー説明ツールチップ（縦長防止版） */
.page-info-tooltip {
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);  /* ★ 左右中央から出す */
  margin-top: 4px;

  /* ★ 横幅の最小・最大を設定（これが重要） */
  min-width: 160px;
  max-width: 280px;

  padding: 8px 12px;
  border-radius: 8px;

  background: #111827;
  color: #f9fafb;

  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 3000;

  opacity: 0;
  pointer-events: none;
  white-space: normal;        /* ★ 自然に横へ折り返す */
  overflow-wrap: break-word;  /* ★ はみ出し防止 */

  transition: opacity .15s ease-out, transform .15s ease-out;
}

/* ホバー時の表示 */
.page-info-icon:hover .page-info-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ツールチップ内タイトル・本文 */
.page-info-tooltip-title {
font-weight: 700;
margin-bottom: 4px;
font-size: 0.95rem;
}
.page-info-tooltip-desc {
font-size: 0.84rem;
line-height: 1.5;
margin-top: 2px;
word-break: break-word;
}


/* AmazonFBA グラフ用：ホーム（リセット）ボタン */
.fba-reset-btn{
  position: absolute;
  top: 8px;
  left: 8px;                    /* ★ 左上に固定 */
  z-index: 5;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.fba-reset-btn:hover{
  background-color: #f3f4f6;
}

/* Tooltip が左ナビの上に出るように z-index を調整 */
.tooltip{
  z-index: 3000;
}

.btn-mode-forecast,
.btn-mode-actual {
    pointer-events: auto !important;   /* active でも hover 有効 */
}

.btn-mode-forecast:hover,
.btn-mode-actual:hover {
    z-index: 4000 !important;          /* Tooltip がナビより上に出る */
}

.smart-chip.clickable,
.stockout-alert-chip.clickable {
  cursor: pointer;
  text-decoration: underline;
}

/* 即発送（行の右側セル） */
td.immediate-ship-right {
  background-color: #FEE2E2;   /* 薄い赤 */
  color: #B91C1C;              /* 濃い赤文字 */
}

/* 中の小さい文字も赤系に */
td.immediate-ship-right small,
td.immediate-ship-right span {
  color: #B91C1C;
}

.top-dashboard-wrapper {
    width: 92%;
    max-width: 1400px;
    margin: 16px auto 32px;
}
.top-dashboard-section {
    margin-bottom: 32px;
}
.top-dashboard-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.top-dashboard-asof {
    font-size: 12px;
    color: #666;
}
.top-dashboard-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.top-dashboard-figure {
    flex: 2;
    min-width: 0;
}
.top-dashboard-comment {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
    border-left: 1px solid #ddd;
    padding-left: 16px;
}
.top-dashboard-comment p {
    margin: 0 0 4px;
}
@media (max-width: 991.98px) {
    .top-dashboard-row {
        flex-direction: column;
    }
    .top-dashboard-comment {
        border-left: none;
        border-top: 1px solid #ddd;
        padding-left: 0;
        padding-top: 12px;
    }
}

.dashboard-comment-box {
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;  /* linebreaksbr を使うのでこれでOK */
}

/* ============================
   次回推奨（全発送ページ共通：工場/GB/Amazon/楽天）
   ============================ */

/* ヘッダー：既存 table th の青(#243fa3)より強くする */
th.next-recommend{
  background-color: #FFF7BF !important;
  color: #333 !important;
  font-weight: 800 !important;
}

/* セル */
td.next-recommend{
  background-color: #FFFBE5 !important;
  color: #111827 !important;
  font-weight: 700;
}

/* 日付＝中央寄せ、数量＝右寄せ */
td.next-recommend.next-date{
  text-align: center !important;
  white-space: nowrap;
}
td.next-recommend.next-qty{
  text-align: right !important;
}

/* 即（即発送/即生産）の強調 */
.next-recommend.highlight{
  background-color: #ffcccc !important;
  color: #B91C1C !important;
}

/* ============================================================
   次回生産推奨（黄色ブロックの見た目改善）
   ============================================================ */

/* 共通：黄色エリアの背景 */
th.next-recommend-group,
th.next-recommend,
td.next-recommend {
  background-color: #FFF7C2 !important;
}

/* ---- 1) 外枠だけをきれいに出す ---- */
/* 左端 */
th.next-recommend-group,
th.next-recommend.next-date,
td.next-recommend.next-date {
  border-left: 2px solid #E5C100 !important;
}

/* 右端 */
th.next-recommend.next-qty,
td.next-recommend.next-qty {
  border-right: 2px solid #E5C100 !important;
}

/* 上端（グループ見出し） */
th.next-recommend-group {
  border-top: 2px solid #E5C100 !important;
}

/* 下端（データ行の最後） */
tbody tr:last-child td.next-recommend {
  border-bottom: 2px solid #E5C100 !important;
}

/* ---- 2) 内側の罫線を弱める ---- */
/* グループ見出しと下段の間（横線） */
th.next-recommend-group {
  border-bottom: 1px solid #F1E3A0 !important;
}

/* 依頼日 ↔ 依頼量 の縦線を弱く */
th.next-recommend.next-date,
td.next-recommend.next-date {
  border-right: 1px solid #F1E3A0 !important;
}

/* 通常セルの上下罫線は極薄に */
td.next-recommend {
  border-top: 1px solid #F6EDC8 !important;
  border-bottom: 1px solid #F6EDC8 !important;
}

/* ---- 3) 文字まわりを上品に ---- */
th.next-recommend-group {
  font-weight: 900;
  color: #7A5A00 !important;
  letter-spacing: 0.04em;
}

th.next-recommend {
  font-weight: 700;
  color: #6B5500 !important;
}

td.next-recommend {
  color: #3A3A3A !important;
}



/* ============================================================
   次回生産推奨：2段ヘッダー（rowspan/colspan）対応
   - 1段目/2段目の sticky が重ならないようにオフセット
   - 既存の shipment-scale の sticky 指定より後ろに置いて上書きする
   ============================================================ */

/* 1段目の高さ（必要なら微調整。まずは 38px で固定） */
:root{ --sw-thead-row1-h: 38px; }

/* 対象：発送予定の4テーブル（工場/GB/Amazon/楽天） */
.factory-enabled thead tr:first-child th,
.gb-table-top    thead tr:first-child th,
#fba-table       thead tr:first-child th,
.rakuten-enabled thead tr:first-child th{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}

.factory-enabled thead tr:nth-child(2) th,
.gb-table-top    thead tr:nth-child(2) th,
#fba-table       thead tr:nth-child(2) th,
.rakuten-enabled thead tr:nth-child(2) th{
  position: sticky !important;
  top: var(--sw-thead-row1-h) !important;
  z-index: 4 !important;
}

/* グループ見出し（次回生産推奨） */
th.next-recommend-group{
  background-color: #FFF2A6 !important;
  color: #111827 !important;
  font-weight: 900 !important;
}

/* 下段（依頼日/依頼量） */
th.next-recommend{
  background-color: #FFF7BF !important;
  color: #111827 !important;
  font-weight: 800 !important;
}





/* =========================
   トップページ：お知らせ
   ========================= */
   .notice-area{
    margin: 14px 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
  }
  .notice-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 8px;
  }
  .notice-title{
    font-weight: 800;
    font-size: 16px;
  }
  .notice-meta{
    font-size: 12px;
    opacity: .75;
    white-space: nowrap;
  }
  .notice-body{
    font-size: 14px;
    line-height: 1.7;
  }
  
  /* レベル別（必要なら色を微調整） */
  .notice-info{ border-left: 6px solid #2f80ed; }
  .notice-warn{ border-left: 6px solid #f2c94c; }
  .notice-urgent{ border-left: 6px solid #eb5757; }
  
  /* =========================
     トップページ：帯（セクション見出し）
     ========================= */
  .section-band{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 10px 14px;
    border-radius: 12px;
    margin: 6px 0 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: #eef1fb;
  }
  .section-title{
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .02em;
  }
  
  /* バリエーション（販売/在庫で帯色を変える） */
  .section-band-sales{ background:#f3f7ff; }
  .section-band-inv{   background:#f7fff3; }
  .section-band-warn{  background:#fff9e8; }
  
  /* トップの box も余白統一（inline style を減らす） */
  .top-box{ padding:16px; margin-bottom:16px; }
  .top-box-body{ margin-top: 4px; }
  
  /* =============================
   通知設定（モール在庫切れ通知）
   表が長くても見やすくする
============================= */
.notify-settings .notify-table-wrap {
  max-height: 520px;        /* ここは好みで調整OK */
  overflow: auto;           /* 縦も横もスクロール */
  padding: 8px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
}

.notify-settings .notify-table {
  margin-bottom: 0;
}

.notify-settings .notify-table th,
.notify-settings .notify-table td {
  padding: 10px 12px;       /* 余白増やす */
  vertical-align: middle;
}

/* ===== 通知設定：? + 予測/実績 列はコンパクト ===== */
.notify-settings .notify-compact {
  width: 72px;                  /* ★ 列を細く固定 */
  min-width: 72px;
  max-width: 72px;
  text-align: center;
  white-space: normal;          /* ★ 改行を許可 */
}

/* 中身は縦積み */
.notify-settings .notify-compact .stack {
  display: flex;
  flex-direction: column;       /* ★ 縦並び */
  align-items: center;
  gap: 4px;
}

/* ? ボタン */
.notify-settings .notify-compact .help-dot,
.notify-settings .notify-compact .page-info-icon {
  margin: 0;                    /* 横ズレ防止 */
}

/* 切替UIを小さく */
.notify-settings .notify-compact select,
.notify-settings .notify-compact button {
  font-size: 11px;
  padding: 2px 4px;
}


.notify-settings .notify-table tbody tr:hover {
  background: rgba(0,0,0,.02);
}

.notify-settings .notify-table input[type="number"] {
  max-width: 140px;
}

/* 追加：クリックできるヘッダー（実績/予測 切替） */
.notify-settings .notify-table thead th.js-sales-toggle{
  cursor: pointer;
  user-select: none;
}

/* 追加：通知時刻チップ（Bootstrap badge 内の×を押しやすく） */
.notify-settings #notify-time-chips .js-remove-time{
  line-height: 1;
}

/* ===== 通知設定：選択系は改行させない ===== */
.notify-settings .notify-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;          /* ★ 改行させない */
}

.notify-settings .notify-inline label {
  white-space: nowrap;          /* ★ ラベルも1行固定 */
  font-size: 12px;
}

.notify-settings .notify-inline select {
  white-space: nowrap;
  min-width: 120px;
}

/* 通知設定：theadを縦積みできるように */
.notify-settings .notify-th-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* タイトル（平均販売数/日 など）は1行固定 */
.notify-settings .notify-th-title{
  white-space: nowrap;
}

/* 下段（ ? と 実績/予測バッジ ）は横並び */
.notify-settings .notify-th-sub{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}




  /* =========================
   ヘッダー系ドロップダウン：テーマ変数
   ========================= */
:root{
  --dd-bg: #ffffff;
  --dd-text: #111827;
  --dd-subtext: #6b7280;
  --dd-border: rgba(0,0,0,.12);
  /* ★追加：ヘッダー右上ボタン（ベル/マイページ/問い合わせ）用 */
  --hb-text: #ffffff;
  --hb-border: rgba(255,255,255,.95);
  --hb-hover-bg: #ffffff;
  --hb-hover-text: #343a40;  
}

/* Amazon（濃紺ヘッダー想定：黒より少し柔らかく） */
.theme-amazon{
  --dd-bg: #ffffff;
  --dd-text: #1f2937;
  --dd-subtext: #6b7280;
  --dd-border: rgba(0,0,0,.15);

}

/* 中間倉庫（茶/黄系想定：暖色に寄せる） */
.theme-gb{
  --dd-bg: #fffdf8;
  --dd-text: #3f3a2a;
  --dd-subtext: #7a6f55;
  --dd-border: rgba(0,0,0,.18);

  --hb-text: #3f3a2a;
  --hb-border: rgba(63,58,42,.45);
  --hb-hover-bg: rgba(63,58,42,.08);
  --hb-hover-text: #3f3a2a;    
}

/* 楽天（赤系想定：少し赤みのある濃色） */
.theme-rakuten{
  --dd-bg: #ffffff;
  --dd-text: #3b1f1f;
  --dd-subtext: #7a4a4a;
  --dd-border: rgba(0,0,0,.16);
  --hb-text: #3b1f1f;
  --hb-border: rgba(59,31,31,.45);
  --hb-hover-bg: rgba(59,31,31,.08);
  --hb-hover-text: #3b1f1f;  
}

  /* フロー左上の戻るボタン（オーバーレイ） */
.flow-wrap{
  position: relative;
}

.flow-back-btn{
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 20;
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* ============================================================
   非同期ロード表示（flow/fba/table）：パネル内中央ローディング
   - 「読み込み中…」が他UIと被るのを防止
   - Plotly描画前の“空div白枠”を見せない（中身だけ隠す）
   ============================================================ */
   .async-panel{ position: relative; }
   .async-target{ position: relative; z-index: 0; }
   
   /* ローディング中は中身を見せない（display:noneはPlotlyがサイズ誤判定するのでNG） */
   .async-panel.is-loading .async-target{ visibility: hidden; }
   
   .async-loading{
     position: absolute;
     inset: 0;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 50;
     pointer-events: none;
   }
   .async-panel.is-loading .async-loading{ display: flex; }
   
   .async-loading .pill{
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     border-radius: 999px;
     background: rgba(255,255,255,0.85);
     border: 1px solid rgba(0,0,0,0.12);
     box-shadow: 0 6px 16px rgba(0,0,0,0.10);
     font-weight: 800;
     color: #374151;
   }

   /* =========================
   async loading overlay
   ========================= */
.loading-overlay{
  position:absolute;
  inset:0;
  display:none;                 /* JSでON/OFF */
  align-items:center;
  justify-content:center;
  z-index:50;
  pointer-events:none;
}
.loading-overlay .pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  font-weight:800;
  color:#374151;
}

/* 右上の白枠の正体：Plotly modebar が空のまま先に出る → 描画完了まで隠す */
#fba-graph[data-ready="0"] .modebar-container,
#fba-graph[data-ready="0"] .modebar{
  display:none !important;
}

#rakuten-graph[data-ready="0"] .modebar-container,
#rakuten-graph[data-ready="0"] .modebar{
  display:none !important;
}

#gb-graph[data-ready="0"] .modebar-container,
#gb-graph[data-ready="0"] .modebar{
  display:none !important;
}
#factory-graph[data-ready="0"] .modebar-container,
#factory-graph[data-ready="0"] .modebar{
  display:none !important;
}
/* =========================================================
   凡例UI：発送予定（工場/GB/Amazon/Rakuten）統合版
   - 右上固定（旧）と、行2の横スクロール凡例バー（新）を両立
   - “legend-scrollの絶対配置”を全体に当てない（事故の元）
   ========================================================= */

/* 1) 高さ基準（在庫最終更新チップの高さに合わせる） */
:root{
  --inv-chip-h: 44px; /* 基本値。JSで実寸同期するなら上書きされる */
}

/* 2) 在庫最終更新チップは「外寸固定」＋上下paddingで伸びないように */
.update-chip{
  box-sizing: border-box;
  height: var(--inv-chip-h);
  min-height: var(--inv-chip-h);
  display: inline-flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1;
}

/* 3) 凡例アイテム共通（右上/下バーどっちでも使う） */
.legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.legend-item.is-off{ opacity: .45; }

.legend-swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.legend-label{
  white-space: nowrap;
  font-size: 12px;
}

/* =========================================================
   A) 行2：左=在庫最終更新 / 右=凡例バー（新）
   - AmazonFBA で今やってる形を、他ページにも横展開できる
   ========================================================= */
.update-legend-row{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* graph-splitと同じ左右幅 */
  gap: 14px;
  align-items: center;
  margin-top: 8px;
}

/* 凡例バー（外枠：左右ボタン含む） */
.legend-bar{
  box-sizing: border-box;
  height: var(--inv-chip-h);
  min-height: var(--inv-chip-h);
  width: 100%;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.95);
  padding: 0 6px;       /* 上下ゼロ */
  overflow: hidden;     /* 外にはみ出さない */
}

/* 凡例バーのスクロール領域（ここだけ横スクロール） */
.legend-bar .legend-scroll{
  position: static !important;     /* ←絶対配置を潰す */
  box-sizing: border-box;
  flex: 1 1 auto;

  height: calc(var(--inv-chip-h) - 8px);
  min-height: calc(var(--inv-chip-h) - 8px);

  display: flex;
  align-items: center;
  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* アイテム：高さはスクロール領域に100%追従 */
.legend-bar .legend-item{
  height: 100%;
  padding: 0 10px;     /* 上下ゼロ */
  border-radius: 12px;
}

/* 左右ボタン */
.legend-btn{
  width: 32px;
  height: calc(var(--inv-chip-h) - 12px);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.legend-btn:active{ transform: translateY(1px); }

/* =========================================================
   B) 右上固定のスクロール凡例（旧）
   - 必要なページだけ “ID指定” で適用（全体に当てない）
   ========================================================= */
/* 右上固定のときは縦スクロールなので高さ固定しない */
#rakuten-legend.legend-scroll .legend-item,
#gb-legend.legend-scroll .legend-item,
#factory-legend.legend-scroll .legend-item{
  padding: 4px 2px;
  height: auto;
}

/* =========================================================
   AmazonFBA：凡例バーがグラフ日付に被らないようにする
   - legend-bar はグラフの外にあるので、グラフ側には下余白が要らない
   ========================================================= */

/* 1) グラフブロックの下に “確実な余白” を作る */
.graph-split > .graph-block{
  padding-bottom: 10px;   /* ← 8〜14pxで好み調整 */
  box-sizing: border-box;
}

/* 2) update-legend-row をグラフに近づけすぎない */
.update-legend-row{
  margin-top: 10px;       /* ← 8〜14px */
}

/* 3) legend-bar が text と被らないように、内側はみ出し禁止 */
.legend-bar{
  overflow: hidden;
}

/* 4) legend-bar のスクロール領域は下の“バー”だけ */
.legend-bar .legend-scroll{
  scrollbar-gutter: stable both-edges;  /* 対応ブラウザだけ効く */
}
/* =========================
   Auth (Login) page
   ========================= */
   body.auth-page{
    margin:0;
    background:#fff;
    min-height:100vh;
  }
  
  /* ログインではサイドバー系を無効化 */
  body.auth-page nav#sidebar,
  body.auth-page main{
    display:none !important;
  }
  
  /* Centering */
  .auth-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 16px;
  }
  
  /* Card */
  .auth-card{
    width:min(560px, 92vw);
    padding:28px 26px 22px;
    border:1px solid #e8eaf0;
    border-radius:10px;
    background:#fff;
    box-shadow:0 12px 34px rgba(0,0,0,.06);
  }
  
  /* Logo */
  .auth-logo{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
  }
  
  /* ロゴ（ログインだけ強めに） */
  body.auth-page .big-label{
    color:#183181;
    font-weight:800;
    letter-spacing:0.06em;
    font-size:2.2em;
  }
  body.auth-page .big-label .tm{
    color:inherit;
    font-weight:800;
    opacity:0.9;
  }
  
  /* Inputs */
  .auth-input{
    width:100%;
    height:46px;
    border:1px solid #cfd6e4;
    border-radius:6px;
    padding:0 14px;
    margin-top:10px;
    font-size:15px;
    box-sizing: border-box;
  }

 
  /* Buttons (base) */
  .auth-btn{
    width:100%;
    height:46px;
    border-radius:10px; /* 少し丸めてボタン感UP */
    border:1px solid transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
    margin-top:12px;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease;
  }
  
  /* Googleログイン：メインCTA（紺色・強め） */
  .auth-btn-google-primary{
    background:#183181;
    color:#ffffff;
    border:none;
    box-shadow:0 10px 28px rgba(24,49,129,.35), 0 2px 6px rgba(0,0,0,.10);
    font-weight:800;
    transform:translateY(0);
  }
  .auth-btn-google-primary:hover{
    background:#12245f;
    transform:translateY(-1px);
    box-shadow:0 14px 36px rgba(24,49,129,.45), 0 4px 10px rgba(0,0,0,.14);
  }
  
  /* Primary (mail/password) : サブ導線（少し弱め） */
  .auth-btn-primary{
    background:#1e2f7a;
    color:#fff;
    border-color:#1e2f7a;
    opacity:.88;
  }
  .auth-btn-primary:hover{
    opacity:1;
  }
  
  /* Divider */
  .auth-or{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:14px 0 6px;
    color:#9ca3af;
    font-weight:700;
    font-size:11px;
  }
  .auth-or span{
    padding:0 10px;
    background:#fff;
  }
  .auth-or:before,
  .auth-or:after{
    content:"";
    height:1px;
    background:#e8eaf0;
    flex:1;
  }
  
  /* Google logo-like mark */
  .google-icon{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:800;
    font-size:18px;
    letter-spacing:-0.02em;
    display:inline-flex;
    align-items:center;
  }
  .g-blue   { color:#4285F4; }
  .g-red    { color:#DB4437; }
  .g-yellow { color:#F4B400; }
  .g-green  { color:#0F9D58; }
  
  .google-text{
    margin-left:6px;
    font-weight:700;
  }
  
  /* Footer */
  .auth-footer{
    margin-top:14px;
    text-align:center;
    font-size:13px;
  }
  .auth-footer a{
    color:#183181;
    text-decoration:none;
  }
  .auth-footer a:hover{
    text-decoration:underline;
  }
  /* =========================
   Google Gマーク（先頭用）
   ========================= */
.google-gmark{
  display:inline-flex;
  align-items:center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.04em;
  margin-right: 6px;
}

/* Googleカラー */
.g-blue   { color:#4285F4; }
.g-red    { color:#DB4437; }
.g-yellow { color:#F4B400; }
.g-green  { color:#0F9D58; }

/* 紺ボタン上でも沈まないよう少し明るく */
.auth-btn-google-primary .g-blue,
.auth-btn-google-primary .g-red,
.auth-btn-google-primary .g-yellow,
.auth-btn-google-primary .g-green{
  filter: brightness(1.15);
}

/* Googleボタンだけ gap を消す（Google と「で」の間の空きを消す） */
.auth-btn-google-primary{ gap: 0; }

.auth-error{
  background:#fff4f4;
  border:1px solid #f0caca;
  color:#b00020;
  padding:8px 12px;
  border-radius:8px;
  margin:0 0 12px;
  font-size:13px;
}
.auth-error ul{ margin:0; padding-left:18px; }

/* パスワード入力＋目アイコン */
.auth-password-wrap{
  position: relative;
}

.auth-password-wrap .auth-input{
  padding-right: 44px; /* 目アイコン分の余白 */
}

.pw-eye{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:16px;
  opacity:.6;
}
.pw-eye:hover{ opacity:1; }

/* ==============================
   総合レポート（Salesforce風UI）
============================== */
.sr-wrap{
  width: 92%;
  margin: 0 auto;
}

.sr-panel{
  background: #fff !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}

.sr-filterbar{
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  padding: 8px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  background: #f8f9fb !important;
}

.sr-filter{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.sr-filter-label{
  font-size: 12px !important;
  color: #54698d !important;
}

.sr-filterbar-spacer{
  flex: 1 1 auto !important;
}

.sr-btn{
  background: #0176d3 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.sr-btn:hover{
  filter: brightness(0.95) !important;
}

/* combobox */
.sr-combobox{
  position: relative !important;
  min-width: 240px !important;
}

.sr-combobox__trigger{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
}
.sr-combobox__trigger:focus{
  outline: none !important;
  border-color: #0176d3 !important;
  box-shadow: 0 0 0 3px rgba(1,118,211,.2) !important;
}

.sr-combobox__arrow{
  color: #54698d !important;
}

.sr-combobox__menu{
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
  padding: 6px !important;
  display: none !important;
  z-index: 20 !important;
  max-height: 220px !important;
  overflow: auto !important;
}

.sr-combobox.is-open .sr-combobox__menu{
  display: block !important;
}

.sr-combobox__option{
  width: 100% !important;
  text-align: left !important;
  padding: 10px 10px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
}
.sr-combobox__option:hover{
  background: #f3f2f2 !important;
}

.sr-combobox__option.is-selected{
  background: rgba(1,118,211,.12) !important;
  color: #014486 !important;
  font-weight: 700 !important;
}

/* 右ペイン */
.sr-canvas{
  margin-top: 12px !important;
  border: 1px dashed #d8dde6 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: #fff !important;
  position: relative !important; /* loading-overlay を枠内に閉じる */
  overflow: hidden !important;
}

.sr-empty{
  text-align: center !important;
  color: #54698d !important;
  margin-top: 60px !important;
}

/* ============================================================
   総合レポート：右ペイン（sr-canvas）を画面高に追随させる
   - ヘッダー + フィルタバー分を引いて「残りをiframe」に
   ============================================================ */

/* 調整ノブ：必要なら数字だけ変えればOK */
:root{
  --sr-header-h: 64px;     /* 上の青ヘッダー（だいたい） */
  --sr-panel-pad: 24px;    /* sr-panelの上下padding相当 */
  --sr-filter-h: 86px;     /* filterbarの高さ（だいたい） */
  --sr-gap: 16px;          /* 余白 */
}

/* “横枠を埋める” → 92% をやめてフル幅寄りに */
.sr-wrap{
  width: 100% !important;
  margin: 0 !important;
}

/* 右ペインを「残り高さ」に固定（min-heightは保険で残す） */
.sr-canvas{
  height: calc(100svh - var(--sr-header-h) - var(--sr-filter-h) - var(--sr-panel-pad) - var(--sr-gap)) !important;
}

/* iframeは“枠の100%”を厳密に使う */
.sr-iframe{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important; /* ← 680固定で二重に効いて切れるのを防止 */
}


/* 右ペイン：iframe表示 + 右上お気に入り */
.sr-frame{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.sr-embed{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.sr-iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #f3f2f2 !important;
}

.sr-fav-btn{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #d8dde6 !important;
  background: #fff !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sr-fav-btn:hover{
  filter: brightness(0.98) !important;
}
.sr-fav-btn.is-fav{
  border-color: rgba(1,118,211,.6) !important;
  box-shadow: 0 0 0 3px rgba(1,118,211,.15) !important;
}

.sr-error{
  color: #c23934 !important;
  text-align: center !important;
  margin-top: 60px !important;
}

/* ==============================
   総合レポート（Hub）：iframe表示用
   ============================== */

   .sr-canvas-inner{
    position: relative !important;
    background: #fff !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  
  .sr-iframe{
    width: 100% !important;
    border: 0 !important;
    display: block !important;
    background: #fff !important;
  }
  
  /* ★は表示枠内の右上 */
  .sr-fav{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 60 !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #dddbda !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  
  .sr-fav:hover{
    background: #f3f2f2 !important;
  }
  
  .sr-fav.is-on{
    background: #f5b301 !important;
    border-color: #f5b301 !important;
    color: #111 !important;
  }
  
  /* Hub枠が下まで届かない時の保険（余白を殺す） */
.sr-wrap{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
.sr-panel{ margin-bottom: 0 !important; }


  /* ==============================
     embed=1 用（iframe内はヘッダー/サイドバーを消す）
     ============================== */
  body.embed-mode nav#sidebar{
    display: none !important;
  }
  
  body.embed-mode main{
    margin-left: 0 !important;
  }
  
  body.embed-mode main > header{
    display: none !important;
  }

  /* ============================================================
   embed=1（iframe内表示）での「販売レポート_全体」最適化
   - 100vh-94px のズレを解消
   - sidebar前提の中央寄せ(leftシフト)を無効化
   - 2x2グラフが見切れないように、wrapperを100vh運用に
   ============================================================ */
body.embed-mode .dashboard-wrapper{
  /* 既存: min-height:calc(100vh - 94px) が embed だと余白になって切れる */
  min-height: 100svh !important;
  height: 100svh !important;
  overflow: hidden !important;
}

/* フィルタバーの「sidebar幅ぶん左に寄せる」挙動を止める */
body.embed-mode .filter-wrapper{
  left: 0 !important;
  justify-content: center !important;
}

/* 2x2のグラフ領域を確実に残り高さにフィットさせる */
body.embed-mode .graph-area{
  height: 100% !important;     /* dashboard-wrapper の flex(1) で埋まる */
  min-height: 0 !important;
}

/* Plotly が親の高さを正しく掴むための保険 */
body.embed-mode .graph-cell,
body.embed-mode .graph-cell .plotly-graph-div{
  min-height: 0 !important;
}


  

/* ============================================================
   総合レポート：枠内右上のお気に入りボタン（★）
============================================================ */
.sr-fav-btn{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;

  width: 32px !important;
  height: 32px !important;

  border: 1px solid var(--sr-border) !important;
  background: #fff !important;
  border-radius: 4px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}

.sr-fav-btn:hover{
  background: var(--sr-hover) !important;
  border-color: #c9c7c5 !important;
}

.sr-fav-btn:focus{
  outline: none !important;
  border-color: var(--sr-brand) !important;
  box-shadow: 0 0 0 3px var(--sr-brand-ring) !important;
}

.sr-fav-btn[disabled]{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

.sr-fav-btn__icon{
  font-size: 18px !important;
  line-height: 1 !important;
}

.sr-fav-btn.is-active .sr-fav-btn__icon{
  /* 色はお好みで。まずは視認性重視で */
  color: #f4b400 !important;
}

/* ==============================
   総合レポート：読み込み中（srLoading）
   - 既存の .loading-overlay は display:none 前提なので、
     srLoading だけ「hidden が外れたら表示」させる
   ============================== */
   #srLoading:not([hidden]){
    display: flex !important;
  }
  #srLoading{
    align-items: center;
    justify-content: center;
    pointer-events: none; /* クリックを邪魔しない */
    z-index: 50;          /* iframeより手前 */
  }

  /* ==============================
   個別予測確認：読み込み中（ifLoading）
   - hidden が外れたら表示
   - 画面全体にオーバーレイして「待ってる感」を出す
   ============================== */
#ifLoading{
  position: fixed;
  inset: 0;
  display: none;                 /* hidden解除時に下でflexにする */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(248,250,252,.55);   /* 薄い幕 */
  backdrop-filter: blur(1px);
  pointer-events: auto;           /* 操作を止める（読み込み中に触れない） */
}

#ifLoading:not([hidden]){
  display: flex !important;
}

  

/* ============================================================
   全体ダッシュボード：フロー(左) + タスク(右)
   - 色味はナビゲーション(#183181系)に合わせる
   ============================================================ */
   .dashboard-top-split{
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 16px;
    align-items: stretch;
    min-width: 0;
  }
  
  .dashboard-top-split.is-task-collapsed{
    grid-template-columns: minmax(0, 1fr) 56px;
  }
  
  .dashboard-flow{
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
  }
  
  .dashboard-flow #flow-graph{
    width: 100%;
    height: 100%;
  }
  
  .dashboard-tasks{
    min-width: 0;
    border-radius: 12px;
    background: #183181;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    border: 1px solid rgba(255,255,255,.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .dashboard-tasks__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
  
  .dashboard-tasks__title{
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .dashboard-tasks__count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    font-size: 12px;
    font-weight: 800;
  }
  
  .dashboard-tasks__toggle{
    border: none;
    background: rgba(255,255,255,.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
  }
  
  .dashboard-tasks__toggle:hover{
    background: rgba(255,255,255,.18);
  }
  
  .dashboard-tasks__body{
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    overflow: auto;
  }
  
  .task-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .task-item__btn{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.10);
    color: #fff;
    text-align: left;
    cursor: pointer;
  }
  
  .task-item__btn:hover{
    background: rgba(0,0,0,.18);
    border-color: rgba(255,255,255,.26);
  }
  
  .task-icon{
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-top: 2px;
  }
  
  .task-text{
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
  }
  
  .task-empty{
    opacity: .9;
    font-size: 13px;
    padding: 6px 2px;
  }
  
  /* たたむ状態 */
  .dashboard-tasks.is-collapsed .dashboard-tasks__body{
    display: none;
  }
  
  .dashboard-tasks.is-collapsed .dashboard-tasks__header{
    flex-direction: column;
    justify-content: center;
    padding: 10px 6px;
    gap: 10px;
    border-bottom: none;
    height: 100%;
  }
  
  .dashboard-tasks.is-collapsed .dashboard-tasks__title{
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  
  .dashboard-tasks.is-collapsed .dashboard-tasks__toggle{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 8px 6px;
  }
  
  /* ============================================================
     タスク通知ポップアップ
     ============================================================ */
  .task-popup[hidden]{
    display: none;
  }
  
  .task-popup{
    position: fixed;
    inset: 0;
    z-index: 40000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .task-popup__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
  }
  
  .task-popup__dialog{
    position: relative;
    width: min(420px, 92vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    overflow: hidden;
  }
  
  .task-popup__head{
    background: #183181;
    color: #fff;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .task-popup__title{
    font-weight: 900;
    font-size: 14px;
  }
  
  .task-popup__close{
    border: none;
    background: transparent;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
  }
  
  .task-popup__body{
    padding: 12px 14px;
  }
  
  .task-popup__message{
    margin: 0 0 8px;
    font-weight: 700;
  }
  
  .task-popup__list{
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 13px;
  }
  
  .task-popup__suppress{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151;
  }
  
  .task-popup__foot{
    padding: 0 14px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  
  .task-popup__btn{
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .task-popup__btn-primary{
    background: #183181;
    color: #fff;
  }
  
  .task-popup__btn-primary:hover{
    background: #12245f;
  }
  
  .task-popup__btn-secondary{
    background: #f3f4f6;
    color: #111827;
  }
  
  @media (max-width: 992px){
    .dashboard-top-split{
      grid-template-columns: 1fr;
      grid-template-rows: minmax(340px, 44svh) auto;
    }
    .dashboard-top-split.is-task-collapsed{
      grid-template-columns: 1fr;
      grid-template-rows: minmax(340px, 44svh) auto;
    }
    /* スマホで畳む時は右カラム自体を消す（開くはポップアップからでOK） */
    .dashboard-tasks.is-collapsed{
      display: none;
    }
  }

  .shipment-stack .graph-block{ height:100%; position:relative; z-index:0; overflow:hidden; }

/* =========================================================
   全体ダッシュボード：左=フロー / 右=タスク（ナビ色に合わせる）
   ========================================================= */
   .shipment-scale.dashboard-page{
    height: auto !important;
    overflow: visible !important;
  }
  .shipment-scale.dashboard-page .shipment-stack{
    flex: 1 1 auto;
    min-height: 0;
  }
  
/* 影が切れないように（タスクパネルの影/開くボタン） */
.dashboard-graph-block{
  overflow: visible !important;
}

/* 上段：フロー＋タスク */
.dashboard-top-split{
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(360px, 1fr);
  gap: 12px;
  align-items: stretch;
  position: relative;
}
@media (max-width: 992px){
  .dashboard-top-split{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 44svh) auto;
  }
}

/* タスクを畳んだ状態 */
.dashboard-top-split.is-task-collapsed{
  grid-template-columns: 1fr;
}
.dashboard-top-split.is-task-collapsed .dashboard-tasks{
  display: none;
}

/* フロー側（Plotlyのはみ出し対策） */
.dashboard-flow{
  min-width: 0;
  min-height: 0;
}

/* タスクパネル */
.dashboard-tasks{
  min-width: 0;
  min-height: 0;
  background: #183181; /* ナビゲーションと同系色 */
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dashboard-tasks__head{
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dashboard-tasks__title{
  font-weight: 900;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-tasks__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 12px;
  font-weight: 900;
}
.dashboard-tasks__toggle{
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.dashboard-tasks__toggle:hover{
  background: rgba(255,255,255,0.14);
}
.dashboard-tasks__body{
  padding: 0 14px 14px;
  overflow: auto;
  min-height: 0;
}
.dashboard-task-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dashboard-task-item{
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dashboard-task-item::before{
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  flex: 0 0 auto;
  margin-top: 1px;
}
.dashboard-task-item a{
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
}
.dashboard-task-item a:hover{
  text-decoration: underline;
}
.dashboard-task-empty{
  padding: 18px 6px;
  color: rgba(255,255,255,0.85);
  font-weight: 800;
}

/* タスクを畳んだ時の「開く」ボタン（フロー右上に出す） */
.dashboard-task-fab{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  border: 1px solid rgba(24,49,129,0.25);
  background: #fff;
  color: #183181;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.dashboard-task-fab:hover{
  filter: brightness(0.98);
}

/* タスクポップアップ（モーダル） */
.task-modal{
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
}
.task-modal.is-open{
  display: block;
}
.task-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.task-modal__dialog{
  position: relative;
  width: min(560px, calc(100vw - 24px));
  margin: 12svh auto 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.task-modal__head{
  background: #183181;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.task-modal__title{
  font-weight: 900;
  font-size: 15px;
}
.task-modal__x{
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.task-modal__body{
  padding: 14px;
}
.task-modal__msg{
  margin: 0 0 10px;
  font-weight: 900;
  color: #111827;
}
.task-modal__list{
  margin: 0 0 12px;
  padding-left: 18px;
}
.task-modal__list a{
  color: #183181;
  font-weight: 800;
  text-decoration: none;
}
.task-modal__list a:hover{
  text-decoration: underline;
}
.task-modal__suppress{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #111827;
}
.task-modal__foot{
  padding: 0 14px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.task-modal__btn{
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}
.task-modal__btn-primary{
  background: #183181;
  color: #fff;
}
.task-modal__btn-primary:hover{
  filter: brightness(0.95);
}
.task-modal__btn-secondary{
  background: #f3f4f6;
  color: #111827;
}
.task-modal__btn-secondary:hover{
  filter: brightness(0.97);
}

.graph-with-flow{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
  height:100%;
  min-height:0;
}

/* ============================================================
   次回生産/発送 推奨：2段ヘッダー（rowspan/colspan） + 本文セルの黄色
   - 工場/中間倉庫/AmazonFBA/楽天RSL を同じ見た目に統一
   - 「即発送/即生産」は赤（highlight）を優先
   ============================================================ */

/* 1段目の高さ（sticky 2段のズレ防止） */
:root{ --sw-thead-row1-h: 38px; }

/* 対象テーブル：発送管理 */
.factory-enabled thead tr:first-child th,
.gb-table-top    thead tr:first-child th,
#fba-table       thead tr:first-child th,
.rakuten-enabled thead tr:first-child th{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}

.factory-enabled thead tr:nth-child(2) th,
.gb-table-top    thead tr:nth-child(2) th,
#fba-table       thead tr:nth-child(2) th,
.rakuten-enabled thead tr:nth-child(2) th{
  position: sticky !important;
  top: var(--sw-thead-row1-h) !important;
  z-index: 4 !important;
}

/* --- 黄色ヘッダー（上段：グループ） --- */
th.next-recommend-group{
  background-color: #FFF2A6 !important;
  color: #111827 !important;
  font-weight: 900 !important;

  /* ダサい枠線を整える */
  border-left: 2px solid rgba(0,0,0,0.12) !important;
  border-right: 2px solid rgba(0,0,0,0.12) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
}

/* --- 黄色ヘッダー（下段：依頼日/依頼量） --- */
th.next-recommend{
  background-color: #FFF7BF !important;
  color: #111827 !important;
  font-weight: 800 !important;

  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}

/* --- 本文セル：黄色（ヘッダーだけ黄色問題の本丸） --- */
td.next-recommend{
  background-color: #FFFBE5 !important;
  color: #111827 !important;

  /* グループ外枠（左右太め） */
  border-left: 2px solid rgba(0,0,0,0.12) !important;
  border-right: 2px solid rgba(0,0,0,0.12) !important;
}

/* 依頼日/依頼量：中の区切り線だけ細く */
td.next-recommend.next-date{
  border-right: 1px solid rgba(0,0,0,0.10) !important;
}
td.next-recommend.next-qty{
  border-left: 1px solid rgba(0,0,0,0.10) !important;
}

/* 即発送/即生産：赤を最優先（黄色より上書き） */
td.next-recommend.highlight,
th.next-recommend.highlight{
  background-color: #FEE2E2 !important;
  color: #991B1B !important;
  font-weight: 900 !important;
}

/* 発送方法（ヘッダーだけ黄色に寄せる） */
th.ship-method-head{
  /* next-recommend-group と同じトーンに寄せる（クラス併用前提） */
  border-left: 2px solid rgba(0,0,0,0.12) !important;
  border-right: 2px solid rgba(0,0,0,0.12) !important;
}

/* 発送方法セルも黄色ブロックに統一（本文が白い問題の対処） */
td.ship-method{
  background-color: #FFFBE5 !important;
  color: #111827 !important;

  /* 黄色ブロックの外枠に合わせる */
  border-left: 2px solid rgba(0,0,0,0.12) !important;
  border-right: 2px solid rgba(0,0,0,0.12) !important;
}

/* 即発送カテゴリは赤優先 */
td.ship-method.highlight{
  background-color: #FEE2E2 !important;
  color: #991B1B !important;
  font-weight: 900 !important;
}

/* [2026-05-27] 発送方法 (工場直送/中間倉庫経由/混在/未設定) の色分け */
td.ship-method.route-direct { color: #1565c0 !important; font-weight: 700 !important; }  /* 青: 工場直送 */
td.ship-method.route-via    { color: #2e7d32 !important; font-weight: 700 !important; }  /* 緑: 中間倉庫経由 */
td.ship-method.route-mixed  { color: #ef6c00 !important; font-weight: 700 !important; }  /* 橙: 混在 */
td.ship-method.route-unset  { color: #9ca3af !important; }                                /* 灰: 未設定 */
/* highlight (即発送) が優先される: 赤背景 + 太字 */

/* ============================================================
   即発送 / 即生産：色味を全列で統一（黄色ブロックと同じ）
   - 既存の td.highlight（ピンク系）を上書きしてズレを消す
   ============================================================ */

/* 既存の「即発送」強調（td_highlight が付与している .highlight）を
   黄色側(next-recommend.highlight)と同じ配色に統一 */
   td.highlight{
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    font-weight: 900 !important;
  }
  
  /* 中の小文字/小要素も同じ色に */
  td.highlight small,
  td.highlight span{
    color: #991B1B !important;
  }
  
  /* もし「即発送」というテキストがセル内にある場合も視認性UP */
  td.highlight{
    text-align: right; /* ステータス系セルが見やすくなる */
  }

  

/* ===========================
   Help：本文エリアの左右余白 & 最大幅
   =========================== */
  /* ============== Help：本文エリア（改） ============== */
  #help-content.help-content-pad{
    /* 余白が両サイドに出すぎないように「最大幅 + 中央寄せ」 */
    --help-max-w: 1680px;

    max-width: var(--help-max-w);
    margin-left: auto;
    margin-right: auto;

    padding: 16px 20px 44px;
    box-sizing: border-box;
  }

  /* 検索ボックスも help-content と幅を揃える */
  .search-box.help-search-box{
    --help-max-w: 1680px;

    max-width: var(--help-max-w);
    margin-left: auto;
    margin-right: auto;

    padding: 18px 20px 0;
    box-sizing: border-box;
  }
/* =========================================
   FIX: 全体ダッシュボードを AmazonFBA と同じスクロール挙動にする
   - ページ(外側)は body がスクロール
   - 表は .shipment-scale .table-container の枠内スクロールを使う
   ========================================= */

/* 1) 全体ダッシュボードだけ “内側スクロール” をやめる */
.shipment-scale.dashboard-page{
  height: auto !important;
  overflow: visible !important;
}

/* 2) 全体ダッシュボードの table-container を “特別扱い” しない
      （発送管理と同じ .shipment-scale .table-container のルールに任せる） */
.dashboard-page .table-container{
  position: relative !important; /* stickyを無効化 */
  top: auto !important;
  max-height: none !important;   /* shipment-scale側の max-height(90vh等) を使う */
  overflow: auto !important;     /* 枠内スクロールに統一 */
}

/* 3) ヘッダーは枠内スクロールで sticky（shipment-scale側が基本あるが念のため） */
.dashboard-page .table-container thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
}

.dashboard-page #stock-summary-wrap table.sticky-header thead tr:first-child th{
  top: 0 !important;
}
.dashboard-page #stock-summary-wrap table.sticky-header thead tr:nth-child(2) th{
  top: var(--thead-row1-h, 38px) !important;
}

/* =========================================================
   FIX: 発送管理(2段ヘッダー)のヘッダー欠け対策
   - 全体ルールの thead tr sticky を発送管理だけ無効化
   ========================================================= */
   .factory-enabled thead tr,
   .gb-table-top thead tr,
   #fba-table thead tr,
   .rakuten-enabled thead tr{
     position: static !important;
     top: auto !important;
     z-index: auto !important;
     background: transparent !important;
   }

   /* 2段ヘッダー：上段/下段の前面を強制（shipment-scale th(20)より上に） */
.factory-enabled thead tr:first-child th,
.gb-table-top    thead tr:first-child th,
#fba-table       thead tr:first-child th,
.rakuten-enabled thead tr:first-child th{
  z-index: 200 !important;
}

.factory-enabled thead tr:nth-child(2) th,
.gb-table-top    thead tr:nth-child(2) th,
#fba-table       thead tr:nth-child(2) th,
.rakuten-enabled thead tr:nth-child(2) th{
  z-index: 199 !important;
}

/* colspan 見出し（次回生産推奨）はさらに上 */
th.next-recommend-group{
  z-index: 210 !important;
}

  /* =========================================================
   FIX3: 透け対策は“ヘッダー側”でやる（containerマスクは使わない）
   - ヘッダーがズレないよう、レイアウト要素を増やさない
   ========================================================= */

/* stacking context だけ作る（position は既存を尊重） */
.shipment-scale .table-container,
.shipment-scale .overflow-x-auto{
  isolation: isolate;
}

/* =========================================================
   FIX3: ヘッダーの上に出る文字を“動かさず”消す
   - 1段目ヘッダーの上に白い塗り（描画だけ、レイアウト変化なし）
   ========================================================= */
  /* FIX3: ヘッダーの上に出る文字を“動かさず”消す（厚めに） */
.factory-enabled thead tr:first-child th,
.gb-table-top thead tr:first-child th,
#fba-table thead tr:first-child th,
.rakuten-enabled thead tr:first-child th{
  box-shadow: 0 -22px 0 #fff !important;   /* ← -14px → -22px に変更 */
}

/* =========================================================
   FIX: stickyヘッダーの枠線(1px)が透ける問題
   - collapse をやめて separate にする（発送管理テーブルだけ）
   ========================================================= */
   .factory-enabled,
   .gb-table-top,
   #fba-table,
   .rakuten-enabled{
     border-collapse: separate !important;
     border-spacing: 0 !important;
   }
   
  /* ============================================================
   総合レポート：縦を「残り高さ = iframe」にする（2x2見切れ防止）
   ============================================================ */

/* 画面上の固定要素ぶんの控除（必要なら数値だけ調整） */
:root{
  --sr-top-offset: 160px; /* ← ヘッダー＋タブ見出し＋余白の合計。まずは160でOK */
}

/* 横はもうOKとのことなので、縦の“器”を作る */
.sr-wrap{
  width: 100% !important;
  margin: 0 !important;
}

/* sr-panel を縦flexにして、canvas を「残り」にする */
.sr-panel{
  display: flex !important;
  flex-direction: column !important;

  /* 画面の残り高さを確保 */
  min-height: 0 !important;
}

/* フィルタバーは固定高さとして扱う（縮まない） */
.sr-filterbar{
  flex: 0 0 auto !important;
}

/* ここがキモ：canvas が残り高さを全部使う */
.sr-canvas{
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;     /* ← これがないと flex の中で縮まらず見切れる */
  overflow: hidden !important;  /* ← iframe内スクロールではなく、iframeを伸ばす */
}

/* iframe の親たちも高さ100%で繋ぐ */
.sr-canvas-inner,
.sr-frame,
.sr-embed{
  height: 100% !important;
  min-height: 0 !important;
}

/* iframe 自体も 100% に（min-height固定を解除） */
.sr-iframe{
  height: 100% !important;
  min-height: 0 !important;  /* ← 680px固定が残ってると伸縮の邪魔 */
}

/* =========================================================
   FIX: 販売レポート_全体（embed=1）で2x2が被らないようにする
   - graph-area の height:100% をやめて flex で残り高さだけにする
   ========================================================= */

   body.embed-mode .dashboard-wrapper{
    display: flex !important;
    flex-direction: column !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* フィルタは固定（縮まない） */
  body.embed-mode .dashboard-wrapper .filter-wrapper{
    flex: 0 0 auto !important;
    margin-bottom: 8px !important;
  }
  
  /* ★ここが本丸：残り高さだけを使う（被り防止） */
  body.embed-mode .dashboard-wrapper .graph-area{
    flex: 1 1 auto !important;
    min-height: 0 !important;
  
    height: auto !important;      /* ← 100% を殺す */
    overflow: hidden !important;  /* ← 枠外に侵食しない */
  }
  
  /* 各セルもはみ出さない */
  body.embed-mode .dashboard-wrapper .graph-cell{
    min-height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Plotly本体をセル内に完全拘束 */
  body.embed-mode .dashboard-wrapper .graph-cell .plotly-graph-div{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  
/* =========================================================
   総合レポート(Hub)だけ：1画面ぴったり（下の白い余りを消す）
   - main を 100vh の flex にして、header + 内容で割り切る
   ========================================================= */
   body[data-active-tab="レポート"][data-active-subtab="総合レポート"] main{
    height: 100vh !important;      /* ← min-height じゃなく height にするのがポイント */
    min-height: 0 !important;
    overflow: hidden !important;   /* ← ページ側スクロールを消す（中はiframe内に収める） */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* ヘッダーは固定高さ枠として見なす */
  body[data-active-tab="レポート"][data-active-subtab="総合レポート"] main > header{
    flex: 0 0 auto !important;
  }
  
  /* sr-wrap / sr-panel が残り高さを全部使う */
  body[data-active-tab="レポート"][data-active-subtab="総合レポート"] .sr-wrap{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  body[data-active-tab="レポート"][data-active-subtab="総合レポート"] .sr-panel{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
  }
  
  /* filterbar + canvas を縦で分け、canvasを残りに */
  body[data-active-tab="レポート"][data-active-subtab="総合レポート"] #srFilterBar{
    flex: 0 0 auto !important;
  }
  
  body[data-active-tab="レポート"][data-active-subtab="総合レポート"] #srCanvas{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  
  body[data-active-tab="レポート"][data-active-subtab="総合レポート"] #srCanvasInner,
  body[data-active-tab="レポート"][data-active-subtab="総合レポート"] #srReportFrame{
    height: 100% !important;
    min-height: 0 !important;
  }

  /* =========================================================
   FIX: 左ナビの子（submenu）に出る謎アイコン(a-1/a-4等)を消す
   - 擬似要素で出ている文字/アイコンを完全無効化
   ========================================================= */

/* カテゴリの ▶/▼（これは残したいなら下の1行だけ外す） */
.submenu-category::before{
  content: "" !important;
}

/* submenu-item 側の擬似アイコンがある場合も潰す */
.submenu-item::before,
.submenu-item a::before,
.submenu-item button::before,
.submenu-link::before{
  content: "" !important;
  display: none !important;
}

/* 子（submenu）のFAアイコン */
.nav-subicon{
  display:inline-block;
  width: 18px;
  margin-right: 8px;
  text-align:center;
  opacity: .95;
}
/* =========================================
   FIX: Plotly updatemenus（SVG）を小さくする
   - button ではなく SVG の updatemenu-item に当てる
   ========================================= */

/* updatemenus のラッパ（位置ズレ/余白の暴走を抑える） */
.plotly .updatemenu-container{
  font-size: 12px !important;
}

/* 各メニュー項目（SVGのg要素にクラスが付く） */
.plotly .updatemenu-item{
  cursor: pointer !important;
}

/* 文字（SVGのtext）を小さく */
.plotly .updatemenu-item text{
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* 背景のrectを小さく見せる（Plotlyのデフォ背景を薄く） */
.plotly .updatemenu-item rect{
  rx: 4px !important;
  ry: 4px !important;
  stroke-width: 1px !important;
}

/* “選択中っぽい太さ” が出るのを抑える */
.plotly .updatemenu-item text{
  dominant-baseline: middle !important;
}

/* =========================================
   予測レポート_全体：2×2 を横幅いっぱいに埋める
   - grid/flexの “min-width:auto” 問題でPlotlyが縮むのを防ぐ
   ========================================= */

/* 2×2のグリッドは列を均等に、かつ子が縮めるように */
.dashboard-wrapper .graph-area{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 各セルは“縮めてOK”にする（Plotlyの縮み防止の本丸） */
.dashboard-wrapper .graph-cell{
  min-width: 0 !important;
}

/* 右下セル：縦積みにする & 中身を横100% */
.dashboard-wrapper .graph-cell > *{
  min-width: 0 !important;
}

/* ts-chart（右下のPlotly）を確実に横100% */
#ts-chart,
#ts-chart .plotly-graph-div{
  width: 100% !important;
  min-width: 0 !important;
}

/* 右下のSKU select 行も“横いっぱい”使えるように */
#ts-select{
  width: 100% !important;      /* ここが効くと右列が伸びやすい */
  max-width: 520px;            /* 好み：広すぎ防止。不要なら消してOK */
}

/* =========================================
   予測レポート_全体：縦を埋める＆フィルタ余白を詰める
   ========================================= */

/* 1) 右上の「販売/在庫/予測/その他」フィルタ行：上下余白を詰める */
.sr-filterbar{
  padding: 6px 8px !important;
  gap: 10px !important;
}
.sr-filter-label{
  margin-bottom: 2px !important;
}

/* 2) 予測レポート_全体の2×2領域：残り高さを全部使う（縦を埋める） */
.dashboard-wrapper{
  /* 既に flex ならそのまま。念押し */
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* 予測レポート全体はフィルタが無いので、2×2をそのまま伸ばす */
.dashboard-wrapper .graph-area{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  /* “縦が余る” の本丸：セルが縮まず余白が残るのを防ぐ */
  align-content: stretch !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 12px !important;          /* ← 24px等なら詰める */
  padding: 0 !important;         /* ← 内側余白があるなら消す */
}

/* 3) 各セル：上下余白を詰める＋中身を100%で埋める */
.dashboard-wrapper .graph-cell{
  min-height: 0 !important;
  padding: 0 !important;
}

/* 4) Plotly：親の高さに追随して縦を埋める */
.dashboard-wrapper .plotly-graph-div,
.dashboard-wrapper .plotly-graph-div .main-svg{
  height: 100% !important;
}

/* 5) 右下：SKU select周りの余白を削る（グラフに寄せる） */
#ts-select{
  height: 28px !important;
}
.dashboard-wrapper .graph-cell > div[style*="flex"]{
  margin-bottom: 6px !important;   /* select行とグラフを近づける */
}

/* =========================================
   予測レポート_全体：2×2を縦方向も完全に埋める
   ========================================= */
   .dashboard-wrapper .graph-area{
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;  /* ←これが本丸 */
    height: 100% !important;
    min-height: 0 !important;
  }
  
  /* 各セルは必ず縮めてOK */
  .dashboard-wrapper .graph-cell{
    min-height: 0 !important;
  }
  
  /* 右下のts-chartはセル高100%を使う */
  #ts-chart,
  #ts-chart .plotly-graph-div{
    height: 100% !important;
    min-height: 0 !important;
  }

  /* ============================================================
   予測レポート_全体
   - index.html 内の inline <style> を style.css に移管
   ============================================================ */

.forecast-overview-page{
  padding: 16px 18px 28px;
}

.forecast-overview-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.forecast-overview-title{
  font-size:22px;
  font-weight:800;
  color:#0f172a;
  line-height:1.3;
}

.forecast-overview-sub{
  font-size:13px;
  color:#64748b;
  margin-top:4px;
}

.forecast-overview-period{
  font-size:12px;
  color:#475569;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:6px 12px;
  white-space:nowrap;
}

.forecast-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.forecast-kpi-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 1px 2px rgba(15,23,42,0.05);
}

.forecast-kpi-card.is-good{
  border-top:4px solid #16a34a;
}
.forecast-kpi-card.is-warn{
  border-top:4px solid #f59e0b;
}
.forecast-kpi-card.is-bad{
  border-top:4px solid #dc2626;
}
.forecast-kpi-card.is-neutral{
  border-top:4px solid #64748b;
}

.forecast-kpi-label{
  font-size:12px;
  color:#64748b;
  margin-bottom:6px;
  font-weight:700;
  letter-spacing:.02em;
}

.forecast-kpi-value{
  font-size:28px;
  font-weight:800;
  color:#0f172a;
  line-height:1.2;
  margin-bottom:6px;
}

.forecast-kpi-sub{
  font-size:12px;
  color:#475569;
  line-height:1.5;
  min-height:32px;
}

.forecast-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}

.forecast-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  min-width:0;
}

.forecast-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.forecast-card-title{
  font-size:16px;
  font-weight:800;
  color:#0f172a;
  line-height:1.3;
}

.forecast-section-note{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.forecast-detail-control{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.forecast-detail-control label{
  font-size:12px;
  color:#64748b;
  font-weight:700;
  margin:0;
}

.forecast-detail-control select{
  min-width:260px;
  max-width:420px;
}

.forecast-detail-meta{
  font-size:12px;
  color:#334155;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:8px;
  line-height:1.6;
}

.forecast-sku-table-wrap{
  overflow:auto;
}

.forecast-sku-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.forecast-sku-table th,
.forecast-sku-table td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  white-space:nowrap;
  text-align:left;
  vertical-align:middle;
}

.forecast-sku-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fafc;
  color:#334155;
  font-weight:800;
}

.forecast-sku-table td.is-num,
.forecast-sku-table th.is-num{
  text-align:right;
}

.forecast-sku-table tbody tr{
  cursor:pointer;
}

.forecast-sku-table tbody tr:hover{
  background:#f8fafc;
}

.forecast-sku-table tbody tr.is-selected{
  background:#eff6ff;
}

.forecast-sku-table tbody tr.is-attention{
  background:#fff7ed;
}

.forecast-chip-attention{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  background:#fed7aa;
  color:#9a3412;
  font-size:11px;
  font-weight:800;
}

@media (max-width: 1200px){
  .forecast-kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px){
  .forecast-grid-2{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .forecast-kpi-grid{
    grid-template-columns:1fr;
  }
  .forecast-detail-control select{
    min-width:0;
    width:100%;
  }
}
/* =========================================================
   予測レポート一覧：グラフマトリクス
   ========================================================= */
   .forecast-matrix-page{
    width: 100%;
    min-width: 0;
  }
  
  .forecast-matrix-platform-block{
    margin-bottom: 18px;
    min-width: 0;
  }
  
  .forecast-matrix-platform-title{
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 10px 2px;
    color: #0f172a;
  }
  
  .forecast-matrix-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
    width: 100%;
    min-width: 0;
  }
  
  .forecast-matrix-card{
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 16px;
    padding: 12px 12px 8px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    min-width: 0;
    width: 100%;
  }
  
  .forecast-matrix-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    margin-bottom: 4px;
  }
  
  .forecast-matrix-item{
    min-width: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  
  .forecast-matrix-head-right{
    min-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    flex: 0 0 auto;
  }
  
  .forecast-matrix-acc{
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: #2563eb;
    white-space: nowrap;
  }
  
  .forecast-matrix-acc-sub{
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    white-space: normal;
    word-break: keep-all;
  }
  
  .forecast-matrix-platform{
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 2px;
  }
  
  .forecast-matrix-sub{
    font-size: 13px;
    color: #475569;
    margin-bottom: 4px;
    word-break: break-word;
  }
  
  .forecast-matrix-meta{
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    word-break: break-word;
  }
  
  .forecast-matrix-chart-shell{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
  }
  
  .forecast-matrix-chart{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  
  .forecast-matrix-chart > div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  .forecast-matrix-chart .plotly-graph-div{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* 親カード側が Plotly に押し広げられないようにする */
  .forecast-card{
    min-width: 0;
    overflow: hidden;
  }
  
  /* 画面幅が広いときは少し詰めて並べる */
  @media (min-width: 1400px){
    .forecast-matrix-grid{
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
  }
  /* ============================================================
   予測手法バッジ（tft / prophet / baseline）
   ============================================================ */
.forecast-method-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: uppercase;
}

.forecast-method-badge.is-tft {
  background: #dbeafe;
  color: #1d4ed8;
}

.forecast-method-badge.is-prophet {
  background: #fef3c7;
  color: #b45309;
}

.forecast-method-badge.is-baseline {
  background: #f1f5f9;
  color: #64748b;
}

.forecast-method-badge.is-—,
.forecast-method-badge.is-n\/a,
.forecast-method-badge.is- {
  background: #f8fafc;
  color: #94a3b8;
  font-weight: 500;
}

.forecast-matrix-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.forecast-method-note {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 4px;
}

/* ============================================================
   予測レポート_全体：下段グラフ
   - 他画面の plot-wrap / graph-card と同じ思想で安定表示
   ============================================================ */
   .forecast-card--plot{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  
  .forecast-plot-wrap{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    overflow:hidden;
  }
  
  .forecast-plot-wrap--heat{
    min-height:420px;
  }
  
  .forecast-plot-wrap--detail{
    min-height:420px;
  }
  
  .forecast-plot-wrap > div,
  .forecast-plot-wrap .plotly-graph-div,
  .forecast-plot-wrap .js-plotly-plot,
  .forecast-plot-wrap .plot-container,
  .forecast-plot-wrap .svg-container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  
  .forecast-plot-wrap .plotly-graph-div{
    height:100% !important;
  }
  
  /* ============================================================
     予測レポート_全体：優先確認SKUテーブル
     - 発送管理の table-container / sticky header の見た目に寄せる
     ============================================================ */
  .forecast-sku-table-wrap{
    max-height: 520px;
    overflow: auto;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
  }
  
  .forecast-sku-table{
    width:100%;
    min-width:1100px;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
  }
  
  .forecast-sku-table thead th{
    position: sticky;
    top: 0;
    z-index: 5;
    background: #183181;
    color: #fff;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
  
  .forecast-sku-table tbody td{
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #fff;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  .forecast-sku-table tbody tr:hover td{
    background: rgba(0,0,0,.02);
  }
  
  .forecast-sku-table td.is-num,
  .forecast-sku-table th.is-num{
    text-align:right;
  }
  
  .forecast-sku-table tbody tr.is-selected td{
    background:#eff6ff !important;
  }
  
  .forecast-sku-table tbody tr.is-attention td{
    background:#fff7ed;
  }
  
  .forecast-chip-attention{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 8px;
    border-radius:999px;
    background:#fed7aa;
    color:#9a3412;
    font-size:11px;
    font-weight:800;
  }


  /* =========================================
   Hub思想統一：中身が増えたらスクロール
   - 外枠(sr-canvas)は固定
   - iframeは常にスクロール可能
   ========================================= */
.sr-canvas,
.sr-canvas-inner{
  overflow: hidden !important;
}

#srReportFrame,
.sr-iframe{
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* =========================================================
   embed(iframe内) の思想統一：
   - 2×2は初期表示で1画面に収まる
   - 追加されたら自然に縦スクロールできる
   ========================================================= */

/* 2×2レポート系（dashboard-wrapper）は「高さは画面基準、overflowはauto」 */
body.embed-mode .dashboard-wrapper{
  height: 100svh !important;
  min-height: 100svh !important;
  overflow-y: auto !important;     /* ★hiddenをやめる */
  overflow-x: hidden !important;
}

/* 2×2のグリッドは伸びる。溢れたら wrapper がスクロールする */
body.embed-mode .graph-area{
  min-height: 0 !important;
}

/* 個別予測確認：フィルタ直下の表示中ラベル */
.sr-current-box{
  margin: 10px 0 14px 0;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-left: 6px solid #1f6feb;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}
.sr-current-sub{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
}

/* ============================================================
   個別予測確認（3行×2列）: 2カラムグリッド（全ページ共通）
   ※ 「もしS-wallet...」にだけ入っていた .whatif-grid を共通化
   ============================================================ */
   .whatif-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
  }
  .whatif-grid > div{
    min-width: 0;            /* Plotlyが横幅計算をミスらないため */
  }
  @media (max-width: 900px){
    .whatif-grid{ grid-template-columns: 1fr; }
  }
  
  /* 「いま何を見てるか」表示（フィルタ直下の帯） */
  .sr-current-box{
    margin: 10px 0 14px 0;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-left: 6px solid #1f6feb;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
  }
  .sr-current-box b{ font-weight: 900; }
  .sr-current-sub{
    margin-top: 4px;
    font-weight: 700;
    font-size: 14px;
    color: #4b5563;
  }
  

  #ifLoading{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; background:rgba(11,18,32,.18); }
  #ifLoading:not([hidden]){ display:flex !important; }
  
  
  /* ============================================================
     ナビ項目のグレーアウト（非表示ではなく押せない）
     ============================================================ */
     #sidebar .submenu-item.is-disabled > a.submenu-link,
     #sidebar .submenu-item.is-disabled > button{
       opacity: 0.45;
       cursor: not-allowed;
     }
     
     #sidebar .submenu-item.is-disabled > a.submenu-link{
       pointer-events: none;
     }
     
     /* ★ li 自体も押せないようにする（JSや親要素クリック対策） */
     #sidebar .submenu-item.is-disabled{
       pointer-events: none;
     }
     
     #sidebar .submenu-item.is-disabled > button:hover,
     #sidebar .submenu-item.is-disabled > a.submenu-link:hover{
       background-color: transparent;
       border-left-color: transparent;
     }
         
  /* --- help "?" --- */
.help-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.25);
  color:#555;
  font-size:12px;
  line-height:1;
  cursor:help;
  background:#fff;
}
.help-dot:focus{
  outline:2px solid rgba(13,110,253,.35);
  outline-offset:2px;
}

/* --- schedule grid layout --- */
.schedule-grid{
  display:grid;
  grid-template-columns: 260px 1fr 120px;
  gap:16px;
  align-items:end;
}

.schedule-help{
  white-space:nowrap;
}

@media (max-width: 992px){
  .schedule-grid{
    grid-template-columns: 1fr;
  }
  .schedule-help{
    white-space:normal;
  }
}

/* 枠が重く見えるので、内側カードは影と余白で“軽く” */
.notify-settings .p-3.border.rounded-3.bg-white{
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* 内側の帯は薄く（主帯だけ目立つ） */
.notify-settings .p-3.border.rounded-3.bg-white .section-band{
  background: #fbf6e6;   /* いまのトーン維持 */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
}

/* help ? を少し上品に */
.help-dot{
  width: 18px;
  height: 18px;
  font-weight: 700;
  background: rgba(0,0,0,.03);
}
  /* =========================================
   ？ツールチップ（hover/focusで表示）　発送依頼用
   ========================================= */
.help-tip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  border: 1px solid #cbd5e1;
  color: #183181;
  background: #ffffff;
  position: relative;
}

.help-tip-text{
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  width: 360px;
  max-width: 70vw;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: 9999;
  white-space: normal;
}

.help-tip:hover .help-tip-text,
.help-tip:focus .help-tip-text{
  display: block;
}

/* ===============================
   通知設定：読み込み中オーバーレイ
   =============================== */
   .sw-loading-overlay{
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
  }
  
  .sw-loading-card{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
  }
  
  .sw-loading-text{
    font-size: 14px;
    color: #333;
    white-space: nowrap;
  }
  
  /* =========================================================
   供給在庫日数確認（supply inventory days check）
   ========================================================= */
.sid-wrapper{
  padding: 12px 16px;
}

.sid-hint{
  font-size: 12px;
  color: #57606a;
  margin-bottom: 10px;
}

.sid-filterbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 12px;
  border: 1px solid #d0d7de;
  border-radius: 10px;
  background: #f6f8fa;
  margin-bottom: 10px;
}

.sid-filterbar label{
  font-size: 12px;
  font-weight: 600;
  color: #24292f;
}

.sid-filterbar select{
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
}

.sid-filterbar .sid-apply{
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #0969da;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.sid-debug{
  font-size: 12px;
  color: #6e7781;
  margin: 6px 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sid-graph{
  margin-top: 8px;
}

/* ===============================
   ？ツールチップ（発送依頼用）
================================= */
.help-tip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  border: 1px solid #cbd5e1;
  color: #183181;
  background: #ffffff;
  position: relative;
}

.help-tip-text{
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  width: 360px;
  max-width: 70vw;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: 9999;
  white-space: normal;
}

.help-tip:hover .help-tip-text,
.help-tip:focus .help-tip-text{
  display: block;
}


/* ============================================================
   発送依頼登録（発送管理DB：shipreq 専用CSS 完全版）
   - 画面上部（タイトル/カテゴリ/入力方法）
   - 登録フォーム（manual）
   - SKU表
   - 履歴フィルタ（3行）
   - 履歴テーブル（列幅/改行/入力崩れ防止）
   ============================================================ */

/* -------------------------------
   ページ全体（container-fluid対策）
-------------------------------- */
body[data-active-subtab="発送依頼登録"]{
  overflow-x: hidden;
}
body[data-active-subtab="発送依頼登録"] main{
  overflow-x: hidden;
}

.shipreq-page{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 12px;
  box-sizing: border-box;
}

/* -------------------------------
   セクション共通
-------------------------------- */
.shipreq-section{
  margin: 14px 0 18px 0;
  padding: 18px;              /* ← 24 だと縦が長くなりやすいので少し詰める */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.shipreq-section-register{
  background: #f3f7ff;
  border: 1px solid #d6e2ff;
}
.shipreq-section-history{
  background: #f8f9fb;
  border: 1px solid #e0e3e8;
}

.shipreq-title{
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 800;
}

.shipreq-title-main{
  font-size: 26px;            /* ← ここが「でかい」問題の本丸 */
  font-weight: 900;
  color: #111827;
  border-left: 6px solid #183181;
  padding-left: 12px;
  line-height: 1.15;
}

.shipreq-title-history{
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  border-left: 6px solid #2c3e50;
  padding-left: 12px;
  line-height: 1.15;
}

.shipreq-note{
  margin: 6px 0 0 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

/* -------------------------------
   上部ヘッダー行（左：タイトル/説明　右：カテゴリ/入力方法）
-------------------------------- */
.shipreq-head-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;            /* 狭いときは自然に改行 */
}

.shipreq-head-left{
  min-width: 420px;
  flex: 1 1 auto;
}

.shipreq-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.shipreq-title-row h1{ margin: 0; }

/* 右側ブロック：カテゴリ＋入力方法（同じ行に） */
.shipreq-head-controls-inline{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 520px;
}

.shipreq-head-category{ width: 260px; }
.shipreq-head-mode{ width: 240px; }

.shipreq-head-category-label,
.shipreq-head-mode-label{
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  margin-bottom: 6px;
}

/* 入力方法ボタン：横幅100%で安定 */
.shipreq-head-mode .btn-group{
  width: 100%;
}
.shipreq-mode-btn{
  font-weight: 800;
  white-space: nowrap;
}
.shipreq-mode-btn.is-disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* 狭幅対応：右ブロックを縦積み */
@media (max-width: 1200px){
  .shipreq-head-left{ min-width: 0; width: 100%; }
  .shipreq-head-controls-inline{
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
  }
  .shipreq-head-category,
  .shipreq-head-mode{
    width: min(420px, 100%);
  }
}

/* -------------------------------
   shipreq専用：? ツールチップ
-------------------------------- */
.shipreq-title-row .help-tip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  user-select: none;
  border: 1px solid #cbd5e1;
  color: #183181;
  background: #fff;
  position: relative;
}

.shipreq-title-row .help-tip-text{
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
  width: 360px;
  max-width: 70vw;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: 9999;
  white-space: normal;
}

.shipreq-title-row .help-tip:hover .help-tip-text,
.shipreq-title-row .help-tip:focus .help-tip-text{
  display: block;
}

/* -------------------------------
   manual入力フォーム（grid）
   ※ 現在のHTMLは 依頼日/種別/行き先/到着日/参照/請求/登録 の “7ブロック” がある
-------------------------------- */
.shipreq-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* ★7列にする（請求書追加に対応） */
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

/* 登録ボタンセル（最後のボタンを潰さない） */
.shipreq-submit-cell{
  min-width: 140px;
}
.shipreq-submit-btn{
  font-weight: 900;
  white-space: nowrap;
}

/* 狭幅：2列へ */
@media (max-width: 1100px){
  .shipreq-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipreq-submit-cell{ min-width: 0; }
}

/* date input の欠け防止（yyyyが欠ける件） */
.shipreq-grid input[type="date"],
.shipreq-history-grid input[type="date"],
.shipreq-history-table input[type="date"]{
  min-width: 140px;
}

/* -------------------------------
   SKU表（登録側）
-------------------------------- */
.shipreq-sku-box{ margin-top: 10px; }

.shipreq-sku-table{
  width: 100%;
  table-layout: fixed;
}

/* colgroup 幅（登録側） */
.shipreq-sku-table col.col-img{ width: 120px; }       /* 画像を大きくしすぎない */
.shipreq-sku-table col.col-color{ width: 220px; }
.shipreq-sku-table col.col-platform-code{ width: 240px; }
.shipreq-sku-table col.col-qty{ width: 120px; }
.shipreq-sku-table col.col-memo{ width: 320px; }

/* 画像セル */
/* 画像セル（rowspanでも崩れないよう class 指定） */
.shipreq-sku-table td.shipreq-img-cell,
.shipreq-sku-table th.shipreq-img-cell{
  text-align: center;
  vertical-align: middle;
}

.shipreq-sku-table img.shipreq-img{
  display: block;
  max-width: 100px;
  max-height: 100px;
  margin: 0 auto;
  object-fit: contain;
}

/* 数量 input */
.shipreq-sku-table td input[type="number"]{
  width: 100%;
  max-width: 90px;
  margin: 0 auto;
  text-align: right;
}

/* メモ（rowspanセル） */
.shipreq-memo-td{
  position: relative;
  padding: 8px;
  vertical-align: top;
}
.shipreq-memo-wrap{
  position: absolute;
  inset: 8px;
}
.shipreq-memo-box{
  width: 100%;
  height: 100%;
  resize: none;
  line-height: 1.4;
}

/* -------------------------------
   履歴フィルタ（3行）
   1行目：日付4つ
   2行目：種別/行き先/参照/請求/件数/メモ
   3行目：ボタン群
-------------------------------- */
.shipreq-history-filter{ margin-top: 10px; }

.shipreq-history-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

/* 1行目 */
.hg-date-from{ grid-column: span 3; }
.hg-date-to  { grid-column: span 3; }
.hg-eta-from { grid-column: span 3; }
.hg-eta-to   { grid-column: span 3; }

/* 2行目（12内に収める） */
.hg-type    { grid-column: span 2; }
.hg-to      { grid-column: span 2; }
.hg-ref     { grid-column: span 2; }
.hg-invoice { grid-column: span 2; }
.hg-limit   { grid-column: span 1; }
.hg-memo    { grid-column: span 3; }  /* ★メモは余りを吸う */

.hg-actions{
  grid-column: 1 / -1;          /* ★3行目は全幅 */
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.shipreq-history-grid .form-label{
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  margin-bottom: 6px;
}

.shipreq-history-grid .btn{
  padding: 6px 10px;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* 狭幅：2列へ */
@media (max-width: 1100px){
  .shipreq-history-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hg-date-from,.hg-date-to,.hg-eta-from,.hg-eta-to,
  .hg-type,.hg-to,.hg-ref,.hg-invoice,.hg-limit,.hg-memo{
    grid-column: span 1;
  }
  .hg-actions{ grid-column: span 2; }
}

/* -------------------------------
   履歴テーブル（横スクロール禁止・列幅安定）
-------------------------------- */
.shipreq-history-scroll{
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: auto;                   /* hidden→auto：入らない時だけ横スクロール */
  -webkit-overflow-scrolling: touch;
}

.shipreq-history-table{
  min-width: 1260px;                  /* 全列の合計幅を確保 */
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

/* sticky header（既存の table th の青をそのまま使う前提） */
.shipreq-history-scroll thead th{
  position: sticky;
  top: 0;
  z-index: 5;
}

/* colgroup（履歴側） */
.shipreq-history-table col.h-col-check{ width: 42px; }
.shipreq-history-table col.h-col-date{ width: 96px; }
.shipreq-history-table col.h-col-type{ width: 120px; }
.shipreq-history-table col.h-col-to{ width: 86px; }
.shipreq-history-table col.h-col-cat{ width: 110px; }
.shipreq-history-table col.h-col-ref{ width: 140px; }
.shipreq-history-table col.h-col-invoice{ width: 140px; }
.shipreq-history-table col.h-col-eta{ width: 150px; }     /* 欠け防止 */
.shipreq-history-table col.h-col-code{ width: 150px; }    /* 改行させない前提 */
.shipreq-history-table col.h-col-color{ width: 140px; }
.shipreq-history-table col.h-col-qty{ width: 86px; }
.shipreq-history-table col.h-col-memo{ width: auto; }     /* 余りを吸う */

/* セル基本 */
.shipreq-history-table td{
  overflow: hidden;
  vertical-align: middle;
}

/* ★商品コード：改行禁止（9列目：col順と一致） */
.shipreq-history-table td:nth-child(9){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ★チェック列：固定（でかくならない） */
.shipreq-history-table td:first-child,
.shipreq-history-table th:first-child{
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  text-align: center;
}

/* ★数量input：固定（でかくならない） */
.shipreq-history-table .shipreq-qty-input{
  width: 74px !important;
  max-width: 74px !important;
  text-align: right;
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: .35rem;
  padding-right: .35rem;
}

/* ETA/date input：欠け防止 */
.shipreq-history-table input[type="date"]{
  width: 100%;
  min-width: 140px;
  max-width: 150px;
  box-sizing: border-box;
}

/* メモ（rowspan）縦いっぱい */
.shipreq-history-table td.h-td-memo{
  position: relative;
  padding: 6px;
  vertical-align: top;
}
.shipreq-history-table td.h-td-memo .h-memo-wrap{
  position: absolute;
  inset: 6px;
}
.shipreq-history-table td.h-td-memo textarea.h-memo{
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box;
  resize: none;
  overflow: auto;
  line-height: 1.35;
}

/* 塊見せ（rowspan列） */
.shipreq-history-table td.h-td-type,
.shipreq-history-table td.h-td-eta,
.shipreq-history-table td.h-td-memo{
  background: rgba(0,0,0,0.02);
}

/* 依頼日：列幅を増やす（yyyy/mm/dd が欠けない） */
.shipreq-history-table col.h-col-date{ width: 120px !important; }
.shipreq-history-table td:nth-child(2){
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 行き先/場所（4列目）・カテゴリー（5列目）：改行禁止 */
.shipreq-history-table td:nth-child(4),
.shipreq-history-table td:nth-child(5){
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ついでにヘッダも改行させない（見た目安定） */
.shipreq-history-table thead th:nth-child(2),
.shipreq-history-table thead th:nth-child(4),
.shipreq-history-table thead th:nth-child(5){
  white-space: nowrap !important;
}

/* ============================================================
   shipreq 履歴：行き先/場所を広げる + カテゴリの…をやめる + 少し小さく
   （このブロックを一番下に追記）
   ============================================================ */

/* 1) 表全体を少しだけコンパクトに（見える情報量UP） */
.shipreq-section-history .shipreq-history-table{
  font-size: 13px !important;          /* 14 → 13 くらい */
}
.shipreq-section-history .shipreq-history-table th,
.shipreq-section-history .shipreq-history-table td{
  padding: 6px 8px !important;         /* 8px → 6px */
}

/* 2) 列幅（行き先/場所を増やす／カテゴリも少し増やす） */
.shipreq-history-table col.h-col-to { width: 170px !important; }
.shipreq-history-table col.h-col-cat{ width: 160px !important; }

/* 3) 行き先/場所：省略はOK（…）だが、まずは見えるように幅を確保 */
.shipreq-history-table td:nth-child(4){
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 4) カテゴリー：…禁止（省略しない）。横はみ出す場合は“普通に折り返す” */
.shipreq-history-table td:nth-child(5){
  white-space: normal !important;      /* ← nowrap をやめる */
  overflow: visible !important;
  text-overflow: clip !important;      /* ← …をやめる */
  word-break: keep-all !important;     /* 日本語はなるべく単語途中で切らない */
  overflow-wrap: anywhere !important;  /* 長い時だけ折る */
  line-height: 1.2 !important;
}

/* 5) 見出しは崩れないよう1行固定 */
.shipreq-history-table thead th:nth-child(4),
.shipreq-history-table thead th:nth-child(5){
  white-space: nowrap !important;
}

/* ============================================================
   shipreq 履歴：通常は横スクロール無し
   画面が狭い時だけ横スクロールを許可して“見える化”
   ============================================================ */

/* 通常：横スクロール禁止（初期表示はこれ） */
.shipreq-section-history .shipreq-history-scroll{
  overflow-x: hidden !important;
}

/* 通常：テーブルは親幅に合わせて詰める（横スクロールを出さない） */
.shipreq-section-history .shipreq-history-table{
  width: 100% !important;
  table-layout: fixed !important;
  min-width: 0 !important;           /* ←ここ重要：通常はmin幅を持たせない */
}

/* スマホ/狭い画面だけ：横スクロールをONにして列を守る */
@media (max-width: 1280px){
  .shipreq-section-history .shipreq-history-scroll{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;        /* 対応ブラウザだけでOK */
  }

  /* この幅より狭いと潰れる → ここで“列の最低幅”を保証して横スクロールへ */
  .shipreq-section-history .shipreq-history-table{
    min-width: 1400px !important;    /* ←要調整。まずは 1400 でOK */
  }
}
/* ============================================================
   shipreq: 完了ポップアップ（toast）
   ============================================================ */
   .shipreq-toast[hidden]{ display:none !important; }
   .shipreq-toast{
     position: fixed;
     inset: 0;
     z-index: 50000;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(15,23,42,.35);
   }
   .shipreq-toast__card{
     width: min(420px, 92vw);
     background: #fff;
     border-radius: 14px;
     box-shadow: 0 18px 60px rgba(0,0,0,.25);
     padding: 14px 14px 12px;
   }
   .shipreq-toast__title{
     font-weight: 900;
     font-size: 15px;
     margin-bottom: 6px;
   }
   .shipreq-toast__msg{
     font-size: 13px;
     line-height: 1.6;
     color: #111827;
   }
   .shipreq-toast__actions{
     display:flex;
     justify-content:flex-end;
     margin-top: 10px;
   }
   
   /* ============================================================
      shipreq-history-grid：表示件数削除 + カテゴリ追加のレイアウト
      ============================================================ */
   .shipreq-section-history .hg-cat-filter{ grid-column: span 2; }
   
   /* 画面が広いときは2行目を“詰めて”収める */
   @media (min-width: 1101px){
     .shipreq-section-history .hg-type       { grid-column: span 2; }
     .shipreq-section-history .hg-to         { grid-column: span 2; }
     .shipreq-section-history .hg-cat-filter { grid-column: span 2; }
     .shipreq-section-history .hg-ref        { grid-column: span 2; }
     .shipreq-section-history .hg-invoice    { grid-column: span 2; }
     .shipreq-section-history .hg-memo       { grid-column: span 2; }
   }

/* 履歴(フィルタ＋表)だけを覆う */
.shipreq-history-scope{
  position: relative;
}

/* 履歴専用ローディング */
.shipreq-history-loading{
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;      /* 上寄せ */
  justify-content: center;
  padding-top: 78px;            /* ★「更新/削除」ボタンに被らない位置（必要なら調整） */
}
.shipreq-history-loading[hidden]{ display:none; }

.shipreq-history-loading__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(1px);
}

/* ピル */
.shipreq-history-loading__pill{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  font-weight: 900;
  color: #374151;
}
.shipreq-toast__card.is-error{
  border: 2px solid rgba(220, 38, 38, 0.35);
}
.shipreq-toast__card.is-error .shipreq-toast__title{
  color: #b91c1c;
}
  /* ==========================
   販売レポート：シェア動向
   - 2軸レイアウト（左=100%積み上げ / 右=Bump）
   - 表は出さず、下にサマリだけ表示
   ========================== */
.share-trend-wrapper{
  /* dashboard-wrapper の overflow:hidden だと下のサマリが切れるので解除 */
  overflow: visible !important;
  min-height: auto !important;
}

.share-graphs{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.share-graph{
  min-width: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
}

.share-graph-title{
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #334155;
}

.share-summary{
  margin-top: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.share-summary ul{
  margin: 6px 0 0 18px;
}

/* 狭幅では縦積みに */
@media (max-width: 1100px){
  .share-graphs{
    grid-template-columns: minmax(0, 1fr);
  }
}


/* =====================================================
   S-wallet お役立ち資料（.oyk-wrap 内のみ有効）
   ===================================================== */

/* テーマ変数（oyk専用） */
.oyk-wrap{
  --oyk-brand: #183181;        /* S-wallet濃紺 */
  --oyk-brand-2: #243fa3;
  --oyk-bg: #f6f8fc;           /* 画面背景 */
  --oyk-surface: #ffffff;      /* カード背景 */
  --oyk-text: #111827;
  --oyk-muted: #6b7280;
  --oyk-border: rgba(0,0,0,.10);

  background: var(--oyk-bg);
  color: var(--oyk-text);
  padding: 24px;
}

/* セクションタイトル（既存青帯をS-wallet色に統一） */
.oyk-wrap .oyk-section-title{
  background: var(--oyk-brand);
  color: #fff;
  border-radius: 6px;
}

/* カード系 */
.oyk-wrap .oyk-card,
.oyk-wrap .oyk-panel{
  background: var(--oyk-surface);
  border: 1px solid var(--oyk-border);
  border-radius: 8px;
  padding: 16px;
}

/* テキスト調整 */
.oyk-wrap p{
  color: var(--oyk-text);
}

.oyk-wrap small{
  color: var(--oyk-muted);
}

/* =========================
   Oyakudachi: 強みカードの可読性UP
   ========================= */
   .point-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    margin-bottom:10px;
  }
  
  .point-ico{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background: rgba(24,49,129,.10); /* S-wallet濃紺の薄背景 */
    color:#183181;
    flex: 0 0 auto;
  }
  
  /* 箇条書きを“説明ブロック”っぽく整える */
  .point-list li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:6px 0;
  }
  
  .point-list li i{
    margin-top:4px;
    color:#183181;
    flex: 0 0 auto;
  }
  
  /* 強調文字を少し目立たせる */
  .point-list strong{
    color:#111827;
  }
  
  /* カード間の余白＆影を少しだけ上品に（必要なら） */
  .card.point-card{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
  }
/* ===========================
   Help：トップ（カード）
=========================== */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 16px;
  margin-top: 16px;
}

.help-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.help-card .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.help-card .card-header i {
  font-size: 1.15em; /* ★大きすぎ防止 */
  color: #183181;
}

.help-card h2 {
  margin: 0;
  font-size: 1.02em;  /* ★大きすぎ防止 */
  font-weight: 800;
  line-height: 1.25;
}

.help-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  flex: 1;
}

.help-card ul li {
  margin-bottom: 6px;
}

.help-card ul li a {
  color: #183181;
  text-decoration: none;
}

.help-card ul li a:hover {
  text-decoration: underline;
}

.help-card ul li.help-entry a{
  font-weight: 800;
}

.help-card ul li.help-entry a::before{
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  opacity: 0.65;
}

.help-card .card-footer {
  text-align: right;
}

.help-card .card-footer a {
  display: inline-block;
  padding: 6px 12px;
  background: #183181;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9em;
}

/* =========================================================
   HELP LAYOUT – 完全版
   - タイトル → 説明 → タイル（縦並び固定）
   - タイルは潰れない（grid固定）
   - 右サイドは被らない
   - Plotlyは必ず高さ確保
   - 目次アンカーのスクロール吸収を防ぐ（scroll-margin-top）
   - 右サイド/目次の折り返しを同じ左位置から（ぶら下がり防止）
   ========================================================= */

/* JSがここを上書きして、固定ヘッダー高さに追従させる */
:root{
  --help-scroll-offset: 88px; /* fallback */
}

#help-content{
  --help-gap: 22px;
  --help-radius: 14px;
  --help-border: rgba(15, 23, 42, .12);
  --help-shadow: 0 10px 28px rgba(15,23,42,.06);

  /* stickyの基準（JSが --help-scroll-offset を更新するが、sticky topはこれで固定でもOK） */
  --help-sticky-top: 86px;
}

/* =========================
   レイアウト
   ========================= */

#help-content .help-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--help-gap);
  align-items: start;
}

@media (max-width: 1100px){
  #help-content .help-layout{
    grid-template-columns: 1fr;
  }
}

#help-content .help-main{
  min-width: 0;
}

/* 右カラムは .help-sidebar を正とする（HTML側もこれに合わせる） */
#help-content .help-sidebar{
  position: sticky;
  top: var(--help-sticky-top);
  align-self: start;
  max-height: calc(100vh - var(--help-sticky-top));
  overflow: auto;
}

@media (max-width: 1100px){
  #help-content .help-sidebar{
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* =========================
   HERO（タイトル・説明・タイル）
   ========================= */

#help-content .help-hero{
  background: #fff;
  border: 1px solid var(--help-border);
  border-radius: var(--help-radius);
  box-shadow: var(--help-shadow);
  padding: 18px;
  margin-bottom: 16px;
}

/* タイトルは改行しない（要望） */
#help-content .help-title-full,
#help-content .help-title{
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 12px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ※前のCSSはスマホで white-space: normal にしてたが、要望により改行しないに統一 */
@media (max-width: 640px){
  #help-content .help-title-full,
  #help-content .help-title{
    white-space: nowrap;
  }
}

#help-content .help-lead{
  margin: 0 0 18px 0;
  font-size: 14px;
  line-height: 1.8;
  color: #475569;
}

/* =========================
   タイル（潰れない）
   ========================= */

#help-content .help-tiles2{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

@media (max-width: 1100px){
  #help-content .help-tiles2{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 640px){
  #help-content .help-tiles2{
    grid-template-columns: 1fr;
  }
}

#help-content .help-tile2{
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;

  background: #fff;
  border: 1px solid var(--help-border);
  border-radius: var(--help-radius);
  padding: 14px;
  min-height: 100px;
  text-decoration: none;
  color: inherit;
  transition: all .2s ease;
}

#help-content .help-tile2:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  border-color: rgba(24,49,129,.4);
}

#help-content .help-tile2__icon{
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eef2ff;
  color: #183181;
}

#help-content .help-tile2__title{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#help-content .help-tile2__text{
  font-size: 12.5px;
  color: #475569;
}

/* =========================
   目次
   ========================= */

#help-content .help-toc{
  background: #fff;
  border: 1px solid var(--help-border);
  border-radius: var(--help-radius);
  padding: 16px;
  margin-bottom: 16px;
}

#help-content .help-toc__title{
  font-weight: 900;
  margin-bottom: 8px;
}

/* 折り返しても同じ左位置から入る（ぶら下がり防止） */
#help-content .help-toc ul{
  margin: 0;
  padding-left: 1.25rem; /* マーカー分はここで確保 */
}

#help-content .help-toc li{
  margin: 6px 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-indent: 0;
  list-style-position: outside;
}

/* =========================
   セクション
   ========================= */

#help-content .help-section{
  margin-top: 24px;

  /* ★アンカー吸収防止（固定ヘッダー + 少し余白） */
  scroll-margin-top: calc(var(--help-scroll-offset) + 12px);
}

#help-content .help-section h2{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
  border-top: 1px dashed #e5e7eb;
  padding-top: 14px;

  /* 念のため h2 単体でも */
  scroll-margin-top: calc(var(--help-scroll-offset) + 12px);
}

#help-content .help-section h3{
  font-size: 15px;
  font-weight: 900;
  margin: 16px 0 8px;

  scroll-margin-top: calc(var(--help-scroll-offset) + 12px);
}

/* =========================
   図（Plotly）
   ========================= */

#help-content .help-plotly{
  width: 100%;
  height: 340px;
  margin-top: 10px;
}

#help-content .help-visual{
  background: #fff;
  border: 1px solid var(--help-border);
  border-radius: var(--help-radius);
  padding: 14px;
  margin: 16px 0;
}

#help-content .help-visual__title{
  font-weight: 900;
  margin-bottom: 6px;
}

/* =========================
   右サイド
   ========================= */

#help-content .help-panel{
  background: #fff;
  border: 1px solid var(--help-border);
  border-radius: var(--help-radius);
  padding: 14px;
  margin-bottom: 16px;
}

#help-content .help-panel-title{
  font-weight: 900;
  margin-bottom: 8px;
}

/* 右サイドの文章も折り返しを揃える */
#help-content .help-compact-list{
  margin: 0;
  padding-left: 1.25rem;
}

#help-content .help-compact-list li{
  white-space: normal;
  overflow-wrap: anywhere;
  text-indent: 0;
  list-style-position: outside;
}

#help-content .help-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#help-content .help-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(24,49,129,.3);
  background: rgba(24,49,129,.08);
  color: #183181;
  text-decoration: none;
}

/* =========================
   ★修正：タイトルと説明が同じ行に並ぶのを強制的に止める
   （H1の右に説明が回り込む問題の解消）
   ========================= */
   #help-content .help-hero{
    display: flex !important;          /* 他CSSで横並び指定されてても上書き */
    flex-direction: column !important; /* 必ず縦並び */
    align-items: stretch !important;   /* 左位置を揃える */
  }
  
  /* タイトルと説明を必ずブロック要素として縦積み */
  #help-content .help-hero > .help-title,
  #help-content .help-hero > .help-title-full,
  #help-content .help-hero > .help-lead{
    display: block !important;
    width: 100% !important;
  }
  
  /* 説明文の改行（折り返し）を自然に＆左位置固定 */
  #help-content .help-lead{
    margin-top: 8px !important;
    white-space: normal !important;
  }
  /* =========================================================
   Help：青ヘッダー以外は全部ページスクロール
   ========================================================= */

/* まず help-content 自体が「内側スクロール」になっていたら殺す */
body[data-active-subtab="ヘルプ"] #help-content.help-content-pad{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 右サイド（help-sidebar / help-aside どっちでも）を固定しない */
body[data-active-subtab="ヘルプ"] #help-content .help-sidebar,
body[data-active-subtab="ヘルプ"] #help-content .help-aside{
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* =========================================================
   Help：アンカー(#id)のスクロール位置をヘッダー高さに追従させる
   - id が section / h2 / a どれに付いてても効くように [id] に付ける
   - スクロール親が main / body どっちでも効くように scroll-padding も入れる
   ========================================================= */

   body[data-active-subtab="ヘルプ"]{
    --help-anchor-offset: 84px; /* JSが上書きするが、保険で初期値 */
    scroll-padding-top: var(--help-anchor-offset);
  }
  
  body[data-active-subtab="ヘルプ"] main{
    scroll-padding-top: var(--help-anchor-offset);
  }
  
  /* ★これが効く：idを持つ要素すべてに offset を適用 */
  body[data-active-subtab="ヘルプ"] #help-content [id]{
    scroll-margin-top: var(--help-anchor-offset);
  }

/* =========================================================
   Help：Plotlyが真っ白になる対策（高さを必ず確保）
   index.html の .plotly-graph-div{ height:100%!important } を上書き
   ========================================================= */

   body[data-active-subtab="ヘルプ"] #help-content .help-plotly{
    width: 100%;
    min-height: 340px; /* ←最低限の高さ */
  }
  
  /* Plotlyは描画すると同じ要素に .plotly-graph-div が付くので、そこを確実に上書き */
  body[data-active-subtab="ヘルプ"] #help-content .help-plotly.plotly-graph-div{
    height: 340px !important;
    min-height: 340px !important;
  }

  #help-content .help-hero{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* ============================================================
   コストレポート_全体：フィルタ＆テーブルの見た目改善
   ============================================================ */

/* フィルタ行：個別予測確認(.filters)と同トーンに寄せる */
body[data-active-subtab="コストレポート_全体"] .filters{
  margin: 8px 0 10px;
}

body[data-active-subtab="コストレポート_全体"] .filters form{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-active-subtab="コストレポート_全体"] .filters label{
  font-size: 12px;
  font-weight: 800;
  color: #54698d;
}

/* select を小さく上品に */
body[data-active-subtab="コストレポート_全体"] .sw-select{
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  font-size: 12px;
  background: #fff;
}

/* テーブル枠（他ページ風） */
body[data-active-subtab="コストレポート_全体"] .cost-table-wrap{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  overflow: auto;
  max-height: 520px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* テーブル本体 */
body[data-active-subtab="コストレポート_全体"] table.cost-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  font-size: 13px;
}

/* ヘッダー：青 + sticky */
body[data-active-subtab="コストレポート_全体"] table.cost-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #183181;
  color: #fff;
  font-weight: 800;
  text-align: center;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

/* セル */
body[data-active-subtab="コストレポート_全体"] table.cost-table tbody td{
  padding: 9px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: right;
  white-space: nowrap;
}

/* 1列目（年月）は左寄せ */
body[data-active-subtab="コストレポート_全体"] table.cost-table tbody td:first-child{
  text-align: left;
  font-weight: 800;
}

/* ホバー */
body[data-active-subtab="コストレポート_全体"] table.cost-table tbody tr:hover td{
  background: rgba(0,0,0,.02);
}

/* スマホでは横スクロール */
@media (max-width: 1100px){
  body[data-active-subtab="コストレポート_全体"] .cost-table-wrap{
    max-height: 60vh;
  }
  body[data-active-subtab="コストレポート_全体"] table.cost-table{
    min-width: 980px;
  }
}
/* ============================================================
   コストレポート_全体
   - 95%幅で中央寄せ
   - PC幅が変わっても2グラフを横並び維持
   - plotly のはみ出し防止
   ============================================================ */
   body[data-active-subtab="コストレポート_全体"] .dashboard-wrapper.cost-overview-page{
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 24px;
    overflow: visible !important;
  }
  
  /* 2列を必ず維持 */
  body[data-active-subtab="コストレポート_全体"] .cost-overview-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
  }
  
  /* 各グラフ枠が縮めるようにする */
  body[data-active-subtab="コストレポート_全体"] .cost-overview-plot{
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }
  
  /* plotly本体を親幅いっぱいに */
  body[data-active-subtab="コストレポート_全体"] .cost-overview-plot > div,
  body[data-active-subtab="コストレポート_全体"] .cost-overview-plot .plotly-graph-div,
  body[data-active-subtab="コストレポート_全体"] .cost-overview-plot .js-plotly-plot,
  body[data-active-subtab="コストレポート_全体"] .cost-overview-plot .plot-container,
  body[data-active-subtab="コストレポート_全体"] .cost-overview-plot .svg-container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* テーブルも同じ95%幅の流れで自然に見せる */
  body[data-active-subtab="コストレポート_全体"] .cost-table-wrap{
    width: 100%;
    margin-top: 16px;
  }

  /* costLoading: hidden が外れたら表示（ifLoading と同じ思想） */
#costLoading:not([hidden]){
  display: flex !important;
  position: fixed;
  inset: 0;
  background: rgba(248,250,252,.55);
  backdrop-filter: blur(1px);
  z-index: 9999;
  pointer-events: auto;
}
  .supply-toolbar-card{
    border-radius:16px;
    background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  }
  .supply-toolbar-card .form-label{
    font-size:12px;
    font-weight:700;
    color:#475569;
  }
  .supply-update-btn{
    min-width:120px;
    border-radius:999px;
    font-weight:700;
  }
  .supply-toolbar-note{
    font-size:12px;
    color:#64748b;
  }
  .supply-source-toggle .btn{
    font-weight:700;
  }
  .supply-source-toggle .btn-check:checked + .btn{
    box-shadow:none;
  }

  .supply-side-panel{
    background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
    border-radius:18px;
    padding:20px;
    border:1px solid #e2e8f0;
  }
  .supply-panel-kicker{
    font-size:11px;
    letter-spacing:.08em;
    font-weight:800;
    color:#64748b;
    margin-bottom:8px;
  }
  .supply-panel-title{
    font-size:22px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:6px;
  }
  .supply-panel-subtitle{
    font-size:13px;
    color:#64748b;
    line-height:1.7;
    margin-bottom:16px;
  }
  .supply-current-basis{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#334155;
    background:#eef6ff;
    border:1px solid #dbeafe;
    border-radius:999px;
    padding:8px 12px;
    margin-bottom:18px;
  }

  .supply-legend-cards{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .supply-legend-card{
    display:flex;
    gap:12px;
    align-items:flex-start;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:12px 14px;
    background:#fff;
  }
  .supply-legend-card .legend-dot{
    width:12px;
    height:12px;
    border-radius:999px;
    margin-top:5px;
    flex:0 0 auto;
  }
  .supply-legend-card .line-dot{
    height:3px;
    border-radius:999px;
    width:18px;
    margin-top:10px;
  }
  .supply-legend-card .legend-title{
    font-size:14px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:2px;
  }
  .supply-legend-card .legend-desc{
    font-size:12px;
    color:#64748b;
    line-height:1.6;
  }

  .supply-legend-card.is-past .legend-dot{ background:#93c5fd; }
  .supply-legend-card.is-current .legend-dot{ background:#2563eb; }
  .supply-legend-card.is-future .legend-dot{ background:#1d4ed8; }
  .supply-legend-card.is-shipment .legend-dot{ background:#f59e0b; }
  .supply-legend-card.is-stockout .legend-dot{ background:#ef4444; }
  .supply-legend-card.is-base .legend-dot{ background:#0f172a; }

/* =========================================================
   Amazon Ads レポート
   ========================================================= */
   .amazon-ads-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    align-items:start;
}

.amazon-ads-span-2{
    grid-column:1 / -1;
}

.amazon-ads-card{
  background:#fff;
  border:1px solid rgba(24,49,129,0.16);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 22px rgba(24,49,129,0.10);
  font-family: inherit;
}

.amazon-ads-card-title{
  font-size:12px;
  font-weight:800;
  color:#183181;
  margin-bottom:10px;
  font-family: inherit;
}
.amazon-ads-summary-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-bottom:16px;
}
/* ステータスランプ */
.amazon-ads-summary-card {
  position: relative;  /* ← 既存に追加 */
}
.amazon-ads-status-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.amazon-ads-status-dot.status-green {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.4);
}
.amazon-ads-status-dot.status-yellow {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245,158,11,0.4);
}
.amazon-ads-status-dot.status-red {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239,68,68,0.4);
}

/* サマリーバナー */
.amazon-ads-banner {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  color: #fff;
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: inherit;
}
.amazon-ads-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.amazon-ads-banner-text {
  font-size: 14px;
  line-height: 1.7;
}
.amazon-ads-banner-text strong {
  color: #7dd3fc;
}
/* カテゴリテーブルのカードは横スクロール不要 */
.amazon-ads-cat-wrap,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-cat-wrap {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
/* 商品カテゴリ別テーブル — min-width:900px の上書きを打ち消す */
.amazon-ads-cat-table,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card .amazon-ads-cat-table,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card table.amazon-ads-cat-table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: auto;
}
.amazon-ads-cat-table .cat-name-cell {
  font-weight: 700;
}
/* キャンペーン別詳細テーブル ─ カード自体は overflow:visible にし、
   内側の .amazon-ads-camp-detail-scroll で横スクロールさせる。
   ※ CSS仕様上 overflow-x:auto を付けると overflow-y:visible→auto に
     強制変換され、flex親から高さが潰される原因になっていた。        */
/* キャンペーン別詳細テーブル
   - 外側(.amazon-ads-camp-detail-ywrap)で縦スクロール
   - 内側(.amazon-ads-camp-detail-scroll)で横スクロール
   - thead は固定
*/
.amazon-ads-camp-detail-ywrap,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-camp-detail-ywrap{
  max-height: 300px;                 /* ← 縦スクロールの高さ。必要なら 380〜520 で調整 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border: 1px solid rgba(24,49,129,0.10);
  border-radius: 12px;
  background: #fff;
}

.amazon-ads-camp-detail-wrap,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-camp-detail-wrap{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
}

/* 横スクロールは内側だけ */
.amazon-ads-camp-detail-scroll{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.amazon-ads-camp-detail-table,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card .amazon-ads-camp-detail-table,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card table.amazon-ads-camp-detail-table{
  min-width: 1100px !important;
  width: max-content !important;
  table-layout: auto !important;
  display: table !important;
  visibility: visible !important;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.amazon-ads-camp-detail-table .camp-name-cell{
  font-weight: 700;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ヘッダー固定 */
.amazon-ads-camp-detail-table th{
  font-size: 11px;
  white-space: nowrap;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* 中身 */
.amazon-ads-camp-detail-table td{
  font-size: 12px;
  white-space: nowrap;
}

/* 行ホバー */
.amazon-ads-camp-detail-table tbody tr:hover td{
  background: rgba(0,0,0,.02);
}


/* ACOSバー */
.acos-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.acos-bar {
  width: 80px;
  height: 8px;
  background: #f0f2f5;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.acos-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 4px;
}
.acos-bar--low::after    { width: 30%; background: #22c55e; }
.acos-bar--mid-low::after{ width: 50%; background: #86efac; }
.acos-bar--mid::after    { width: 65%; background: #f59e0b; }
.acos-bar--high::after   { width: 85%; background: #ef4444; }
.acos-bar--vhigh::after  { width: 100%; background: #dc2626; }
.acos-bar--neutral::after{ width: 0; }

.acos-num { font-weight: 700; font-size: 13px; min-width: 48px; }
.acos-num--low, .acos-num--mid-low { color: #16a34a; }
.acos-num--mid     { color: #d97706; }
.acos-num--high, .acos-num--vhigh  { color: #dc2626; }

/* 判定バッジ */
.cat-rating {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.cat-rating.is-boost { background: #dcfce7; color: #15803d; }
.cat-rating.is-ok    { background: #dbeafe; color: #1d4ed8; }
.cat-rating.is-watch { background: #fef3c7; color: #b45309; }
.cat-rating.is-cut   { background: #fee2e2; color: #dc2626; }

.cat-target-note {
  font-size: 11px;
  color: #999;
  text-align: right;
  margin-top: 8px;
}

/* 改善アクションカード */
.amazon-ads-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.amazon-ads-action-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-left: 4px solid;
  font-family: inherit;
}
.amazon-ads-action-card.priority-high { border-left-color: #ef4444; }
.amazon-ads-action-card.priority-mid  { border-left-color: #f59e0b; }
.amazon-ads-action-card.priority-low  { border-left-color: #3b82f6; }

.action-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.action-card-title {
  font-size: 14px;
  font-weight: 700;
}
.action-card-priority {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.action-card-priority.high { background: #fee2e2; color: #dc2626; }
.action-card-priority.mid  { background: #fef3c7; color: #b45309; }
.action-card-priority.low  { background: #dbeafe; color: #1d4ed8; }

.action-card-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.6;
}
.action-card-impact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
}
.impact-label { color: #888; }
.impact-value { font-weight: 700; }
.impact-value.positive { color: #16a34a; }
.impact-value.negative { color: #dc2626; }

.badge-priority {
  font-size: 11px;
  background: #e8eaed;
  color: #666;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 400;
}

@media (max-width: 1200px) {
  .amazon-ads-action-grid {
      grid-template-columns: 1fr;
  }
}

.amazon-ads-summary-card{
  background:#fff;
  border:1px solid rgba(24,49,129,0.16);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 8px 22px rgba(24,49,129,0.10);
  font-family: inherit;
  min-height:92px;
}

.amazon-ads-summary-card__title{
  font-size:11px;
  color:#183181;
  margin-bottom:4px;
  font-weight:800;
  font-family: inherit;
  line-height:1.35;
}

.amazon-ads-summary-card__value{
  font-size:20px;
  font-weight:800;
  color:#12245f;
  line-height:1.15;
  font-family: inherit;
}

.amazon-ads-summary-card__sub{
  font-size:11px;
  color:#54698d;
  margin-top:3px;
  font-family: inherit;
  line-height:1.35;
}

.amazon-ads-subcard + .amazon-ads-subcard{
    margin-top:14px;
}

.amazon-ads-subcard-title{
    font-weight:700;
    margin-bottom:8px;
    color:#16325c;
}

.amazon-ads-mini-table th,
.amazon-ads-mini-table td{
    font-size:12px;
    white-space:nowrap;
    vertical-align:middle;
    padding:8px 10px;
    font-family: inherit;
}

.amazon-ads-plot-wrap{
    width:100%;
}

.amazon-ads-plot-wrap .js-plotly-plot,
.amazon-ads-plot-wrap .plot-container,
.amazon-ads-plot-wrap .svg-container{
    width:100% !important;
}

@media (max-width: 1200px){
    .amazon-ads-grid{
        grid-template-columns:1fr;
    }
    .amazon-ads-summary-cards{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .amazon-ads-summary-cards{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   Amazon Ads レポート：フィルタ
   ========================================================= */
   body[data-active-subtab="Amazon Ads レポート"] .dashboard-wrapper{
    position:relative;
    display: block !important;        /* flex縦積みを解除→自然な縦並び */
    overflow: visible !important;     /* overflow:hiddenによるテーブル潰れ防止 */
    height: auto !important;
    min-height: auto !important;
  }
  body[data-active-subtab="Amazon Ads レポート"] .filters{
    margin:8px 0 16px;
  }

  body[data-active-subtab="Amazon Ads レポート"] #amazonAdsForm{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
    font-family: inherit;
  }

  body[data-active-subtab="Amazon Ads レポート"] .filters label{
    margin:0;
    font-size:12px;
    font-weight:800;
    color:#183181;
    letter-spacing:.02em;
    font-family: inherit;
  }

  body[data-active-subtab="Amazon Ads レポート"] .filters .sw-select,
  body[data-active-subtab="Amazon Ads レポート"] .filters select{
    min-width:140px;
    height:40px;
    padding:0 14px;
    border:1px solid #183181;
    border-radius:12px;
    background:#ffffff;
    color:#183181;
    font-size:14px;
    font-weight:800;
    font-family: inherit;
    box-shadow:0 3px 10px rgba(24,49,129,0.10);
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  body[data-active-subtab="Amazon Ads レポート"] .filters .sw-select:focus,
  body[data-active-subtab="Amazon Ads レポート"] .filters select:focus{
    outline:none;
    border-color:#243fa3;
    box-shadow:0 0 0 4px rgba(36,63,163,0.18);
    background:#fff;
  }

  body[data-active-subtab="Amazon Ads レポート"] table thead th{
    background:#183181;
    color:#ffffff;
    font-weight:800;
    font-size:12px;
    letter-spacing:.02em;
    border-color:rgba(255,255,255,0.12) !important;
    vertical-align:middle;
    white-space:nowrap;
    font-family: inherit;
}

body[data-active-subtab="Amazon Ads レポート"] table tbody td{
    vertical-align:middle;
    border-color:rgba(24,49,129,0.10) !important;
    background:#fff;
    color:#111827;
    font-family: inherit;
}

body[data-active-subtab="Amazon Ads レポート"] table.table-striped tbody tr:nth-of-type(odd){
    background-color:rgba(24,49,129,0.03);
}

/* =========================================================
   Amazon Ads レポート：テーブルの横スクロール
   ========================================================= */
   body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card{
    overflow-x: auto;
    overflow-y: visible;
  }
  
  body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card table{
    min-width: 900px;
    width: max-content;
  }
  
  body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card .table,
  body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card .dataframe{
    min-width: 900px;
    width: max-content;
    margin-bottom: 0;
  }

  /* 横並びヒートマップの高さ制限 */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-grid .amazon-ads-card .js-plotly-plot {
  max-height: 520px;
}

  /* =========================================================
   Amazon Ads レポート
   - 95%幅で中央寄せ
   - PC幅が変わっても2列を維持
   - Plotly / table の横幅崩れ防止
   ========================================================= */
body[data-active-subtab="Amazon Ads レポート"] .dashboard-wrapper.amazon-ads-page{
  width: 95%;
  max-width: 1700px;
  margin: 0 auto;
  padding-bottom: 24px;
  overflow: visible !important;
}

/* フィルタも95%枠の中で自然に */
body[data-active-subtab="Amazon Ads レポート"] .filters{
  margin: 8px 0 16px;
}

/* 外側の余計なスケール用ラッパーはシンプルに */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-grid-shell{
  width: 100%;
}

body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-grid-inner{
  width: 100%;
  min-width: 0 !important;
  transform: none !important;
}

/* 2列固定 */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
}

/* 横2列のまま全幅カード */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-span-2{
  grid-column: 1 / -1;
}

/* カード自体が縮めるように */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card{
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  box-sizing: border-box;
}

/* Plotlyの親子を全部100%に */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card > div,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-plot-wrap,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-plot-wrap > div,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-plot-wrap .plotly-graph-div,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-plot-wrap .js-plotly-plot,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-plot-wrap .plot-container,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-plot-wrap .svg-container{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* サマリカードも95%枠の中で4列 */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-summary-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
}

body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-summary-card{
  min-width: 0;
}

/* テーブルだけは必要に応じて横スクロール */
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card table,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card .table,
body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-card .dataframe{
  min-width: 900px;
  width: max-content;
  margin-bottom: 0;
}

/* 小さすぎる画面だけ1列に落とす */
@media (max-width: 1100px){
  body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-grid{
    grid-template-columns: 1fr;
  }

  body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-summary-cards{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  body[data-active-subtab="Amazon Ads レポート"] .amazon-ads-summary-cards{
    grid-template-columns: 1fr;
  }
}

.amazon-ads-page{
  --ads-boost: #4F46E5;
  --ads-watch: #F59E0B;
  --ads-cut:   #E11D48;
  --ads-slate: #64748B;
  --ads-border:#E2E8F0;
  --ads-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.amazon-ads-page .amazon-ads-summary-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:14px;
  margin:18px 0 20px;
}
.amazon-ads-page .amazon-ads-summary-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--ads-border);
  border-radius:18px;
  padding:16px 18px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow:var(--ads-shadow);
}
.amazon-ads-page .amazon-ads-summary-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--card-accent, var(--ads-slate));
}
.amazon-ads-page .amazon-ads-summary-card__title{
  font-size:12px;
  line-height:1.4;
  letter-spacing:.04em;
  font-weight:800;
  color:#475569;
}
.amazon-ads-page .amazon-ads-summary-card__value{
  margin-top:8px;
  font-size:28px;
  line-height:1.15;
  font-weight:900;
  color:#0F172A;
}
.amazon-ads-page .amazon-ads-summary-card__sub{
  margin-top:8px;
  font-size:12px;
  color:#64748B;
}
.amazon-ads-page .amazon-ads-summary-card.is-period{
  --card-accent: var(--ads-slate);
  background:linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
.amazon-ads-page .amazon-ads-summary-card.is-cost,
.amazon-ads-page .amazon-ads-summary-card.is-cpc{
  --card-accent: var(--ads-cut);
  background:linear-gradient(180deg, #FFF1F2 0%, #FFFFFF 100%);
}
.amazon-ads-page .amazon-ads-summary-card.is-sales,
.amazon-ads-page .amazon-ads-summary-card.is-orders{
  --card-accent: var(--ads-boost);
  background:linear-gradient(180deg, #EEF2FF 0%, #FFFFFF 100%);
}
.amazon-ads-page .amazon-ads-summary-card.is-ctr,
.amazon-ads-page .amazon-ads-summary-card.is-cvr,
.amazon-ads-page .amazon-ads-summary-card.is-acos{
  --card-accent: var(--ads-watch);
  background:linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%);
}
.amazon-ads-page .amazon-ads-grid{
  gap:16px;
}
.amazon-ads-page .amazon-ads-card{
  border:1px solid var(--ads-border);
  border-radius:18px;
  background:#FFFFFF;
  box-shadow:var(--ads-shadow);
  padding:14px 14px 10px;
}
.amazon-ads-page .amazon-ads-card-title{
  font-size:15px;
  font-weight:900;
  color:#0F172A;
  margin-bottom:10px;
}
.amazon-ads-page .amazon-ads-subcard{
  border:1px solid var(--ads-border);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow:0 8px 22px rgba(15, 23, 42, 0.06);
}
.amazon-ads-page .amazon-ads-subcard + .amazon-ads-subcard{
  margin-top:12px;
}
.amazon-ads-page .amazon-ads-subcard-title{
  padding:12px 14px;
  font-size:14px;
  line-height:1.4;
  font-weight:900;
  color:#0F172A;
  border-bottom:1px solid var(--ads-border);
  background:#F8FAFC;
}
.amazon-ads-page .amazon-ads-subcard-body{
  padding:12px 14px;
}
.amazon-ads-page .amazon-ads-subcard.is-boost .amazon-ads-subcard-title{
  color:#3730A3;
  background:linear-gradient(180deg, #EEF2FF 0%, #FFFFFF 100%);
}
.amazon-ads-page .amazon-ads-subcard.is-watch .amazon-ads-subcard-title{
  color:#B45309;
  background:linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%);
}
.amazon-ads-page .amazon-ads-subcard.is-cut .amazon-ads-subcard-title{
  color:#9F1239;
  background:linear-gradient(180deg, #FFF1F2 0%, #FFFFFF 100%);
}
.amazon-ads-page .amazon-ads-mini-table{
  margin-bottom:0;
}
.amazon-ads-page .amazon-ads-mini-table thead th{
  font-size:12px;
  color:#475569;
  background:#F8FAFC;
  border-bottom:1px solid var(--ads-border);
  white-space:nowrap;
}
.amazon-ads-page .amazon-ads-mini-table tbody td{
  font-size:12px;
  color:#0F172A;
  vertical-align:middle;
}
.amazon-ads-page .amazon-ads-plot-wrap{
  border-radius:14px;
  overflow:hidden;
}

/* 期間だけ改行させない */
.amazon-ads-summary-card.is-period .amazon-ads-summary-card__value{
  white-space: nowrap;
}
.amazon-ads-summary-card.is-period .amazon-ads-summary-card__value{
  white-space: nowrap;
  font-size: 22px;   /* ← 28px → 22pxくらいに */
}

/* ============================================================
   コストレポート(商品別)
   - index.html 内の inline <style> を style.css に移管
   - フィルタはネイティブselect感を消して見た目を整える
   ============================================================ */

/* フィルタ全体 */
body[data-active-subtab="コストレポート(商品別)"] .filters{
  margin: 8px 0 12px;
}

.cost-product-page .cost-product-toolbar{
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.cost-product-page .cost-filter-group{
  display: flex;
  align-items: center;
  gap: 4px;
}

.cost-product-page .cost-filter-group label{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #54698d;
  line-height: 1.2;
  white-space: nowrap;
}

body[data-active-subtab="コストレポート(商品別)"] .sw-select,
.cost-product-page .cost-product-toolbar .sw-select{
  min-width: 110px;
  height: 36px;
  padding: 0 32px 0 10px;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body[data-active-subtab="コストレポート(商品別)"] .sw-select:focus,
.cost-product-page .cost-product-toolbar .sw-select:focus{
  outline: none;
  border-color: #0176d3;
  box-shadow: 0 0 0 3px rgba(1,118,211,.15);
}

/* 上部サマリや下表との余白 */
.cost-product-page .cost-product-section-title{
  font-size: 16px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: #16325c;
}

/* 月次の場所別原本金額 上部テーブル */
.cost-product-page .cost-product-top-table{
  width: 100%;
  overflow: auto;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.cost-product-page .cost-product-top-table table{
  margin-bottom: 0;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.cost-product-page .cost-product-top-table th{
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #183181;
  color: #fff;
}

/* グラフ2列 */
.cost-product-chart-wrap{
  width: 100%;
}

.cost-product-page .cost-product-chart-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

/* グラフカード */
.cost-product-page .cost-product-chart-card{
  position: relative;
  background: #fff;
  border: 1px solid #d8dde6;
  border-radius: 12px;
  padding: 10px;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* 左カード上の空白 */
.cost-product-page .cost-product-chart-note{
  margin: 0;
  min-height: 0;
  height: 0;
  display: block;
}

/* 右カード上の ? ボタン領域 */
.cost-product-page .cost-product-chart-note--help{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
}

/* ? アイコン */
.cost-product-page .chart-help-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  user-select: none;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ? ツールチップ */
.cost-product-page .chart-help-tooltip{
  display: none;
  position: absolute;
  top: 28px;
  right: 0;
  z-index: 40;
  min-width: 270px;
  max-width: 340px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.cost-product-page .chart-help-tooltip-title{
  font-weight: 700;
  margin-bottom: 4px;
  color: #111827;
}

.cost-product-page .cost-product-chart-note--help:hover .chart-help-tooltip,
.cost-product-page .cost-product-chart-note--help:focus-within .chart-help-tooltip{
  display: block;
}

/* Plotlyをカードいっぱいに
   - min-height は下限として残す
   - 実高さは JS から --cost-product-plot-h に入れる
*/
.cost-product-page .cost-product-chart-box{
  --cost-product-plot-h: clamp(380px, 52svh, 620px);

  flex: 1 1 auto;
  min-height: 380px;
  height: var(--cost-product-plot-h);
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.cost-product-page .cost-product-chart-box > div,
.cost-product-page .cost-product-chart-box .plotly-graph-div,
.cost-product-page .cost-product-chart-box .js-plotly-plot,
.cost-product-page .cost-product-chart-box .plotly,
.cost-product-page .cost-product-chart-box .svg-container{
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
}

/* レスポンシブ */
@media (max-width: 1100px){
  .cost-product-page .cost-product-chart-grid{
    grid-template-columns: 1fr;
  }

  .cost-product-page .cost-product-chart-box{
    --cost-product-plot-h: clamp(340px, 46svh, 520px);
    min-height: 340px;
  }
}

   body[data-active-subtab="コストレポート(商品別)"] .dashboard-wrapper.cost-product-page{
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 24px;
    overflow: visible !important;
  }

  .cost-product-summary-wrap{
    width: 100%;
    margin: 8px 0 16px;
  }
  
  .cost-product-summary-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
  }
  
  .cost-product-summary-card{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    min-height: 110px;
    padding: 14px 16px;
    border: 1px solid rgba(24,49,129,0.14);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(24,49,129,0.06);
  }
  
  .cost-product-summary-card__title{
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    color: #54698d;
    line-height: 1.4;
    white-space: normal;
  }
  
  .cost-product-summary-card__value{
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    line-height: 1.55;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  
  .cost-product-summary-card--period .cost-product-summary-card__value,
  .cost-product-summary-card--total .cost-product-summary-card__value{
    font-size: 22px;
    line-height: 1.35;
  }
  
  @media (max-width: 1200px){
    .cost-product-summary-cards{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 768px){
    .cost-product-summary-cards{
      grid-template-columns: 1fr;
    }
  }
/* ============================================================
   全体ダッシュボード：横並びフロー（最終調整）
   - 縦サイズ不足を解消
   - 矢印先端はAmazon/Rakutenへ
   - 輸送中チップは線の真ん中に小さく配置
   - 開くボタンと輸送中合計の被り解消
   ============================================================ */

/* レイアウト */
.dashboard-top-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 16px !important;
  align-items: start;
  min-width: 0;
  position: relative;
}

/* 初回ポップアップ中だけ半々 */
.dashboard-top-split.is-task-initial{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

/* 折りたたみ時 */
.dashboard-top-split.is-task-collapsed{
  grid-template-columns: minmax(0, 1fr) !important;
}
.dashboard-top-split.is-task-collapsed .dashboard-tasks{
  display: none !important;
}

.dashboard-graph-block{
  overflow: visible !important;
}

.dashboard-flow{
  min-width: 0;
  min-height: 0;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

/* フロー全体 */
.dash-flow-shell{
  min-height: 720px;
  border-radius: 24px;
  border: 1px solid rgba(24,49,129,0.10);
  background:
    radial-gradient(circle at top right, rgba(24,49,129,0.05), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: 0 16px 36px rgba(24,49,129,0.08);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
}

.dash-flow-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

/* 開くボタンとの被り防止 */
.dashboard-top-split.is-task-collapsed .dash-flow-head{
  padding-right: 170px;
}
.dashboard-top-split.is-task-collapsed .dash-flow-summary{
  margin-right: 8px;
}

.dash-flow-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #6b7fd7;
  margin-bottom: 4px;
}

.dash-flow-title{
  font-size: 22px;
  line-height: 1.08;
  font-weight: 900;
  color: #0f172a;
}

.dash-flow-summary{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(24,49,129,0.12);
  background: #fff;
  color: #183181;
  text-decoration: none;
  padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(24,49,129,0.08);
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}

.dash-flow-summary span{
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
}

.dash-flow-summary strong{
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

/* デスクトップでは横スクロールなし */
.dash-flow-scroll{
  overflow: hidden;
  overflow-y: hidden;
  padding-bottom: 0;
}

/* ★ 横は入ったので、今度は高さを固定で確保 */
.dash-flow-canvas{
  position: relative;
  width: min(980px, 100%);
  max-width: 980px;
  height: 640px;
  margin: 0 auto;
}

.dash-flow-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.dash-flow-line{
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-flow-line--main{
  stroke: #183181;
  stroke-width: 6.2;
  opacity: .95;
  marker-end: url(#dashArrowMain);
}

.dash-flow-line--direct{
  stroke: #6b7fd7;
  stroke-width: 3.4;
  opacity: .92;
  stroke-dasharray: 14 10;
  marker-end: url(#dashArrowDirect);
}

/* =========================
   輸送中チップ
   - 線の真ん中にセンター配置
   ========================= */
.dash-route-chip{
  position: absolute;
  z-index: 3;
  width: 124px;
  min-width: 124px;
  max-width: 124px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(24,49,129,0.12);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 12px 24px rgba(24,49,129,0.10);
  text-decoration: none;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;

  /* ★中央配置 */
  transform: translate(-50%, -50%);
}

.dash-route-chip--direct{
  background: rgba(247,249,255,0.99);
}

.dash-route-chip.is-zero{
  opacity: .52;
  filter: saturate(.7);
}

.dash-node:hover,
.dash-flow-summary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(24,49,129,0.14);
}

.dash-route-chip:hover{
  transform: translate(-50%, calc(-50% - 1px));
  box-shadow: 0 18px 30px rgba(24,49,129,0.14);
}

.dash-route-chip__tag{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #183181;
}

.dash-route-chip__meta{
  font-size: 11px;
  line-height: 1.2;
  color: #64748b;
}

.dash-route-chip strong{
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  color: #0f172a;
}

/* 線の真ん中 */
.dash-route-chip--fw{ left: 28.5%; top: 40.5%; }
.dash-route-chip--fa{ left: 52.0%; top: 19.0%; }
.dash-route-chip--wa{ left: 64.5%; top: 35.5%; }
.dash-route-chip--fr{ left: 52.0%; top: 76.5%; }
.dash-route-chip--wr{ left: 64.5%; top: 61.5%; }

/* =========================
   ノード
   ========================= */
.dash-node{
  position: absolute;
  z-index: 2;
  width: 18.6%;
  max-width: 206px;
  min-width: 176px;
  min-height: 164px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(24,49,129,0.12);
  background: rgba(255,255,255,0.99);
  box-shadow: 0 16px 34px rgba(24,49,129,0.10);
  text-decoration: none;
  color: #0f172a;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-sizing: border-box;
}

.dash-node.is-alert{
  border-color: rgba(239,68,68,0.30);
  box-shadow: 0 18px 36px rgba(239,68,68,0.10);
}

.dash-node.is-current{
  border: 4px solid #dc2626 !important;
  box-shadow:
    0 0 0 4px rgba(220, 38, 38, 0.14),
    0 18px 36px rgba(220, 38, 38, 0.20) !important;
}

.dash-node.is-current .dash-node__title,
.dash-node.is-current .dash-node__eyebrow{
  color: #991b1b;
}

.dash-node.is-current .dash-node__icon{
  background: #fee2e2;
  color: #b91c1c;
}

.shipment-flow-card{
  padding: 0 !important;
  overflow: hidden !important;
}

.shipment-flow-card .dashboard-flow{
  min-width: 0;
  min-height: 0;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
}

.shipment-flow-card .dash-flow-shell{
  min-height: 640px;
}

/* =========================================================
   工場発送管理ページ専用
   ========================================================= */
   .shipment-flow-card--factory{
    min-height: 430px;
    max-height: 430px;
    overflow: hidden !important;
  }
  
  .shipment-flow-card--factory .dash-flow-shell{
    min-height: 430px;
    padding: 6px 14px 10px;
  }
  
  .shipment-flow-card--factory .dash-flow-head{
    display: none;
  }
  
  .shipment-flow-card--factory .dash-flow-scroll{
    overflow: hidden !important;
  }
  
  .shipment-flow-card--factory .dash-flow-canvas{
    width: 1120px;
    height: 560px;
    transform-origin: top left;
    will-change: transform;
  }
  
  .shipment-flow-card--factory .dash-node{
    width: 16.8%;
    max-width: 182px;
    min-width: 148px;
    min-height: 138px;
    padding: 10px;
    border-radius: 18px;
  }
  
  .shipment-flow-card--factory .dash-node__eyebrow{
    font-size: 10px;
    margin-bottom: 6px;
  }
  
  .shipment-flow-card--factory .dash-node__icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .shipment-flow-card--factory .dash-node__title{
    font-size: 16px;
    line-height: 1.05;
    margin-bottom: 8px;
  }
  
  .shipment-flow-card--factory .dash-node__title--mall{
    font-size: 12px;
    line-height: 1.1;
  }
  
  .shipment-flow-card--factory .dash-node__stats{
    gap: 6px;
  }
  
  .shipment-flow-card--factory .dash-node__stat{
    border-radius: 12px;
    padding: 6px 7px;
  }
  
  .shipment-flow-card--factory .dash-node__label{
    font-size: 9.5px;
    margin-bottom: 3px;
  }
  
  .shipment-flow-card--factory .dash-node__stat strong{
    font-size: 15px;
    line-height: 1.2;
  }
  
  .shipment-flow-card--factory .dash-node__bottom{
    margin-top: 8px;
    gap: 4px;
  }
  
  .shipment-flow-card--factory .dash-node__due{
    font-size: 10px;
  }
  
  .shipment-flow-card--factory .dash-node__alert,
  .shipment-flow-card--factory .dash-node__ok{
    min-height: 20px;
    padding: 0 6px;
    font-size: 9.5px;
  }
  
  .shipment-flow-card--factory .dash-route-chip{
    min-width: 118px;
    max-width: 148px;
    padding: 8px 10px;
    border-radius: 14px;
    opacity: 0.45;
  }
  
  .shipment-flow-card--factory .dash-route-chip__tag{
    font-size: 10px;
    margin-bottom: 2px;
  }
  
  .shipment-flow-card--factory .dash-route-chip__meta{
    font-size: 9px;
    line-height: 1.2;
  }
  
  .shipment-flow-card--factory .dash-route-chip strong{
    font-size: 12px;
    line-height: 1.2;
  }
  
  .shipment-flow-card--factory .dash-node--factory{
    opacity: 1;
    z-index: 5;
  }
  
  .shipment-flow-card--factory .dash-node--warehouse,
  .shipment-flow-card--factory .dash-node--amazon,
  .shipment-flow-card--factory .dash-node--rakuten{
    opacity: 0.78;
  }
  
  
  .shipment-flow-card--factory .dash-route-chip--fa,
  .shipment-flow-card--factory .dash-route-chip--fr,
  .shipment-flow-card--factory .dash-route-chip--wa,
  .shipment-flow-card--factory .dash-route-chip--wr{
    opacity: 0.45;
  }
  
  .shipment-flow-card--factory .dash-route-chip--fa .dash-route-chip__tag,
  .shipment-flow-card--factory .dash-route-chip--fa .dash-route-chip__meta,
  .shipment-flow-card--factory .dash-route-chip--fr .dash-route-chip__tag,
  .shipment-flow-card--factory .dash-route-chip--fr .dash-route-chip__meta,
  .shipment-flow-card--factory .dash-route-chip--wa .dash-route-chip__tag,
  .shipment-flow-card--factory .dash-route-chip--wa .dash-route-chip__meta,
  .shipment-flow-card--factory .dash-route-chip--wr .dash-route-chip__tag,
  .shipment-flow-card--factory .dash-route-chip--wr .dash-route-chip__meta{
    display: none;
  }
  
  .shipment-flow-card--factory .dash-node.is-current{
    border-width: 5px !important;
    box-shadow:
      0 0 0 3px rgba(220, 38, 38, 0.12),
      0 14px 28px rgba(220, 38, 38, 0.18) !important;
  }

  /* =========================================================
   中間倉庫発送管理ページ専用
   ========================================================= */
.shipment-flow-card--warehouse{
  min-height: 430px;
  max-height: 430px;
  overflow: hidden !important;
}

.shipment-flow-card--warehouse .dash-flow-shell{
  min-height: 430px;
  padding: 6px 14px 10px;
}

.shipment-flow-card--warehouse .dash-flow-head{
  display: none;
}

.shipment-flow-card--warehouse .dash-flow-scroll{
  overflow: hidden !important;
}

.shipment-flow-card--warehouse .dash-flow-canvas{
  width: 1120px;
  height: 560px;
  transform-origin: top left;
  will-change: transform;
}

.shipment-flow-card--warehouse .dash-node{
  width: 16.8%;
  max-width: 182px;
  min-width: 148px;
  min-height: 138px;
  padding: 10px;
  border-radius: 18px;
}

.shipment-flow-card--warehouse .dash-node__eyebrow{
  font-size: 10px;
  margin-bottom: 6px;
}

.shipment-flow-card--warehouse .dash-node__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 16px;
  margin-bottom: 8px;
}

.shipment-flow-card--warehouse .dash-node__title{
  font-size: 16px;
  line-height: 1.05;
  margin-bottom: 8px;
}

.shipment-flow-card--warehouse .dash-node__title--mall{
  font-size: 12px;
  line-height: 1.1;
}

.shipment-flow-card--warehouse .dash-node__stats{
  gap: 6px;
}

.shipment-flow-card--warehouse .dash-node__stat{
  border-radius: 12px;
  padding: 6px 7px;
}

.shipment-flow-card--warehouse .dash-node__label{
  font-size: 9.5px;
  margin-bottom: 3px;
}

.shipment-flow-card--warehouse .dash-node__stat strong{
  font-size: 15px;
  line-height: 1.2;
}

.shipment-flow-card--warehouse .dash-node__bottom{
  margin-top: 8px;
  gap: 4px;
}

.shipment-flow-card--warehouse .dash-node__due{
  font-size: 10px;
}

.shipment-flow-card--warehouse .dash-node__alert,
.shipment-flow-card--warehouse .dash-node__ok{
  min-height: 20px;
  padding: 0 6px;
  font-size: 9.5px;
}

.shipment-flow-card--warehouse .dash-route-chip{
  min-width: 118px;
  max-width: 148px;
  padding: 8px 10px;
  border-radius: 14px;
}

.shipment-flow-card--warehouse .dash-route-chip__tag{
  font-size: 10px;
  margin-bottom: 2px;
}

.shipment-flow-card--warehouse .dash-route-chip__meta{
  font-size: 9px;
  line-height: 1.2;
}

.shipment-flow-card--warehouse .dash-route-chip strong{
  font-size: 12px;
  line-height: 1.2;
}

.shipment-flow-card--warehouse .dash-node--warehouse{
  opacity: 1;
  z-index: 5;
}

.shipment-flow-card--warehouse .dash-node--factory,
.shipment-flow-card--warehouse .dash-node--amazon,
.shipment-flow-card--warehouse .dash-node--rakuten{
  opacity: 0.78;
}

/* 入庫：工場→中間倉庫 を強調 */
.shipment-flow-card--warehouse .dash-route-chip--fw{
  min-width: 148px;
  max-width: 182px;
  padding: 10px 12px;
  border-radius: 16px;
  opacity: 1;
  z-index: 6;
  background: #fff5f5;
  border: 2px solid rgba(220, 38, 38, 0.40);
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.10);
}

.shipment-flow-card--warehouse .dash-route-chip--fw .dash-route-chip__tag{
  color: #b91c1c;
  font-weight: 900;
}

.shipment-flow-card--warehouse .dash-route-chip--fw strong{
  color: #b91c1c;
}

.shipment-flow-card--warehouse .dash-route-chip--wa .dash-route-chip__tag,
.shipment-flow-card--warehouse .dash-route-chip--wr .dash-route-chip__tag{
  color: #b91c1c;
  font-weight: 900;
}

.shipment-flow-card--warehouse .dash-route-chip--wa strong,
.shipment-flow-card--warehouse .dash-route-chip--wr strong{
  color: #b91c1c;
}

/* 出庫は弱める */
.shipment-flow-card--warehouse .dash-route-chip--wa,
.shipment-flow-card--warehouse .dash-route-chip--wr{
  opacity: 0.45;
}

.shipment-flow-card--warehouse .dash-route-chip--wa .dash-route-chip__tag,
.shipment-flow-card--warehouse .dash-route-chip--wa .dash-route-chip__meta,
.shipment-flow-card--warehouse .dash-route-chip--wr .dash-route-chip__tag,
.shipment-flow-card--warehouse .dash-route-chip--wr .dash-route-chip__meta{
  display: none;
}

.shipment-flow-card--warehouse .dash-route-chip--fa .dash-route-chip__tag,
.shipment-flow-card--warehouse .dash-route-chip--fa .dash-route-chip__meta,
.shipment-flow-card--warehouse .dash-route-chip--fr .dash-route-chip__tag,
.shipment-flow-card--warehouse .dash-route-chip--fr .dash-route-chip__meta{
  display: none;
}

.shipment-flow-card--warehouse .dash-node.is-current{
  border-width: 5px !important;
  box-shadow:
    0 0 0 3px rgba(220, 38, 38, 0.12),
    0 14px 28px rgba(220, 38, 38, 0.18) !important;
}

/* =========================================================
   Amazon発送管理ページ専用：左フローを縮小表示
   ========================================================= */
.shipment-flow-card--amazon{
  min-height: 430px;
  max-height: 430px;
  overflow: hidden !important;
}

.shipment-flow-card--amazon .dash-flow-shell{
  min-height: 430px;
  padding: 6px 14px 10px;
}

.shipment-flow-card--amazon .dash-flow-head{
  display: none;
}

.shipment-flow-card--amazon .dash-flow-summary{
  padding: 8px 12px;
  border-radius: 14px;
}

.shipment-flow-card--amazon .dash-flow-summary span{
  font-size: 11px;
}

.shipment-flow-card--amazon .dash-flow-summary strong{
  font-size: 14px;
}

.shipment-flow-card--amazon .dash-flow-scroll{
  overflow: hidden !important;
}

.shipment-flow-card--amazon .dash-flow-canvas{
  width: 1120px;
  height: 560px;
  transform-origin: top left;
  will-change: transform;
}

/* ノード全体を少し小さく */
.shipment-flow-card--amazon .dash-node{
  width: 16.8%;
  max-width: 182px;
  min-width: 148px;
  min-height: 138px;
  padding: 10px;
  border-radius: 18px;
}

.shipment-flow-card--amazon .dash-node__eyebrow{
  font-size: 10px;
  margin-bottom: 6px;
}

.shipment-flow-card--amazon .dash-node__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 16px;
  margin-bottom: 8px;
}

.shipment-flow-card--amazon .dash-node__title{
  font-size: 16px;
  line-height: 1.05;
  margin-bottom: 8px;
}

.shipment-flow-card--amazon .dash-node__title--mall{
  font-size: 12px;
  line-height: 1.1;
}

.shipment-flow-card--amazon .dash-node__stats{
  gap: 6px;
}

.shipment-flow-card--amazon .dash-node__stat{
  border-radius: 12px;
  padding: 6px 7px;
}

.shipment-flow-card--amazon .dash-node__label{
  font-size: 9.5px;
  margin-bottom: 3px;
}

.shipment-flow-card--amazon .dash-node__stat strong{
  font-size: 15px;
  line-height: 1.2;
}

.shipment-flow-card--amazon .dash-node__bottom{
  margin-top: 8px;
  gap: 4px;
}

.shipment-flow-card--amazon .dash-node__due{
  font-size: 10px;
}

.shipment-flow-card--amazon .dash-node__alert,
.shipment-flow-card--amazon .dash-node__ok{
  min-height: 20px;
  padding: 0 6px;
  font-size: 9.5px;
}

/* 輸送中カードも小さく */
.shipment-flow-card--amazon .dash-route-chip{
  min-width: 118px;
  max-width: 148px;
  padding: 8px 10px;
  border-radius: 14px;
}

/* 基本の輸送中カードは小さく */
.shipment-flow-card--amazon .dash-route-chip{
  min-width: 118px;
  max-width: 148px;
  padding: 8px 10px;
  border-radius: 14px;
}

.shipment-flow-card--amazon .dash-route-chip__tag{
  font-size: 10px;
  margin-bottom: 2px;
}

.shipment-flow-card--amazon .dash-route-chip__meta{
  font-size: 9px;
  line-height: 1.2;
}

.shipment-flow-card--amazon .dash-route-chip strong{
  font-size: 12px;
  line-height: 1.2;
}

/* Amazon向け輸送カードだけは元サイズに戻す */
.shipment-flow-card--amazon .dash-route-chip--fa,
.shipment-flow-card--amazon .dash-route-chip--wa{
  min-width: 148px;
  max-width: 182px;
  padding: 10px 12px;
  border-radius: 16px;
  opacity: 1;
  z-index: 6;
}

.shipment-flow-card--amazon .dash-route-chip--fa .dash-route-chip__tag,
.shipment-flow-card--amazon .dash-route-chip--wa .dash-route-chip__tag{
  font-size: 11px;
  margin-bottom: 3px;
}

.shipment-flow-card--amazon .dash-route-chip--fa .dash-route-chip__meta,
.shipment-flow-card--amazon .dash-route-chip--wa .dash-route-chip__meta{
  font-size: 10px;
  line-height: 1.25;
}

.shipment-flow-card--amazon .dash-route-chip--fa strong,
.shipment-flow-card--amazon .dash-route-chip--wa strong{
  font-size: 14px;
  line-height: 1.25;
}

/* Amazon以外は少し存在感を落とす */
.shipment-flow-card--amazon .dash-node--factory,
.shipment-flow-card--amazon .dash-node--warehouse,
.shipment-flow-card--amazon .dash-node--rakuten{
  opacity: 0.82;
}

/* Amazon以外は文字を最小限にする */
.shipment-flow-card--amazon .dash-node--factory .dash-node__eyebrow,
.shipment-flow-card--amazon .dash-node--warehouse .dash-node__eyebrow,
.shipment-flow-card--amazon .dash-node--rakuten .dash-node__eyebrow,
.shipment-flow-card--amazon .dash-node--factory .dash-node__label,
.shipment-flow-card--amazon .dash-node--warehouse .dash-node__label,
.shipment-flow-card--amazon .dash-node--rakuten .dash-node__label,
.shipment-flow-card--amazon .dash-node--factory .dash-node__bottom,
.shipment-flow-card--amazon .dash-node--warehouse .dash-node__bottom,
.shipment-flow-card--amazon .dash-node--rakuten .dash-node__bottom{
  display: none;
}

.shipment-flow-card--amazon .dash-route-chip--fw,
.shipment-flow-card--amazon .dash-route-chip--fr,
.shipment-flow-card--amazon .dash-route-chip--wr{
  opacity: 0.78;
}

/* Amazonだけはしっかり見せる */
.shipment-flow-card--amazon .dash-node--amazon{
  opacity: 1;
  z-index: 5;
}

.shipment-flow-card--amazon .dash-route-chip--fa,
.shipment-flow-card--amazon .dash-route-chip--wa{
  opacity: 1;
  background: #fff5f5;
  border: 2px solid rgba(220, 38, 38, 0.40);
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.10);
}

.shipment-flow-card--amazon .dash-route-chip--fa .dash-route-chip__tag,
.shipment-flow-card--amazon .dash-route-chip--wa .dash-route-chip__tag{
  color: #b91c1c;
  font-weight: 900;
}

.shipment-flow-card--amazon .dash-route-chip--fa strong,
.shipment-flow-card--amazon .dash-route-chip--wa strong{
  color: #b91c1c;
}

.shipment-flow-card--amazon .dash-flow-line--main{
  opacity: 0.35;
}

.shipment-flow-card--amazon .dash-route-chip--wa{
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.12);
}

.shipment-flow-card--amazon .dash-route-chip--fa{
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.12);
}
/* Amazonの赤枠を縮小版でも見やすく */
.shipment-flow-card--amazon .dash-node.is-current{
  border-width: 5px !important;
  box-shadow:
    0 0 0 3px rgba(220, 38, 38, 0.12),
    0 14px 28px rgba(220, 38, 38, 0.18) !important;
}
.shipment-flow-card--amazon .dash-node--factory .dash-node__bottom,
.shipment-flow-card--amazon .dash-node--warehouse .dash-node__bottom,
.shipment-flow-card--amazon .dash-node--rakuten .dash-node__bottom{
  display: none;
}

.shipment-flow-card--amazon .dash-node--factory .dash-node__stats,
.shipment-flow-card--amazon .dash-node--warehouse .dash-node__stats,
.shipment-flow-card--amazon .dash-node--rakuten .dash-node__stats{
  grid-template-columns: 1fr;
}

.shipment-flow-card--amazon .dash-node--factory .dash-node__stat:not(:first-child),
.shipment-flow-card--amazon .dash-node--warehouse .dash-node__stat:not(:first-child),
.shipment-flow-card--amazon .dash-node--rakuten .dash-node__stat:not(:first-child){
  display: none;
}

/* =========================================================
   rakuten発送管理ページ専用
   ========================================================= */
   .shipment-flow-card--rakuten{
    min-height: 430px;
    max-height: 430px;
    overflow: hidden !important;
  }
  
  .shipment-flow-card--rakuten .dash-flow-shell{
    min-height: 430px;
    padding: 6px 14px 10px;
  }
  
  .shipment-flow-card--rakuten .dash-flow-head{
    display: none;
  }
  
  .shipment-flow-card--rakuten .dash-flow-scroll{
    overflow: hidden !important;
  }
  
  .shipment-flow-card--rakuten .dash-flow-canvas{
    width: 1120px;
    height: 560px;
    transform-origin: top left;
    will-change: transform;
  }
  
  .shipment-flow-card--rakuten .dash-node{
    width: 16.8%;
    max-width: 182px;
    min-width: 148px;
    min-height: 138px;
    padding: 10px;
    border-radius: 18px;
  }
  
  .shipment-flow-card--rakuten .dash-node__eyebrow{
    font-size: 10px;
    margin-bottom: 6px;
  }
  
  .shipment-flow-card--rakuten .dash-node__icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .shipment-flow-card--rakuten .dash-node__title{
    font-size: 16px;
    line-height: 1.05;
    margin-bottom: 8px;
  }
  
  .shipment-flow-card--rakuten .dash-node__title--mall{
    font-size: 12px;
    line-height: 1.1;
  }
  
  .shipment-flow-card--rakuten .dash-node__stats{
    gap: 6px;
  }
  
  .shipment-flow-card--rakuten .dash-node__stat{
    border-radius: 12px;
    padding: 6px 7px;
  }
  
  .shipment-flow-card--rakuten .dash-node__label{
    font-size: 9.5px;
    margin-bottom: 3px;
  }
  
  .shipment-flow-card--rakuten .dash-node__stat strong{
    font-size: 15px;
    line-height: 1.2;
  }
  
  .shipment-flow-card--rakuten .dash-node__bottom{
    margin-top: 8px;
    gap: 4px;
  }
  
  .shipment-flow-card--rakuten .dash-node__due{
    font-size: 10px;
  }
  
  .shipment-flow-card--rakuten .dash-node__alert,
  .shipment-flow-card--rakuten .dash-node__ok{
    min-height: 20px;
    padding: 0 6px;
    font-size: 9.5px;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip{
    min-width: 118px;
    max-width: 148px;
    padding: 8px 10px;
    border-radius: 14px;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip__tag{
    font-size: 10px;
    margin-bottom: 2px;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip__meta{
    font-size: 9px;
    line-height: 1.2;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip strong{
    font-size: 12px;
    line-height: 1.2;
  }
  
  .shipment-flow-card--rakuten .dash-node--rakuten{
    opacity: 1;
    z-index: 5;
  }
  
  .shipment-flow-card--rakuten .dash-node--factory,
  .shipment-flow-card--rakuten .dash-node--warehouse,
  .shipment-flow-card--rakuten .dash-node--amazon{
    opacity: 0.78;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip--fr,
  .shipment-flow-card--rakuten .dash-route-chip--wr{
    min-width: 148px;
    max-width: 182px;
    padding: 10px 12px;
    border-radius: 16px;
    opacity: 1;
    z-index: 6;
    background: #fff5f5;
    border: 2px solid rgba(220, 38, 38, 0.40);
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.10);
  }
  
  .shipment-flow-card--rakuten .dash-route-chip--fr .dash-route-chip__tag,
  .shipment-flow-card--rakuten .dash-route-chip--wr .dash-route-chip__tag{
    color: #b91c1c;
    font-weight: 900;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip--fr strong,
  .shipment-flow-card--rakuten .dash-route-chip--wr strong{
    color: #b91c1c;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip--fw,
  .shipment-flow-card--rakuten .dash-route-chip--fa,
  .shipment-flow-card--rakuten .dash-route-chip--wa{
    opacity: 0.45;
  }
  
  .shipment-flow-card--rakuten .dash-route-chip--fw .dash-route-chip__tag,
  .shipment-flow-card--rakuten .dash-route-chip--fw .dash-route-chip__meta,
  .shipment-flow-card--rakuten .dash-route-chip--fa .dash-route-chip__tag,
  .shipment-flow-card--rakuten .dash-route-chip--fa .dash-route-chip__meta,
  .shipment-flow-card--rakuten .dash-route-chip--wa .dash-route-chip__tag,
  .shipment-flow-card--rakuten .dash-route-chip--wa .dash-route-chip__meta{
    display: none;
  }
  
  .shipment-flow-card--rakuten .dash-node.is-current{
    border-width: 5px !important;
    box-shadow:
      0 0 0 3px rgba(220, 38, 38, 0.12),
      0 14px 28px rgba(220, 38, 38, 0.18) !important;
  }
  
.dash-node__eyebrow{
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 8px;
}

.dash-node__icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #183181;
  font-size: 20px;
  margin-bottom: 10px;
}

.dash-node__title{
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.02;
  letter-spacing: .01em;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 12px;
  white-space: nowrap;
}

.dash-node__title--mall{
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.08;
}

.dash-node__stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}

.dash-node__stat{
  background: #f8faff;
  border: 1px solid rgba(24,49,129,0.07);
  border-radius: 14px;
  padding: 8px 9px;
}

.dash-node__label{
  display: block;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 5px;
}

.dash-node__stat strong{
  font-size: clamp(17px, 1.95vw, 20px);
  line-height: 1.25;
  font-weight: 900;
  color: #183181;
}

.dash-node__bottom{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dash-node__due{
  font-size: 11px;
  font-weight: 800;
  color: #334155;
}

.dash-node__alert,
.dash-node__ok{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.dash-node__alert{
  background: #fee2e2;
  color: #b91c1c;
}

.dash-node__ok{
  background: #e0f2fe;
  color: #0f4c81;
}

/* ★Amazon / Rakuten の上下間隔をさらに離す */
.dash-node--factory{ left: 1.5%; top: 30.5%; }
.dash-node--warehouse{ left: 37.0%; top: 30.5%; }
.dash-node--amazon{ left: 81.0%; top: 13.5%; }
.dash-node--rakuten{ left: 81.0%; top: 61.5%; }

/* タスクパネル */
.dashboard-tasks{
  min-width: 0;
  min-height: 0;
  background: #183181;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dashboard-tasks__head{
  padding: 12px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-tasks__title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-tasks__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-tasks__toggle{
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 900;
  font-size: 11px;
  cursor: pointer;
}

.dashboard-tasks__toggle:hover{
  background: rgba(255,255,255,0.14);
}

.dashboard-tasks__body{
  padding: 0 12px 12px;
  overflow: auto;
  min-height: 0;
}

.dashboard-task-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-task-item{
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dashboard-task-item::before{
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  flex: 0 0 auto;
  margin-top: 1px;
}

.dashboard-task-item a{
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-task-item a:hover{
  text-decoration: underline;
}

.dashboard-task-empty{
  padding: 18px 6px;
  color: rgba(255,255,255,0.85);
  font-weight: 800;
}

/* 折りたたみ時の開くボタン */
.dashboard-task-fab{
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 30;
  border: 1px solid rgba(24,49,129,0.25);
  background: #fff;
  color: #183181;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.dashboard-task-fab:hover{
  filter: brightness(0.98);
}

/* PC幅が狭い時だけ縦積み + フローだけスクロール可 */
@media (max-width: 1280px){
  .dashboard-top-split,
  .dashboard-top-split.is-task-initial{
    grid-template-columns: 1fr !important;
  }

  .dash-flow-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }

  .dash-flow-canvas{
    width: 1120px;
    max-width: none;
    height: 640px;
    margin: 0;
  }
}

@media (max-width: 992px){
  .dash-flow-shell{
    min-height: 620px;
  }

  .dash-flow-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-top-split,
  .dashboard-top-split.is-task-initial,
  .dashboard-top-split.is-task-collapsed{
    grid-template-columns: 1fr !important;
  }
}



  /* ============================================================
   在庫レポート_個別
   ============================================================ */

.ii-page{
    display:block;
    margin-top:12px;
}
.ii-hint{
    margin-bottom:10px;
    padding:10px 12px;
    border:1px solid #dbe4f0;
    border-radius:10px;
    background:#f8fbff;
    color:#334155;
    font-size:12px;
    line-height:1.6;
}
.ii-filterbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    align-items:end;
    margin-bottom:10px;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
}
.ii-filterbar label{
    font-size:12px;
    font-weight:700;
    color:#475569;
    margin-right:4px;
}
.ii-filterbar select,
.ii-filterbar input{
    min-width:140px;
}
.ii-filterbar .ii-submit{
    min-width:80px;
}
.ii-current-box{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
    padding:12px 14px;
    border:1px solid #d7dee8;
    border-radius:12px;
    background:#fff;
}
.ii-current-main{
    font-weight:700;
    color:#0f172a;
}
.ii-current-sub{
    margin-top:4px;
    font-size:12px;
    color:#64748b;
    line-height:1.6;
}
.ii-supply-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    background:#1d4ed8;
    color:#fff !important;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}
.ii-supply-link:hover{
    opacity:.92;
    text-decoration:none;
    color:#fff !important;
}
.ii-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-bottom:12px;
}
@media (max-width: 1100px){
    .ii-kpi-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px){
    .ii-kpi-grid{
        grid-template-columns:1fr;
    }
}
.ii-kpi-card{
    border:1px solid #d0d7de;
    border-radius:12px;
    background:#ffffff;
    padding:14px 16px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.ii-kpi-label{
    font-size:12px;
    font-weight:700;
    color:#57606a;
    margin-bottom:6px;
}
.ii-kpi-value{
    font-size:24px;
    font-weight:800;
    color:#111827;
    line-height:1.2;
}
.ii-kpi-sub{
    font-size:12px;
    color:#6b7280;
    margin-top:6px;
}
.ii-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:12px;
}
@media (max-width: 1100px){
    .ii-grid{
        grid-template-columns:1fr;
    }
}
.ii-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
}
.ii-card__title{
    margin:0 0 8px 0;
    font-size:14px;
    font-weight:800;
    color:#0f172a;
}
.ii-card__sub{
    margin:0 0 8px 0;
    font-size:12px;
    color:#64748b;
}
.ii-empty{
    border:1px dashed #cbd5e1;
    border-radius:12px;
    background:#f8fafc;
    color:#64748b;
    padding:20px;
}
.ii-table-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
}
.ii-caption{
    font-size:14px;
    font-weight:800;
    color:#111827;
    margin-bottom:10px;
}
.ii-neighbor-table th,
.ii-neighbor-table td{
    vertical-align:middle;
}
.ii-note{
    margin-top:10px;
    font-size:12px;
    color:#64748b;
}

.inv-overview-page .inv-priority-summary{
  margin: 0 18px 12px;
  padding: 12px 14px;
  border: 1px solid #e6ecf5;
  border-radius: 12px;
  background: #fafcff;
}

.inv-overview-page .inv-priority-summary__title{
  font-size: 12px;
  font-weight: 800;
  color: #475467;
  margin-bottom: 8px;
}

.inv-overview-page .inv-priority-summary__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inv-overview-page .inv-priority-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dbe4f0;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.inv-overview-page .inv-priority-chip strong{
  font-size: 13px;
  font-weight: 900;
  color: #183181;
}

.inv-overview-page .inv-priority-chip--muted{
  background: #f8fafc;
  color: #667085;
}

.inv-overview-page .inv-priority-summary__note{
  margin-top: 8px;
  font-size: 12px;
  color: #667085;
  line-height: 1.6;
}
.inv-overview-page .inv-inline-help-row{
  display:flex;
  justify-content:flex-end;
  margin: 4px 0 10px;
}

.inv-overview-page .inv-help-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid #cfd7e6;
  background:#ffffff;
  color:#183181;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:help;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.inv-overview-page .inv-help-tip-text{
  display:none;
  position:absolute;
  top:28px;
  right:0;
  width:360px;
  max-width:70vw;
  padding:10px 12px;
  border-radius:10px;
  background:#111827;
  color:#ffffff;
  font-size:12px;
  line-height:1.7;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index:9999;
  white-space:normal;
  text-align:left;
}

.inv-overview-page .inv-help-tip:hover .inv-help-tip-text,
.inv-overview-page .inv-help-tip:focus .inv-help-tip-text{
  display:block;
}

.inv-overview-page .inv-page-loading[hidden]{
  display:none !important;
}

.inv-overview-page .inv-page-loading{
  position:fixed;
  inset:0;
  z-index:50000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(1px);
}

.inv-overview-page .inv-page-loading__card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  padding:12px 18px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  font-size:14px;
  font-weight:800;
  color:#374151;
}
.inv-overview-page .inv-help-row{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin: 4px 0 10px;
}

.inv-overview-page .inv-help-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.inv-overview-page .inv-help-item__label{
  font-size:12px;
  font-weight:700;
  color:#667085;
}

.inv-overview-page .inv-help-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid #cfd7e6;
  background:#ffffff;
  color:#183181;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:help;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.inv-overview-page .inv-help-tip-text{
  display:none;
  position:absolute;
  top:28px;
  right:0;
  width:360px;
  max-width:70vw;
  padding:10px 12px;
  border-radius:10px;
  background:#111827;
  color:#ffffff;
  font-size:12px;
  line-height:1.7;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index:9999;
  white-space:normal;
  text-align:left;
}

.inv-overview-page .inv-help-tip:hover .inv-help-tip-text,
.inv-overview-page .inv-help-tip:focus .inv-help-tip-text{
  display:block;
}

.inv-overview-page .inv-page-loading[hidden]{
  display:none !important;
}

.inv-overview-page .inv-page-loading{
  position:fixed;
  inset:0;
  z-index:50000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(1px);
}

.inv-overview-page .inv-page-loading__card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  padding:12px 18px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  font-size:14px;
  font-weight:800;
  color:#374151;
}

/* =========================
   在庫全体：HTMLカレンダー
   ========================= */
   .inv-cal{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
  }
  
  .inv-cal__month{
    background:#fff;
    border:1px solid #e7ebf3;
    border-radius:16px;
    padding:16px;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
  }
  
  .inv-cal__month-title{
    font-size:16px;
    font-weight:800;
    color:#111827;
    margin-bottom:14px;
  }
  
  .inv-cal__grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0,1fr));
    gap:10px;
  }
  
  .inv-cal__day{
    min-height:120px;
    border:1px solid #eef2f7;
    border-radius:14px;
    background:#fbfcfe;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  
  .inv-cal__date{
    font-size:15px;
    font-weight:800;
    color:#111827;
  }
  
  .inv-cal__count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-width:48px;
    padding:3px 9px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.08);
    font-size:11px;
    font-weight:800;
    color:#183181;
  }
  
  .inv-cal__line{
    font-size:12px;
    line-height:1.45;
    color:#344054;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .inv-cal__more{
    font-size:11px;
    color:#667085;
    font-weight:700;
  }
  
  /* =========================
     在庫全体：下段JSグラフ
     ========================= */
  .inv-js-plot{
    width:100%;
    min-height:420px;
  }
  
  .inv-summary-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
  
  .inv-summary-grid__item{
    min-width:0;
  }
  
  .inv-graph-card__body--chart{
    min-height:460px;
  }
  
  @media (max-width: 1200px){
    .inv-cal{
      grid-template-columns:1fr;
    }
  }
  
  @media (max-width: 991px){
    .inv-summary-grid{
      grid-template-columns:1fr;
    }
  }

  .inv-help-tip--inline{
    margin-left: 6px;
    vertical-align: middle;
  }
  
  .inv-sortable-th{
    cursor: pointer;
    user-select: none;
  }
  
  .inv-sortable-th:hover{
    color: #183181 !important;
    background: #eef4ff !important;
  }



  /* ============================================================
   在庫レポート_①在庫数
   - 2グラフ横並び
   - 今日時点の場所別在庫テーブル
   ============================================================ */
body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-report{
  width: 92%;
  max-width: 1680px;
  margin: 18px auto 32px;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters form{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters label{
  font-weight: 700;
  color: #374151;
  margin-right: 2px;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters select,
body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters button{
  height: 38px;
  border-radius: 999px;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters select{
  min-width: 150px;
  border: 1px solid #d1d5db;
  padding: 0 12px;
  background: #fff;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters button{
  border: 1px solid #183181;
  background: #183181;
  color: #fff;
  font-weight: 700;
  padding: 0 18px;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-filters button:hover{
  filter: brightness(1.06);
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-panel{
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 10px 12px 6px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-panel .js-plotly-plot,
body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-panel .plotly-graph-div{
  width: 100% !important;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table-section{
  margin-top: 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table-head h5{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table-sub{
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-asof{
  font-size: 12px;
  font-weight: 800;
  color: #b91c1c;
  white-space: nowrap;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table-wrap{
  overflow: auto;
  max-height: 560px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table{
  width: 100%;
  margin-bottom: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #183181 !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table thead th:nth-child(-n+2),
body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table tbody td:nth-child(-n+2){
  text-align: left !important;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table tbody td:nth-child(n+3){
  text-align: right !important;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table tbody tr:nth-child(even){
  background: #f8fafc;
}

body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-empty{
  padding: 28px 16px;
  text-align: center;
  color: #6b7280;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}


@media (max-width: 1200px){
  /* .inventory-qty-grid の 1fr 切替を削除 */

  body[data-active-subtab="在庫レポート_①在庫数"] .inventory-qty-table-head{
    align-items: flex-start;
    flex-direction: column;
  }
}

body[data-active-subtab="在庫レポート_全体"] .inv-definition-note{
  margin-top: -4px;
  padding: 10px 14px;
  border: 1px solid #dbe7f5;
  background: #f8fbff;
  border-radius: 12px;
  color: #475467;
  font-size: 12px;
  line-height: 1.7;
}

body[data-active-subtab="在庫レポート_全体"] .inv-definition-note code{
  font-size: 11px;
  background: #eef4ff;
  color: #183181;
  padding: 2px 6px;
  border-radius: 6px;
}


  /* ============================================================
   在庫レポート_全体
   ============================================================ */

.inv-overview-page{
  width:95%;
  max-width:1600px;
  margin:0 auto;
  padding:8px 0 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-sizing:border-box;
}
.inv-overview-page *{
  box-sizing:border-box;
}

.inv-overview-page .inv-health-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:1px solid #dbe4f0;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:0 10px 28px rgba(15, 23, 42, .06);
}

.inv-overview-page .inv-health-hero__main{
  min-width:0;
  flex:1 1 auto;
}

.inv-overview-page .inv-health-hero__eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  color:#667085;
  margin-bottom:6px;
}

.inv-overview-page .inv-health-hero__status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:8px 14px;
  border-radius:999px;
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.inv-overview-page .inv-health-hero__status.is-good{
  background:#ecfdf3;
  color:#027a48;
  border:1px solid #abefc6;
}

.inv-overview-page .inv-health-hero__status.is-warn{
  background:#fff4ed;
  color:#c4320a;
  border:1px solid #fecdca;
}

.inv-overview-page .inv-health-hero__status.is-danger{
  background:#fff1f3;
  color:#c01048;
  border:1px solid #fda4af;
}

.inv-overview-page .inv-health-hero__status.is-unknown{
  background:#f2f4f7;
  color:#475467;
  border:1px solid #d0d5dd;
}

.inv-overview-page .inv-health-hero__summary{
  margin-top:12px;
  font-size:14px;
  line-height:1.75;
  color:#344054;
}

.inv-overview-page .inv-health-hero__chips{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:560px;
  justify-content:flex-end;
}

.inv-overview-page .inv-health-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbe4f0;
  font-size:12px;
  font-weight:800;
  color:#344054;
  white-space:nowrap;
}

.inv-overview-page .inv-health-chip strong{
  font-size:14px;
  font-weight:900;
  color:#111827;
}

.inv-overview-page .inv-health-chip.is-danger{
  background:#fff1f3;
  border-color:#fda4af;
}
.inv-overview-page .inv-health-chip.is-warn{
  background:#fff4ed;
  border-color:#fecdca;
}
.inv-overview-page .inv-health-chip.is-cool{
  background:#eff8ff;
  border-color:#b2ddff;
}
.inv-overview-page .inv-health-chip.is-muted{
  background:#f2f4f7;
  border-color:#d0d5dd;
}
.inv-overview-page .inv-health-chip.is-plain{
  background:#ffffff;
  border-color:#dbe4f0;
}

.inv-overview-page .inv-location-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.inv-overview-page .inv-location-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid #e7ebf3;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(15, 23, 42, .05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.inv-overview-page .inv-location-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(15, 23, 42, .08);
  border-color:#cfd8ea;
  color:inherit;
}

.inv-overview-page .inv-location-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.inv-overview-page .inv-location-card__title{
  font-size:16px;
  font-weight:800;
  color:#111827;
}

.inv-overview-page .inv-location-card__status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
}

.inv-overview-page .inv-location-card__status.is-good{
  background:#ecfdf3;
  color:#027a48;
  border-color:#abefc6;
}

.inv-overview-page .inv-location-card__status.is-warn{
  background:#fff4ed;
  color:#c4320a;
  border-color:#fecdca;
}

.inv-overview-page .inv-location-card__status.is-danger{
  background:#fff1f3;
  color:#c01048;
  border-color:#fda4af;
}

.inv-overview-page .inv-location-card__status.is-unknown{
  background:#f2f4f7;
  color:#475467;
  border-color:#d0d5dd;
}

.inv-overview-page .inv-main-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.inv-overview-page .inv-panel--wide{
  width:100%;
}

.inv-overview-page .inv-alert-table th.is-num,
.inv-overview-page .inv-alert-table td.is-num{
  text-align:right !important;
}

.inv-overview-page .inv-alert-table th.is-center,
.inv-overview-page .inv-alert-table td.is-center{
  text-align:center !important;
}
@media (max-width: 1200px){
  .inv-overview-page .inv-health-hero{
    flex-direction:column;
  }

  .inv-overview-page .inv-health-hero__chips{
    max-width:none;
    justify-content:flex-start;
  }
}


.inv-overview-page .inv-location-card__metrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 12px;
}

.inv-overview-page .inv-location-card__metric{
  background:#f8fafc;
  border:1px solid #eef2f7;
  border-radius:12px;
  padding:10px 12px;
}

.inv-overview-page .inv-location-card__metric-label{
  font-size:11px;
  color:#667085;
  font-weight:700;
  margin-bottom:4px;
}

.inv-overview-page .inv-location-card__metric-value{
  font-size:18px;
  font-weight:800;
  color:#111827;
  line-height:1.2;
}

.inv-overview-page .inv-location-card__metric-sub{
  font-size:11px;
  color:#6b7280;
  margin-top:4px;
}

.inv-overview-page .inv-alert-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.inv-overview-page .inv-panel{
  background:#fff;
  border:1px solid #e7ebf3;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15, 23, 42, .05);
  overflow:hidden;
}

.inv-overview-page .inv-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}

.inv-overview-page .inv-panel__title{
  font-size:16px;
  font-weight:800;
  color:#111827;
  margin:0;
}

.inv-overview-page .inv-panel__sub{
  font-size:12px;
  color:#6b7280;
  margin-top:4px;
}

.inv-overview-page .inv-panel__badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  background:#f2f4f7;
  color:#344054;
  font-size:13px;
  font-weight:800;
}
.inv-overview-page .inv-alert-table-wrap{
  padding:0 18px 18px;
  overflow:auto;
}

/* 右側の「在庫過多 / 偏在」だけ、縦に長くなりすぎないよう制御 */
.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table-wrap{
  max-height: 260px;
  overflow-y: auto;
  overflow-x: auto;
}

.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table{
  min-width:720px;   /* 過多/偏在表は6列 */
}



.inv-overview-page .inv-alert-table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0;
}

.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table{
  min-width:980px;   /* 欠品表は9列なので広め */
}


.inv-overview-page .inv-alert-table thead tr{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  background:transparent !important;
}

.inv-overview-page .inv-alert-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f8fafc !important;
  color:#475467 !important;
  font-size:12px;
  font-weight:800;
  padding:10px 12px;
  border:0 !important;
  border-bottom:1px solid #e5e7eb !important;
  white-space:nowrap;
  text-align:left !important;
  vertical-align:middle;
}

.inv-overview-page .inv-alert-table tbody td{
  font-size:13px;
  color:#111827;
  padding:10px 12px;
  border:0 !important;
  border-bottom:1px solid #f0f2f5 !important;
  vertical-align:top;
  text-align:left !important;
  background:#fff;
}

/* ------------------------------
   左側：欠品 / 欠品懸念テーブル（9列）
   現在庫 / 輸送在庫 / モール+輸送在庫日数 / 推奨量 を右寄せ
------------------------------ */
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table tbody td:nth-child(4),
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table tbody td:nth-child(5),
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table tbody td:nth-child(6),
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table tbody td:nth-child(9){
  text-align:right !important;
}

/* 種別は中央寄せにすると見やすい */
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table tbody td:nth-child(7){
  text-align:center !important;
  white-space:nowrap;
}

/* 推奨日は折り返さない */
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table tbody td:nth-child(8){
  white-space:nowrap;
}

/* ------------------------------
   右側：在庫過多 / 偏在テーブル（6列）
   在庫日数 / 判定 を右寄せ
------------------------------ */
.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table tbody td:nth-child(4),
.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table tbody td:nth-child(6){
  text-align:right !important;
}

/* 種別は中央寄せ */
.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table tbody td:nth-child(5){
  text-align:center !important;
  white-space:nowrap;
}

/* 左側：欠品表ヘッダ */
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table thead th:nth-child(4),
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table thead th:nth-child(5),
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table thead th:nth-child(6),
.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table thead th:nth-child(9){
  text-align:right !important;
}

.inv-overview-page .inv-alert-grid > section:first-child .inv-alert-table thead th:nth-child(7){
  text-align:center !important;
}

/* 右側：過多/偏在表ヘッダ */
.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table thead th:nth-child(4),
.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table thead th:nth-child(6){
  text-align:right !important;
}

.inv-overview-page .inv-alert-grid > section:last-child .inv-alert-table thead th:nth-child(5){
  text-align:center !important;
}


.inv-overview-page .inv-location-helper{
  margin: 2px 0 4px;
  padding: 10px 14px;
  border: 1px solid #e6ecf5;
  border-radius: 12px;
  background: #fafcff;
  color: #667085;
  font-size: 12px;
  line-height: 1.7;
}


.inv-overview-page .inv-alert-table tbody tr:last-child td{
  border-bottom:none !important;
}

.inv-overview-page .inv-alert-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.inv-overview-page .inv-alert-pill.is-shortage{
  background:#fff1f3;
  color:#c01048;
}

.inv-overview-page .inv-alert-pill.is-excess{
  background:#eff8ff;
  color:#175cd3;
}

.inv-overview-page .inv-empty{
  color:#667085;
  font-size:13px;
  padding:8px 0;
}

.inv-overview-page .inv-graphs{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.inv-overview-page .inv-graph-card{
  background:#fff;
  border:1px solid #e7ebf3;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15, 23, 42, .05);
  padding:12px;
  min-width:0;
  overflow:hidden;
}

.inv-overview-page .inv-graph-card--wide{
  grid-column:1 / -1;
}

.inv-overview-page .inv-graph-card__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding:2px 4px 0;
  flex-wrap:wrap;
}

.inv-overview-page .inv-graph-card__title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#111827;
}

.inv-overview-page .inv-graph-card__sub{
  margin:4px 0 0;
  font-size:12px;
  color:#6b7280;
}

.inv-overview-page .inv-graph-card__body{
  min-height:320px;
  overflow:hidden;
}

.inv-overview-page .inv-graph-card__body > div,
.inv-overview-page .inv-graph-card__body .js-plotly-plot,
.inv-overview-page .inv-graph-card__body .plotly-graph-div,
.inv-overview-page .inv-graph-card__body .plot-container,
.inv-overview-page .inv-graph-card__body .svg-container{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

.inv-overview-page .inv-inline-filter{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px 10px;
}

.inv-overview-page .inv-inline-filter label{
  font-size:12px;
  font-weight:700;
  color:#475467;
  margin:0;
}

.inv-overview-page .inv-inline-filter .form-select{
  min-width:160px;
}

.inv-overview-page .inv-note{
  font-size:12px;
  color:#667085;
}

@media (max-width: 1399px){
  .inv-overview-page .inv-overview-kpis{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .inv-overview-page .inv-location-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px){
  .inv-overview-page .inv-alert-grid,
  .inv-overview-page .inv-graphs{
    grid-template-columns:1fr;
  }
  .inv-overview-page .inv-graph-card--wide{
    grid-column:auto;
  }
}

@media (max-width: 767px){
  .inv-overview-page .inv-overview-kpis,
  .inv-overview-page .inv-location-grid{
    grid-template-columns:1fr;
  }
  .inv-overview-page .inv-kpi-card__value{
    font-size:24px;
  }
}

/* ============================================================
   供給計算明細：AIコメントパネル
   ============================================================ */
   .supply-ai-panel{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding-right: 4px;
  }
  
  .supply-ai-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .supply-ai-title{
    font-size: 18px;
    font-weight: 900;
    color: #111827;
    line-height: 1.2;
  }
  
  .supply-ai-subtitle{
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
  }
  
  .supply-ai-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .supply-ai-badge{
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
  }
  
  .supply-ai-badge-high{
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
  }
  
  .supply-ai-badge-medium{
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
  }
  
  .supply-ai-badge-low{
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
  }
  
  .supply-ai-summary{
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #111827;
    font-size: 14px;
    line-height: 1.8;
  }
  
  .supply-ai-section{
    margin-top: 14px;
  }
  
  .supply-ai-section-title{
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.04em;
  }
  
  .supply-ai-list{
    margin: 0;
    padding-left: 18px;
  }
  
  .supply-ai-list li{
    margin-bottom: 6px;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.7;
  }
  
  .supply-ai-error{
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fdba74;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
    line-height: 1.6;
  }
  
  .supply-ai-caution{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    line-height: 1.6;
  }
  
  .supply-ai-foot{
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #6b7280;
  }

  /* ======================================
   全ページ共通ヘルプチャット
   ====================================== */
.sw-helpchat-root{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 12000;
}

/* embed=1 のときはチャットを出さない */
.embed-mode .sw-helpchat-root{
  display: none !important;
}

.sw-helpchat-fab{
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid #183181;
  background: #ffffff;
  color: #183181;
  box-shadow: 0 12px 30px rgba(24,49,129,.24);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.sw-helpchat-fab i{
  font-size: 26px;
}

.sw-helpchat-popup{
  position: absolute;
  right: 0;
  bottom: 78px;
  width: min(390px, calc(100vw - 24px));
  height: min(580px, calc(100vh - 110px));
  background: #f8fafc;
  border: 1px solid rgba(24,49,129,.16);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.sw-helpchat-popup.is-open{
  display: flex;
}

.sw-helpchat-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #183181;
  color: #fff;
}

.sw-helpchat-head__title{
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.sw-helpchat-head__sub{
  font-size: 12px;
  opacity: .92;
  margin-top: 2px;
}

.sw-helpchat-close{
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sw-helpchat-log{
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 8px;
  background: linear-gradient(180deg, rgba(24,49,129,.03), rgba(24,49,129,0));
}

.sw-helpchat-msg{
  display: flex;
  margin-bottom: 10px;
}

.sw-helpchat-msg--user{
  justify-content: flex-end;
}

.sw-helpchat-msg--bot{
  justify-content: flex-start;
}

.sw-helpchat-bubble{
  max-width: 92%;
  border-radius: 18px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
  word-break: break-word;
}

.sw-helpchat-msg--user .sw-helpchat-bubble{
  background: #183181;
  color: #fff;
  border-bottom-right-radius: 8px;
}

.sw-helpchat-msg--bot .sw-helpchat-bubble{
  background: #fff;
  color: #111827;
  border: 1px solid rgba(15,23,42,.08);
  border-bottom-left-radius: 8px;
}

.sw-helpchat-text{
  font-size: 13px;
  line-height: 1.7;
}

.sw-helpchat-loading{
  color: #6b7280;
  font-size: 13px;
}

.sw-helpchat-quick{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 10px;
}

.sw-helpchat-chip{
  border: none;
  background: #fff;
  color: #183181;
  border: 1px solid rgba(24,49,129,.14);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sw-helpchat-input{
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  background: #fff;
  border-top: 1px solid rgba(15,23,42,.08);
}

.sw-helpchat-input textarea{
  flex: 1;
  min-height: 42px;
  max-height: 110px;
  resize: none;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}

.sw-helpchat-input button{
  border: none;
  border-radius: 14px;
  padding: 0 16px;
  background: #183181;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.sw-helpchat-ref-list{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.sw-helpchat-ref-card{
  border: 1px solid rgba(24,49,129,.12);
  background: #f8fafc;
  border-radius: 14px;
  padding: 10px 12px;
}

.sw-helpchat-ref-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.sw-helpchat-ref-pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #183181;
  background: rgba(24,49,129,.08);
  border: 1px solid rgba(24,49,129,.12);
}

.sw-helpchat-ref-title{
  font-weight: 800;
  color: #111827;
  font-size: 14px;
  margin-bottom: 6px;
}

.sw-helpchat-ref-intro{
  color: #4b5563;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 6px;
}

.sw-helpchat-ref-snippet{
  color: #111827;
  font-size: 12px;
  line-height: 1.6;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.sw-helpchat-ref-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sw-helpchat-ref-link,
.sw-helpchat-related-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 11px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.sw-helpchat-ref-link{
  background: #183181;
  color: #fff;
}

.sw-helpchat-ref-link:hover{
  color: #fff;
  opacity: .92;
}

.sw-helpchat-related-link{
  background: #eef2ff;
  color: #183181;
}

.sw-helpchat-related-link:hover{
  color: #183181;
  opacity: .92;
}

@media (max-width: 768px){
  .sw-helpchat-root{
    right: 12px;
    bottom: 12px;
  }

  .sw-helpchat-popup{
    width: min(100vw - 16px, 390px);
    height: min(72vh, 580px);
    bottom: 72px;
  }
}

/* ============================================================
   登録情報ページ（マイページ ＞ 登録情報）  ※ クラスは .ri- 接頭辞
   ============================================================ */
   .ri-wrap{
    box-sizing:border-box;
    width:95%;
    max-width:1800px;   /* 超ワイドモニタでの伸びすぎ防止。完全フルードにするなら none */
    margin:0 auto;
    padding:8px 0 48px;
  }
  .ri-wrap *,
  .ri-wrap *::before,
  .ri-wrap *::after{ box-sizing:border-box; }
  
  .ri-two-col{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    align-items:flex-start;
  }
/* min-width:0 が無いと内側の表で横はみ出しが起きる */
.ri-col-member{   flex:1 1 420px; min-width:0; }
.ri-col-category{ flex:1 1 420px; min-width:0; }
  
  /* 既存テーブルラッパを2カラム用に上書き（50%幅・中央寄せを解除） */
  .ri-col-member .profile-table-wrapper{ width:100%; max-width:none; margin-top:0; }
  
  .ri-section-title{
    font-size:.95rem; font-weight:700; color:#1e2a78;
    margin:0 0 10px; padding-left:9px; border-left:4px solid #1e2a78;
  }
  
  /* 合計サマリー */
  .ri-cat-summary{
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    background:linear-gradient(90deg,#1e2a78,#161f5c);
    color:#fff; border-radius:10px; padding:13px 18px; margin-bottom:14px;
  }
  .ri-cat-total{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
  .ri-cat-total .num{ font-size:1.9rem; font-weight:800; line-height:1; }
  .ri-cat-total .unit{ font-size:.82rem; font-weight:600; }
  .ri-cat-total .label{ font-size:.7rem; opacity:.85; }
  .ri-cat-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
  .ri-cat-chip{
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
    border-radius:999px; padding:3px 10px; font-size:.73rem; font-weight:600;
  }
  
  /* プラットフォーム別 集計表 */
  .ri-sum-table{ width:100%; border-collapse:collapse; margin-bottom:18px; }
  .ri-sum-table th,
  .ri-sum-table td{ border:1px solid #dadce6; padding:7px 11px; font-size:.82rem; }
  .ri-sum-table thead th{ background:#eef0f7; color:#1e2a78; font-weight:700; }
  .ri-sum-table td.count{ text-align:right; font-weight:700; }
  .ri-sum-table .col-count{ width:130px; }
  .ri-sum-table tr.total td{ background:#f4f5fa; font-weight:800; color:#1e2a78; }
  
  /* プラットフォーム パネル（縦積み） */
  .ri-pf-panel{ border:1px solid #dadce6; border-radius:10px; overflow:hidden; margin-bottom:14px; }
  .ri-pf-head{
    display:flex; align-items:center; gap:8px;
    padding:8px 14px; color:#fff; font-weight:700; font-size:.88rem; background:#5a6275;
  }
  .ri-pf-head.amazon{  background:#ff9900; }
  .ri-pf-head.rakuten{ background:#bf0000; }
  .ri-pf-head.yahoo{   background:#ff0033; }
  .ri-pf-head .badge-cnt{
    margin-left:auto; background:rgba(255,255,255,.25);
    border-radius:999px; padding:2px 10px; font-size:.76rem; font-weight:600;
  }
  .ri-pf-body{ padding:13px; background:#fff; }
  
  /* カテゴリーカード */
  .ri-cat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(106px,1fr));
    gap:10px;
  }
  .ri-cat-card{
    border:1px solid #dadce6; border-radius:8px;
    padding:9px 6px; text-align:center; background:#fdfdff;
  }
  .ri-cat-card img{
    width:100%; max-width:74px; height:74px;
    object-fit:contain; margin:0 auto 5px; display:block;
  }
  .ri-cat-card .cname{
    font-size:.76rem; font-weight:700; color:#222;
    line-height:1.25; word-break:break-word;
  }
  .ri-cat-card .ctag{ font-size:.65rem; color:#8a90a6; margin-top:2px; }
  
  .ri-note{
    font-size:.73rem; color:#6b7280; background:#f4f5fa;
    border-radius:8px; padding:10px 12px;
  }
  .ri-note b{ color:#1e2a78; }
  .ri-empty{ color:#6b7280; font-size:.84rem; padding:10px 0; }
  
  /* 画面が狭いとき */
  @media (max-width:992px){
    .ri-wrap{ padding:8px 14px 40px; }
    .ri-cat-chips{ margin-left:0; }
  }