/*
 * 配車状況共有ツール：配車表グリッド専用CSS（仕様書 9章）
 * Bootstrapの表の部品は使わず、ここだけで完結させる。
 * 色（9.2）・サイズ（9.3）はすべてCSS変数にまとめ、拡大・縮小は --grid-scale 変数1つで行う
 * （ヘッダー右上の「−／100％／＋」とつまみがJSでこの変数を書き換える）。
 */

:root {
  /* 9.2 配色（【暫定】） */
  --grid-bg: #FFFFFF;
  --grid-border: #D4D4D4;
  --grid-truck-divider: #A6A6A6;
  --grid-header-bg: #F2F2F2;
  --grid-header-fg: #262626;
  --grid-empty-fg: #A6A6A6;
  --grid-sat-fg: #0070C0;
  --grid-sun-fg: #C00000;
  --grid-ctt: #CCFFFF;
  --grid-marubeni: #FFFFCC;
  --grid-provisional-timed: #FFE0B3;
  --grid-provisional-notime: #E4D6F5;
  --grid-hatch-line: #808080;
  --grid-selected: #217346;
  /* 9.2【v2.14確定】：今日の目印は、日付の見出しの左に付ける小さな丸だけ（v2.13の淡い緑の塗り・
     左右の線は廃止）。ほかは彩度の低い色でまとめている中で、ここだけ例外的に彩度の高い黄緑にする。
     色・直径・間隔は、下の3つの変数だけで変えられる（直径・間隔は100%時の値。拡大縮小で比例する）。 */
  --grid-today-dot: #76D600;
  --grid-today-dot-diameter: calc(9px * var(--grid-scale));
  --grid-today-dot-gap: calc(4px * var(--grid-scale));
  --grid-hover: #F2F2F2;

  /* 9.3 拡大・縮小：100%が基準値（v2.2までの「中」と同じ）。倍率は --grid-scale 1つで決まり、
     ヘッダー右上の「−／100％／＋」とつまみがこの変数をJSで書き換える（6.4・9.3）。
     マス内の左右の余白（--grid-cell-pad）だけは倍率の対象外で固定。
     日付列の最小幅は、1週間・2週間用と1か月用の2つを持つ。 */
  --grid-scale: 1;
  --grid-row-h: calc(24px * var(--grid-scale));
  --grid-header-h: calc(28px * var(--grid-scale));
  --grid-font: calc(13px * var(--grid-scale));
  /* 9.4【v2.8】：日付見出しの文字だけ、本体（--grid-font）より少し小さくする
     （100%で12px・太字。変えるときはここだけでよい）。倍率の掛け方は他のサイズと同じ。 */
  --grid-date-header-font: calc(12px * var(--grid-scale));
  --grid-date-col-min-w: calc(110px * var(--grid-scale));
  --grid-date-col-min-w-month: calc(88px * var(--grid-scale));
  --grid-truck-col-w: calc(140px * var(--grid-scale));
  --grid-cell-pad: 4px;
}

/* 9.1：スクロールする領域は1つだけにする。親（.tool-main-scroll-grid）がflexで高さを管理し、
   .dboard-scroll はその残り高さいっぱいに広がって、自分自身だけがスクロールする唯一の領域になる
   （外側の.tool-main-scrollは overflow:hidden でスクロールしない）。
   こうしないと、position:stickyの基準が「実際にスクロールしない.dboard-scroll」になってしまい、
   見出し行・見出し列の固定が効かなくなる（v2.1 7章で確認された不具合）。 */
.dboard-scroll {
  overflow: auto;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

table.dboard {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--grid-font);
  background: var(--grid-bg);
}

/* 9.3：車番列（見出し列）・縦向きの日付列（見出し列）の幅は、グリッドサイズの変数に連動する。
   横向きの日付列は画面幅に合わせてJSが幅を再計算するため、ここでの値はJS実行前の初期表示のみに使う。 */
table.dboard colgroup col.truck-col { width: var(--grid-truck-col-w); }
table.dboard-vertical colgroup col.date-col { width: var(--grid-date-col-min-w-month); }

