/*
 * 配車状況共有ツール：Bootstrapテーマ補助CSS（仕様書 8.2）
 * bootstrap.min.css（ローカルコンパイル版。vendor/bootstrap-src参照）の後に読み込む。
 * 色・文字サイズ・角丸などの本体はBootstrap側のSCSS変数で決めており（vendor/bootstrap-src/custom.scss）、
 * ここではBootstrapのSCSS変数では表現できない、ツール固有の寸法だけを変数化する。
 */

:root {
  --tool-header-height: 44px;   /* 8.2 ヘッダーの高さ */
  --tool-bar-height: 36px;      /* 8.2 切替バーの高さ */
  --tool-spacer: 8px;           /* 8.2 余白は8pxの倍数で統一 */
  --tool-primary: #1D3A5F;      /* 8.2 主色（紺） */
}

body {
  font-size: 13px;
}

/* ヘッダー：左にタイトル＋メニュー、右端にユーザー名とログアウト（6.5） */
.tool-header {
  height: var(--tool-header-height);
  min-height: var(--tool-header-height);
  background: var(--tool-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: var(--tool-spacer);
  padding: 0 var(--tool-spacer);
  flex: 0 0 auto;
}
.tool-header .navbar-brand,
.tool-header .nav-link {
  color: #FFFFFF;
  font-size: 13px;
  padding: 0.25rem 0.5rem;
}
.tool-header .nav-link:hover,
.tool-header .navbar-brand:hover { color: #E9EEF5; }
.tool-header .dropdown-menu { font-size: 13px; }

/* ヘッダー内のKPI帯（6.5：色付きの箱にしない。文字だけの小さな帯） */
.tool-kpi-bar {
  display: flex;
  align-items: center;
  gap: var(--tool-spacer);
  font-size: 11px;
  white-space: nowrap;
  margin-left: var(--tool-spacer);
  padding-left: var(--tool-spacer);
  border-left: 1px solid rgba(255,255,255,0.35);
}
.tool-kpi-bar b { font-size: 12px; font-weight: 700; }

/* 画面全体：ヘッダー固定／サイドメニュー固定／ボディーのみスクロール（6.5） */
.tool-shell { display: flex; flex-direction: column; height: 100vh; }
.tool-body-row { flex: 1 1 auto; display: flex; min-height: 0; }
.tool-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.tool-main-scroll { flex: 1 1 auto; overflow: auto; padding: var(--tool-spacer); min-height: 0; }
/* 9.1：配車表のページでは、スクロールする領域を.dboard-scroll1つだけにする。
   .tool-main-scroll自身はスクロールさせず、ただの余白コンテナとして.dboard-scrollに高さを明け渡す。 */
.tool-main-scroll-grid { overflow: hidden; display: flex; flex-direction: column; }
.tool-toolbar { flex: 0 0 auto; padding: 6px var(--tool-spacer); border-bottom: 1px solid #D4D4D4; }

/* 6.4・6.5【v2.11確定】：ツールバーは、いつも2行・高さ固定（配車表の上端がぶれないようにする）。
   1行目・2行目とも折り返さず（flex-wrap:nowrap）、高さをvar(--tool-bar-height)に固定して、
   入りきらない分は行の中だけで横スクロールする（ツールバー自体の高さは変わらない）。 */
.toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  height: var(--tool-bar-height);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}
.toolbar-row-1 + .toolbar-row-2 { margin-top: 4px; }
/* 1行目は、サイドメニュー表示時の1,500px幅でも収まるよう、ボタンの左右余白だけを少し詰める
   （文言・並び・ボタンの数はv2.9以前のまま変えない）。アプリ全体の.btnには影響させない。 */
.toolbar-row-1 .btn { padding: 0.2rem 0.35rem; }
.toolbar-row-1 { gap: 8px; }
.toolbar-row-1 .d-flex.gap-2 { gap: 6px !important; }
/* 6.4【v2.12確定】：2行目の先頭（グループ：）が、1行目の「営業所：」の真下から始まるよう、
   1行目の最初の要素（期間移動＋期間の文字）の幅を固定する。期間の文字の長さが変わっても、
   「営業所：」の位置がずれない。2行目のpadding-leftは、その固定幅＋行の gap(8px) に合わせる。 */
.toolbar-row-1 > *:first-child { flex: 0 0 306px; width: 306px; }
.toolbar-row-2 { padding-left: 314px; }

/* 6.4【v2.12確定・v2.14修正】：グループ検索欄の候補一覧（カスタムのドロップダウン）。
   名前クリックで絞り込みに追加、☆/★クリックで「よく使うグループ」に登録・解除する。
   .toolbar-row は横スクロール用にoverflow:hiddenを含むため、一覧をその中（position:absolute）に
   置くと切り取られてしまう。body直下へ移し、position:fixedでJSが検索欄の位置に合わせて置く
   （重ね順は、配車表の見出し・フロート・サイドメニュー・お知らせより、必ず手前にする）。 */
.tag-suggest-dropdown {
  display: none;
  position: fixed;
  min-width: 220px; max-height: 280px; overflow-y: auto;
  background: #FFFFFF; border: 1px solid #D4D4D4; border-radius: var(--bs-border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); z-index: 1090;
}
.tag-suggest-dropdown.show { display: block; }
.tag-suggest-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; white-space: nowrap; }
.tag-suggest-row:hover { background: #F2F2F2; }
.tag-suggest-row.hidden-by-filter { display: none; }
.tag-suggest-star { border: 0; background: none; padding: 0; font-size: 14px; line-height: 1; color: #ADB5BD; cursor: pointer; flex-shrink: 0; }
.tag-suggest-star.active { color: #ED7D31; }
.tag-suggest-name { font-size: 12px; cursor: pointer; flex: 1 1 auto; }

/* 5.1【v2.18確定】：お客様画面の「詳しく指定する」の品名欄の候補（最近使った品名／★よく使う品名）。
   仕組みはグループ検索の候補一覧（.tag-suggest-dropdown）と同じ（配車フロート自体がoverflow:hiddenの
   ため、body直下へ移し、position:fixedでJSが欄の位置に合わせて置く）。 */
.item-name-suggest-dropdown {
  display: none;
  position: fixed;
  min-width: 220px; max-height: 280px; overflow-y: auto;
  background: #FFFFFF; border: 1px solid #D4D4D4; border-radius: var(--bs-border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); z-index: 1090;
}
.item-name-suggest-dropdown.show { display: block; }
.item-name-suggest-heading { font-size: 11px; font-weight: 700; color: #898989; padding: 4px 8px 2px; }
.item-name-suggest-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; white-space: nowrap; }
.item-name-suggest-row:hover { background: #F2F2F2; }
.item-name-suggest-star { border: 0; background: none; padding: 0; font-size: 14px; line-height: 1; color: #ADB5BD; cursor: pointer; flex-shrink: 0; }
.item-name-suggest-star.active { color: #ED7D31; }
.item-name-suggest-name { font-size: 12px; cursor: pointer; flex: 1 1 auto; }

/* 5.1【v2.18確定】：「詳しく指定する」の項目名・入力欄を横並びにし、項目名の左端・入力欄の左端を
   それぞれ縦にそろえる（項目名の幅を固定することで、揃える）。 */
.portal-order-detail-toggle .detail-row { display: flex; align-items: center; gap: 8px; }
.portal-order-detail-toggle .detail-label {
  display: inline-block; width: 74px; flex-shrink: 0;
  font-size: 12px; color: #595959;
}

/* サイドメニュー（6.5：枠内の二重スクロールにせず、全体で1回だけスクロール） */
.tool-sidebar {
  width: 320px;
  flex: 0 0 auto;
  border-left: 1px solid #D4D4D4;
  overflow-y: auto;
  padding: var(--tool-spacer);
  display: flex;
  flex-direction: column;
  gap: var(--tool-spacer);
}
.tool-sidebar.collapsed { display: none; }

/* つながったボタン群（営業所・表示・日数・期間移動）：選択中は紺の塗り、個別の枠・下線なし（6.4） */
.tool-toggle-group .btn { border-radius: 0; }
.tool-toggle-group .btn:first-child { border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); }
.tool-toggle-group .btn:last-child { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }
.tool-toggle-label { font-size: 12px; color: #595959; margin-right: 4px; align-self: center; }

/* 6.4：タグの絞り込み（ツールバー2行目）。検索欄・チップ・「よく使うタグ」の文字リンク
   （ボックスにしない）。行自体が.toolbar-rowとして横スクロールするため、ここでは縮めない
   （縮めると、チップが増えた時に文字が潰れてしまうため）。 */
.tag-search-input { width: 160px; flex-shrink: 0; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 3px; background: #E9ECEF; border-radius: 3px;
  padding: 1px 6px; font-size: 12px; white-space: nowrap; flex-shrink: 0;
}
.tag-chip-remove { color: #6c757d; text-decoration: none; font-weight: 700; }
.tag-chip-remove:hover { color: #262626; }
/* 2.2：車両一覧の画面。自動タグ（単車・トレーラー・メタノール）は、手動タグと区別できるよう
   少し濃い灰色にし、×を付けない（外せない）。手動タグは×（button_to）で外せる。 */
.tag-chip-auto { background: #D4D4D4; color: #595959; }
.tag-chip-remove-btn {
  border: 0; background: none; padding: 0; margin-left: 2px; color: #6c757d; font-weight: 700;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.tag-chip-remove-btn:hover { color: #262626; }
.tag-favorites { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }
.tag-favorite-link { color: #898989; text-decoration: none; }
.tag-favorite-link:hover { color: #262626; }
.tag-favorite-link.active { font-weight: 700; color: var(--tool-primary, #1D3A5F); }

/* お知らせ（トースト）。一定時間で消える小さな表示（6.5）
   右下に固定し、ヘッダー・切替バー右側の各種ボタン（お客様側画面ボタン等）と重ならないようにする。 */
.tool-toast-container-bottom { position: fixed; bottom: 16px; right: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; }

/* 既存の各画面で使っている簡易ボタン／パネル用クラス。
   Bootstrapのボタン部品と同じデザイントークン（色・角丸・高さ）を使い、見た目を統一する。
   ボタン群・タブ・サイドメニュー折りたたみ・便パネル・ヘッダーなど、挙動が要るものは
   Bootstrap本体のコンポーネント（btn-group / list-group / offcanvas / modal / navbar）を使う。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 0.2rem 0.75rem; border-radius: var(--bs-border-radius);
  font-size: 13px; cursor: pointer; background: #FFFFFF; color: #000000; border: 1px solid #ADB5BD;
  text-decoration: none; line-height: 1.3;
}
.btn:hover { background: #F2F2F2; color: #000000; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--tool-primary); color: #FFFFFF; border-color: var(--tool-primary); font-weight: 700; }
.btn-primary:hover { background: #16314F; color: #FFFFFF; }
.btn-active, .btn.active { background: var(--tool-primary); color: #FFFFFF; border-color: var(--tool-primary); font-weight: 700; }
.btn-orange { background: #ED7D31; color: #000000; border-color: #ED7D31; }
.btn-dashed, .border-dashed { border-style: dashed !important; }

.link-btn { background: none; border: 0; padding: 0; margin: 0; color: #0070C0; text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; }
.link-btn:hover { color: #005A9E; }
a { color: #0070C0; }

/* 配車フロート（6.3）：背景を暗くしない、ドラッグで動かせる独自のウィンドウ（Bootstrapのmodalは使わない）。
   幅・高さ・角丸は変数化し、1か所（ここ）で変更できるようにする【暫定】。
   TradingViewの「シンボルの追加」をモデルにした内側の見た目（検索欄・タブ・一覧）は維持する。 */
:root {
  --slot-float-width: 840px;
  --slot-float-height: 680px;
  --slot-float-compact-width: 480px;
  --slot-float-portal-order-width: 640px;
  --slot-float-radius: 8px;
  --portal-dest-list-height: 330px;
}
/* 5.1【v2.17確定】：画面の高さが低い場合（目安：高さ760px以下）は、届け先の一覧を約6行分（240px）に
   縮める。それでも足りない分は、フロートの上の部分（.portal-order-scroll-top）がフロートの中でスクロールする。 */
@media (max-height: 760px) {
  :root { --portal-dest-list-height: 240px; }
}
.slot-float {
  position: fixed;
  top: 80px;
  left: 80px;
  width: var(--slot-float-width);
  height: min(var(--slot-float-height), calc(100vh - 32px));
  border-radius: var(--slot-float-radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  overflow: hidden;
  z-index: 1050;
  display: flex;
  flex-direction: column;
}
/* 5.：配車済みマスの詳細は、幅約480pxの小さめのフロート。高さは中身に合わせる */
.slot-float.slot-float-compact {
  width: var(--slot-float-compact-width);
  height: auto;
  max-height: calc(100vh - 32px);
}
/* 5.1【v2.17確定】：お客様画面の「車両の枠を仮に押さえる」フォームは、幅約640px・高さは中身に合わせる
   （社内の配車フロート840pxより小さい。お客様にはお客様番号の選択など不要なため）。高さは最大で画面の90%。 */
.slot-float.slot-float-portal-order {
  width: var(--slot-float-portal-order-width);
  height: auto;
  max-height: 90vh;
}
/* 5.1【v2.17確定】：案内の帯（常に表示）。小さな文字・薄い背景。 */
.portal-order-banner {
  background: #F2F2F2;
  color: #595959;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
}
/* 5.1【v2.17確定】：フロートの上の部分（案内・積込場所・時間帯・詳しく指定する）。届け先の一覧より先に
   縮む・スクロールする（flex-shrinkの既定値のまま。下の.dest-listは高さを固定値で持つため、
   flexの再配分では、この部分だけが縮む）。 */
.portal-order-scroll-top {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.portal-order-dest-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.portal-order-dest-section .dest-list {
  height: var(--portal-dest-list-height);
  flex: 0 0 auto;
  overflow-y: auto;
}
.portal-order-detail-toggle summary {
  cursor: pointer;
  color: var(--tool-primary);
  list-style: none;
}
.portal-order-detail-toggle summary::-webkit-details-marker { display: none; }
.portal-order-detail-toggle summary::before { content: "▶ "; font-size: 10px; }
.portal-order-detail-toggle[open] summary::before { content: "▼ "; }

/* 5.1【v2.17確定】：「仮押さえの状況」の、段階（仮押さえ中→仮予約済み→確定）を示す3つの小さな丸。 */
.stage-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D4D4D4;
  flex-shrink: 0;
}
.stage-dot.active { background: var(--tool-primary); }
.slot-float-registered {
  width: 360px;
  height: auto;
  max-height: calc(100vh - 32px);
  z-index: 1060;
}
/* 6.3：閉じている間もレイアウト（＝実寸）を保ったまま見えなくする。
   前回位置がクリックしたマスに重なるかどうかを、開く前にgetBoundingClientRectで判定するため
   （display:noneだと閉じている間は寸法が0になり、重なり判定ができない）。 */
.slot-float-main { visibility: hidden; pointer-events: none; }
.slot-float-main.slot-float-open { visibility: visible; pointer-events: auto; }
.slot-float-handle { cursor: move; user-select: none; }
.slot-float-handle .btn-close { cursor: pointer; }
#slot-panel-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* 5.1【v2.17確定】：flexアイテムの既定のmin-height:auto（中身の高さ未満に縮まない）を打ち消す。
   お客様画面の仮押さえフォーム（高さauto＋max-height）で、画面が低い時に.portal-order-scroll-topが
   正しく縮んでスクロールするために必要（このルールが無いと、中身の高さのまま縮まずあふれる）。 */
#slot-panel-body > .h-100 { min-height: 0; }

.slot-pill { border-radius: 50rem !important; }

/* 6.3：見出しの下の小さなリンク5つ（枠を増やす／枠を減らす／車検／整備／受付不可にする）。
   オレンジなどの色は使わず、白地に灰色の枠にする（3章）。 */
.quicklink-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 8px; font-size: 11px; white-space: nowrap;
  background: #FFFFFF; color: #262626; border: 1px solid #ADB5BD; border-radius: 3px;
  cursor: pointer; text-decoration: none;
}
.quicklink-btn:hover { background: #F2F2F2; }
.quicklink-btn:disabled { opacity: .4; cursor: default; }

/* 5.1【v2.16確定】：他社のオーダー・ご利用不可のマスをクリックした時に、クリックした場所の近くへ
   数秒だけ出す、小さな案内（配車フロートは開かない）。 */
.cell-unavailable-notice {
  position: fixed;
  display: none;
  background: #262626;
  color: #FFFFFF;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 1070;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.cell-unavailable-notice.show { display: block; }

/* 5.：配車済みマスの詳細フロートの状態バッジ */
.slot-badge-fixed { background: var(--tool-primary); color: #FFFFFF; }
.slot-badge-done { background: #217346; color: #FFFFFF; }

/* 6.4・9.3：ヘッダー右上の拡大・縮小（ブラウザのズームのような「－／100％／＋」とExcelのようなつまみ）。
   対象は配車表の中だけなので、ヘッダー自体の文字サイズは拡大・縮小の影響を受けない固定値にする。 */
.header-zoom { font-size: 13px; }
.header-zoom-btn { width: 24px; padding: 0; font-weight: 700; }
.header-zoom-pct { width: 44px; padding: 0 4px; }

/* 9.3【確定】：濃い紺のヘッダーの上で見やすいつまみ。つまみ＝白の大きめの丸、線＝白の半透明、
   長さ約110px、100％の位置に小さな目盛り。--header-zoom-slider-w 1か所で長さを変えられる。 */
:root { --header-zoom-slider-w: 110px; }
.header-zoom-slider-wrap { position: relative; width: var(--header-zoom-slider-w); height: 20px; display: flex; align-items: center; }
.header-zoom-tick {
  position: absolute; top: 50%; left: 37.5%; /* (100-70)/(150-70) */
  width: 2px; height: 8px; background: rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%); pointer-events: none;
}
.header-zoom-slider {
  -webkit-appearance: none; appearance: none;
  width: var(--header-zoom-slider-w); height: 4px; margin: 0;
  background: rgba(255, 255, 255, 0.35); border-radius: 2px; cursor: pointer;
}
.header-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF; border: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.header-zoom-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF; border: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.header-zoom-slider::-moz-range-track {
  width: var(--header-zoom-slider-w); height: 4px;
  background: rgba(255, 255, 255, 0.35); border-radius: 2px;
}

/* 6.4・6.5：サイドメニュー先頭「お客様からの申し込み」の行。クリックで該当マスへ移動する。 */
.pending-order-row {
  display: block; padding: 6px 8px; border-radius: var(--bs-border-radius);
  color: inherit; text-decoration: none; border: 1px solid #D4D4D4; margin-bottom: 4px;
}
.pending-order-row:hover { background: #F2F2F2; }
.pending-order-row:last-child { margin-bottom: 0; }

/* あ・か・さ…タブ／お客様・積込場所タブの選択状態。
   .btn-primaryをJSで付け外しするのではなく、.gyou-tab.active（または.pill-tab.active）という
   専用クラスだけを基準にする（初期状態の「すべて」もこのクラスで表す）。 */
.gyou-tab.active, .pill-tab.active {
  background: var(--tool-primary); color: #FFFFFF; border-color: var(--tool-primary); font-weight: 700;
}

/* 届け先1行（6.3）。Bootstrapの.d-flexは!importantのため、JSでのdisplay切替と競合する。
   それを避けるため、flexレイアウトは独自クラスで持たせ、表示/非表示は.dest-row-hiddenで切り替える。 */
.dest-row {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 8px; box-sizing: border-box;
  border-bottom: 1px solid #E9ECEF; cursor: pointer;
}
.dest-row:last-child { border-bottom: 0; }
.dest-row.dest-row-hidden { display: none; }
.dest-row.selected { background: #F2F2F2; }
.dest-row .dest-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel-box { box-sizing: border-box; border: 1px solid #D4D4D4; padding: 12px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--bs-border-radius); }
.kv-table { border-top: 1px solid #D4D4D4; border-left: 1px solid #D4D4D4; font-size: 13px; }
.kv-row { display: flex; }
.kv-th { width: 70px; padding: 5px 8px; box-sizing: border-box; border-right: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; color: #595959; }
.kv-td { flex: 1 1 auto; padding: 5px 8px; box-sizing: border-box; border-right: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; font-weight: 700; }