:root {
  --sidebar-w: 340px;
  --ink: #1f2933;
  --muted: #6b7280;
  --line: #e3e8ee;
  --accent: #1565C0;
  --bg: #f7f9fb;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  color: var(--ink);
}
#app { display: flex; height: 100vh; }

/* ---- Sidebar ---- */
#sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 18px 16px;
}
.brand h1 { font-size: 1.05rem; margin: 0 0 2px; line-height: 1.4; }
.brand .subtitle { margin: 0; font-size: .82rem; color: var(--accent); font-weight: 600; }
.brand .note { margin: 8px 0 0; font-size: .72rem; color: #b45309; background:#fff7ed; border:1px solid #fed7aa; padding:6px 8px; border-radius:6px; }

.panel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.panel h2 { font-size: .9rem; margin: 0 0 4px; }
.panel .hint { font-size: .72rem; color: var(--muted); margin: 0 0 10px; }

.cat-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .83rem; cursor: pointer; }
.cat-item input { accent-color: var(--accent); }
.swatch { width: 22px; height: 0; border-bottom-width: 3px; border-bottom-style: solid; display: inline-block; }
.swatch.point { height: 12px; width: 12px; border-radius: 50%; border-bottom: none; }

.bulk { display: flex; gap: 8px; margin-top: 10px; }
.bulk button {
  flex: 1; font-size: .75rem; padding: 6px 4px; border: 1px solid var(--line);
  background: #fff; border-radius: 6px; cursor: pointer; color: var(--ink);
}
.bulk button:hover { background: #eef2f7; }

.toggle { display: flex; align-items: center; gap: 8px; font-size: .83rem; padding: 5px 0; cursor: pointer; }
.toggle input { accent-color: var(--accent); }

/* 条件フィルタ（select / date） */
.field { display: block; margin: 9px 0; font-size: .8rem; }
.field span { display: block; color: var(--muted); margin-bottom: 3px; }
.field select, .field input[type=date] {
  width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; font-size: .85rem; color: var(--ink);
}
#clear-filters {
  width: 100%; margin-top: 10px; padding: 7px; font-size: .78rem; cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: 6px; color: var(--ink);
}
#clear-filters:hover { background: #eef2f7; }

.popup-route { margin: 0 0 8px; padding-left: 16px; font-size: .76rem; color: var(--ink); }
.popup-route li { margin: 1px 0; }
.popup-cap { font-size: .78rem; background: #f1f5f9; border-radius: 6px; padding: 5px 8px; margin: 0 0 8px; }
.popup-cap .sur { color: #b45309; font-weight: 600; }

/* 強調パネル（輸送力ビュー / シミュレーション） */
.panel.highlight { background: #eef5ff; border: 1px solid #cfe0fb; border-radius: 8px; padding: 14px 12px; margin-top: 16px; }
.panel.sim { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 14px 12px; }
.panel h3 { font-size: .8rem; margin: 14px 0 6px; }

button.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
#sim-apply { width: 100%; margin-top: 8px; padding: 8px; font-size: .82rem; cursor: pointer;
  background: var(--accent); color: #fff; border: none; border-radius: 6px; }
#sim-apply:hover { background: #0d4ea0; }
#sim-clear { width: 100%; margin-top: 8px; }

/* エリア別サマリ表 */
table.area { width: 100%; border-collapse: collapse; font-size: .75rem; }
table.area th, table.area td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
table.area th { background: #e3edfb; }
table.area td.num { text-align: right; }
.tag { display: inline-block; font-size: .68rem; padding: 1px 6px; border-radius: 10px; color: #fff; }
.tag.sur { background: #b45309; } .tag.short { background: #c62828; }
.tag.bal { background: #94a3b8; } .tag.in { background: #2e7d32; }

/* 再配置リスト */
.sim-row { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: .74rem; padding: 4px 6px; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin: 5px 0; }
.sim-row .rm { border: none; background: #f3f4f6; border-radius: 4px; cursor: pointer; padding: 0 7px; color: #c62828; }
.realloc-label { background: #d23; color: #fff; font-size: .66rem; font-weight: 700; text-align: center;
  border-radius: 9px; line-height: 18px; padding: 0 4px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* 3列レイアウト（台数・開始・終了） */
.row3 { display: flex; gap: 6px; }
.row3 .field { flex: 1; margin: 9px 0; }
.row3 input, .row3 select { width: 100%; }
.sumbox { font-size: .76rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; margin-top: 9px; }
.sumbox b { font-size: .95rem; }
.sumbox .imp { color: #2e7d32; font-weight: 700; margin-left: 6px; }

#legend .leg { display: flex; align-items: center; gap: 8px; font-size: .78rem; padding: 3px 0; }
.meta p { font-size: .85rem; color: var(--muted); }
.meta strong { color: var(--ink); font-size: 1.05rem; }

/* ---- Map ---- */
#map-wrap { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
#map { flex: 1 1 auto; min-height: 0; }

/* ---- 折れ線グラフ パネル ---- */
#chart-panel { flex: 0 0 232px; border-top: 1px solid var(--line); background: #fff; padding: 8px 14px 10px; overflow: auto; }
#chart-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .82rem; }
#chart-head select { font-size: .82rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; }
#chart-legend .lg { font-size: .72rem; color: var(--muted); margin-right: 12px; }
#chart-legend .lg i { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
#chart-legend .lg i.b-up { background: #1565C0; } #chart-legend .lg i.b-short { background: #fde8e8; border: 1px solid #f0b4b4; }
#chart { overflow-x: auto; margin: 6px 0; }
table.ttab { border-collapse: collapse; font-size: .72rem; }
table.ttab th, table.ttab td { border: 1px solid var(--line); padding: 3px 7px; text-align: center; min-width: 30px; }
table.ttab thead th { background: #e3edfb; font-weight: 600; }
table.ttab th.rh { background: #f1f5f9; text-align: left; white-space: nowrap; position: sticky; left: 0; z-index: 1; }
table.ttab td.short { background: #fde8e8; color: #c62828; font-weight: 700; }
table.ttab td.ok { color: #94a3b8; }
table.ttab td.up { color: #1565C0; font-weight: 700; }
table.ttab td.na { color: #d7dee6; }
table.ttab.matrix th.rh { min-width: 92px; background: #f8fafc; }
#shortage-note { font-size: .72rem; color: var(--ink); }
.snote span { color: var(--muted); }
.snote ul { margin: 2px 0 0; padding-left: 18px; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.snote li { white-space: nowrap; }
#basemap-switch {
  position: absolute; top: 12px; right: 12px; z-index: 1000;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: .78rem; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
#basemap-switch label { display: block; padding: 2px 0; cursor: pointer; }

/* ---- Popup ---- */
.popup-title { font-size: .92rem; font-weight: 700; margin: 0 0 2px; }
.popup-sub { font-size: .74rem; color: var(--muted); margin: 0 0 8px; }
.popup-badge { display:inline-block; font-size:.68rem; color:#fff; padding:1px 7px; border-radius: 10px; margin-bottom:8px;}
table.attrs { border-collapse: collapse; width: 100%; font-size: .76rem; }
table.attrs th, table.attrs td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
table.attrs th { background: #f1f5f9; white-space: nowrap; width: 38%; font-weight: 600; }
.leaflet-popup-content { margin: 12px 14px; max-width: 320px; }

@media (max-width: 720px) {
  #app { flex-direction: column; }
  #sidebar { width: 100%; flex-basis: auto; height: 42vh; border-right: none; border-bottom: 1px solid var(--line); }
  #map-wrap { flex: 1 1 auto; }
}