/* 9.4：罫線は細い灰色の1px。太い黒線は使わない。
   9.3：上下はborderではなくbox-shadow(inset)で描く。tableのセルは、指定したheightより
   中身が大きいと上下border分だけ実際の高さが伸びてしまう（1台が40pxでなく42pxになっていた原因）。
   box-shadowのinsetはボックスサイズに影響しないため、この問題が起きない。 */
table.dboard th,
table.dboard td {
  border-left: 1px solid var(--grid-border);
  border-right: 1px solid var(--grid-border);
  box-shadow: inset 0 1px 0 var(--grid-border), inset 0 -1px 0 var(--grid-border);
  box-sizing: border-box;
}

table.dboard th {
  background: var(--grid-header-bg);
  color: var(--grid-header-fg);
  font-weight: 700;
  text-align: center;
  height: var(--grid-header-h);
  padding: 0 var(--grid-cell-pad);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table.dboard td.rowhead {
  background: var(--grid-header-bg);
  vertical-align: middle;
  padding: 2px var(--grid-cell-pad);
  cursor: pointer;
  height: calc(var(--grid-row-h) * 2); /* 9.3：1台の高さ＝便の高さ×2（20px×2＝40px） */
  position: relative;
}
table.dboard th.vehicle-rowhead { position: relative; }
table.dboard td.rowhead:hover,
table.dboard th.vehicle-rowhead:hover { background: var(--grid-hover); }

/* 6.2・6.3・9.4：メモがある車番セル・マスの右上に出す、Excelのコメントのような小さな三角。
   色は【暫定】。カーソルを乗せると内容が出る（title属性のネイティブツールチップを利用）。 */
.memo-triangle {
  position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 8px 8px 0;
  border-color: transparent #ED7D31 transparent transparent;
  pointer-events: none;
}
.seg-btn { position: relative; }
.seg-btn .memo-triangle { border-width: 0 7px 7px 0; }

/* 6.3・9.4：時刻を入れた配車は、マスの中に「09:30」のように表示する */
.seg-time { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: inherit; }

.rowhead-no { font-size: var(--grid-font); font-weight: 700; line-height: 1.1; }
/* 9.4：車番セルの「車種・営業所」は省略せず、折り返さない幅にする。
   「呼称」つきの車両（例：単車 A3640 小名浜営業所）は1行に収まらないため、2行で表示する
   （文字は詰めて9pxにし、行間も詰める。それでも収まらない場合は別途検討）。 */
.rowhead-desc { font-size: 9px; line-height: 1.15; white-space: normal; overflow: visible; color: #595959; word-break: keep-all; }

/* 2便で1台分。隣の車両との区切りだけ少し濃くする（9.2） */
table.dboard tbody tr:nth-child(even) td.rowhead,
table.dboard tbody tr:nth-child(even) td.cell {
  /* borderだと行が41pxになってしまうため、box-shadow(inset)で描く（9.3）。 */
  box-shadow: inset 0 1px 0 var(--grid-truck-divider), inset 0 -1px 0 var(--grid-border);
}

table.dboard td.cell { padding: 0; vertical-align: top; overflow: hidden; height: calc(var(--grid-row-h) * 2); }

.seg-btn {
  display: flex; align-items: center; gap: 3px; width: 100%; height: var(--grid-row-h);
  box-sizing: border-box; padding: 0 var(--grid-cell-pad); border: 0; border-top: 1px solid var(--grid-border);
  cursor: pointer; text-align: left; font-size: var(--grid-font); background: none; color: inherit;
  text-decoration: none; overflow: hidden;
}
.cell .seg-btn:first-child { border-top: 0; }
.seg-slot { width: 14px; flex: 0 0 auto; font-size: 10px; color: #808080; text-align: center; }
.seg-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.seg-empty { color: var(--grid-empty-fg); }
.seg-provisional-timed { background: var(--grid-provisional-timed); border: 1px dashed #000; box-sizing: border-box; font-weight: 700; }
.seg-provisional-notime { background: var(--grid-provisional-notime); border: 1px dashed #000; box-sizing: border-box; }
.seg-provisional-tag { font-weight: 700; } /* 「仮」の文字（絵文字は使わない：9.5） */

.seg-btn.dragging { opacity: .35; }
.seg-btn.drag-over { outline: 2px dashed var(--tool-primary, #1D3A5F); outline-offset: -2px; background-color: #E9F3FF; }

/* 稼働不可・受付不可：白地に灰色の斜線（9.2） */
.hatch, .seg-btn.hatch {
  background-image: repeating-linear-gradient(135deg, #FFFFFF 0, #FFFFFF 4px, var(--grid-hatch-line) 4px, var(--grid-hatch-line) 5px);
  color: #000000 !important;
}

/* 選択中のマス（Excelのアクティブセル風）：緑の2px枠（9.2）。
   選択中の行・列の見出しを塗る処理は行わない（9.2）。 */
.seg-btn.selected { outline: 2px solid var(--grid-selected); outline-offset: -2px; }

/* 今日の目印（9.2・v2.14確定）：v2.13の、見出しの塗り・左右の線は廃止。見出しの見た目は
   ほかの日と同じ（背景・太さ・枠とも）にし、日付の文字の左に小さな丸（.today-dot）だけを付ける。 */
.today-dot {
  display: inline-block;
  width: var(--grid-today-dot-diameter);
  height: var(--grid-today-dot-diameter);
  border-radius: 50%;
  background: var(--grid-today-dot);
  margin-right: var(--grid-today-dot-gap);
  vertical-align: middle;
  flex-shrink: 0;
}

/* 9.4【v2.8】：日付の見出しは、祝日も含めて必ず1行（曜日の後ろに「・祝」を足すだけで、
   改行はしない）。文字は本体より少し小さく（--grid-date-header-font）、字間を少し詰めて、
   最小幅（1か月88px・1週間/2週間110px）でも折り返さずに収める。 */
.datehead {
  font-size: var(--grid-date-header-font);
  white-space: nowrap;
  letter-spacing: -0.6px;
  padding: 0 2px !important;
}
/* 9.2【v2.14確定】：丸と祝日の「・祝」が重なった時（例：「10/12(月・祝)」）だけ、1か月表示の
   最小幅（約86〜88px）でもあふれないよう、字間と、丸と文字の間隔（既定--grid-today-dot-gapの
   4px）を詰める（.today-holiday-tightは、今日かつ祝日の見出しにだけビュー側で付ける）。
   今日だけ・祝日だけの時は、通常の字間・既定の4pxのまま。 */
.today-holiday-tight { letter-spacing: calc(-1.6px * var(--grid-scale)); padding: 0 1px !important; }
.today-holiday-tight .today-dot { margin-right: calc(1.5px * var(--grid-scale)); }

/* 日付見出し行・車番見出し列の固定（sticky）：横向き・縦向き共通（9.4／6.4） */
table.dboard thead th { position: sticky; top: 0; z-index: 3; }
table.dboard td.rowhead.sticky-col,
table.dboard th.sticky-col { position: sticky; left: 0; z-index: 2; }
table.dboard thead th.sticky-col { z-index: 4; }

table.dboard-vertical td.datehead {
  background: var(--grid-header-bg); font-weight: 700; white-space: nowrap; padding: 0 var(--grid-cell-pad);
}

/* 凡例（9.5）：同じ大きさの四角、名称との間隔を揃える */
/* 9.5：凡例は1項目1行の縦並び。色見本はすべて同じ大きさの四角で、名称との間隔を揃える。 */
.grid-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.grid-legend .swatch { display: inline-block; width: 28px; height: 14px; box-sizing: border-box; border: 1px solid var(--grid-border); vertical-align: middle; margin-right: 8px; flex-shrink: 0; }
.grid-legend .legend-item { display: flex; align-items: center; }

/* 6.4【v2.13確定】：グループの絞り込みで0台になった時の表示。ツールバーの高さ・位置は変えず、
   配車表の位置（.dboard-scrollの中）に、落ち着いた灰色の文字で、中央寄りに置く。 */
.zero-result-message { padding: 48px 16px; text-align: center; color: #595959; }
.zero-result-text { font-size: 13px; margin-bottom: 8px; }
.zero-result-links { font-size: 12px; }
.zero-result-link { color: #0070C0; }