/* 現場で作業中（「着いた」を押したあと） */
.ph-working { background: #e7effb; border: 2px solid #1f5fbf; color: #1f5fbf; font-weight: 700; border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
:root {
  --bg: #f4f5f7; --panel: #fff; --ink: #1d2433; --muted: #6b7385; --line: #e2e5eb;
  --primary: #1f5fbf; --primary-ink: #fff;
  --ok: #2e9d5b; --todo: #e8890c; --late: #d63b3b; --left: #8e44ad; --phone: #1f5fbf;
  --soft-ok: #e6f5ec; --soft-todo: #fff1de; --soft-late: #fde7e7; --soft-left: #f3e8fa; --soft-phone: #e5eefb;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; display: flex; flex-direction: column; }
button { font: inherit; cursor: pointer; }
select, input, textarea { font: inherit; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: #14213d; color: #fff; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.badge-demo { background: #f2c94c; color: #14213d; font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-left: 4px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { background: transparent; color: #c9d3e8; border: 0; padding: 8px 10px; border-radius: 6px; }
.tabs button.active, .tabs button:hover { background: rgba(255,255,255,.14); color: #fff; }
.top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.today { font-size: 12px; color: #c9d3e8; }

.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 6px; }
.btn:hover { border-color: #b8c0cf; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: #c9d3e8; border-color: rgba(255,255,255,.25); }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn-big { width: 100%; padding: 14px; font-size: 16px; font-weight: 700; border-radius: 10px; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-warn { background: var(--todo); border-color: var(--todo); color: #fff; }

main { flex: 1; min-height: 0; position: relative; }
.view { display: none; height: 100%; }
.view.active { display: flex; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* 地図ダッシュボード */
.side { width: 340px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 12px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpi.wide { grid-column: 1 / -1; padding: 6px 10px; }
.kpi.wide .n { font-size: 16px; }
.kpi { border-radius: 8px; padding: 10px; border: 2px solid transparent; text-align: left; background: #f7f8fa; }
.kpi .n { font-size: 24px; font-weight: 700; line-height: 1.1; }
.kpi .l { font-size: 12px; color: var(--muted); }
.kpi.on { border-color: var(--ink); }
.kpi.ok { background: var(--soft-ok); } .kpi.ok .n { color: var(--ok); }
.kpi.todo { background: var(--soft-todo); } .kpi.todo .n { color: var(--todo); }
.kpi.late { background: var(--soft-late); } .kpi.late .n { color: var(--late); }
.kpi.left { background: var(--soft-left); } .kpi.left .n { color: var(--left); }
.kpi.kphone { background: var(--soft-phone); } .kpi.kphone .n { color: var(--phone); }
.filters { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13px; }
.filters select { margin-left: 6px; }
.side-h { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
.todo-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.todo-item:hover { background: #f7f8fa; }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; white-space: nowrap; }
.tag.phone { background: var(--soft-phone); color: var(--phone); }
.tag.left { background: var(--soft-left); color: var(--left); }
.tag.late { background: var(--soft-late); color: var(--late); }
.tag.todo { background: var(--soft-todo); color: #a85f00; }
.tag.ok { background: var(--soft-ok); color: var(--ok); }
.tag.urgent { background: #14213d; color: #fff; }
.tag.gray { background: #eef0f4; color: var(--muted); }
.notices:empty { display: none; }
.notice { background: #fff8e1; border: 1px solid #f2c94c; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }

.mapwrap { flex: 1; position: relative; min-width: 0; }
.map { position: absolute; inset: 0; }
.legend { position: absolute; left: 10px; bottom: 22px; z-index: 500; background: rgba(255,255,255,.95); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.legend div { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.truck-icon { background: #14213d; color: #fff; border-radius: 12px; padding: 2px 7px; font-size: 11px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.4); border: 2px solid #fff; }
.truck-icon.full { background: #a85f00; }
.unload-icon { background: #fff; color: #14213d; border: 2px solid #14213d; border-radius: 6px; padding: 2px 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; line-height: 1.5; min-width: 230px; }
.pop h4 { margin: 0 0 4px; font-size: 14px; }
.pop .row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.pop .kv { color: var(--muted); font-size: 12px; }
.pop .btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cand { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); }

/* 配車ボード */
.board-side { width: 460px; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.board-controls { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 6px 12px; }
.seg button.active { background: var(--ink); color: #fff; }
.board-note { padding: 8px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.drivers { overflow-y: auto; flex: 1; padding: 8px; }
.dcard { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.dcard.sel { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(31,95,191,.25); }
.dcard-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.dname { font-weight: 700; }
.bar { height: 8px; background: #eef0f4; border-radius: 4px; overflow: hidden; margin: 6px 0 2px; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.bar.over > i { background: var(--late); }
.dmeta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.warn { font-size: 12px; color: var(--late); margin-top: 3px; }
.stops { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; }
.stops li { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px dashed var(--line); }
.stops .no { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.stops .no.phone { background: var(--phone); }
.stops .done { color: var(--muted); text-decoration: line-through; }
.stops .x { margin-left: auto; border: 0; background: none; color: var(--muted); }
.navlinks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.board-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500; background: rgba(20,33,61,.92); color: #fff; padding: 6px 12px; border-radius: 16px; font-size: 13px; }
.num-icon { background: var(--ink); color: #fff; border: 2px solid #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* 案内図登録 */
.reg { display: flex; gap: 20px; padding: 20px; width: 100%; overflow-y: auto; }
.reg-left { flex: 1; min-width: 0; }
.reg-right { width: 460px; }
.reg h2, .page h2 { margin: 0 0 6px; font-size: 18px; }
.drop { border: 2px dashed #b8c0cf; border-radius: 10px; padding: 26px; text-align: center; background: #fff; margin: 12px 0; }
.samples { display: flex; gap: 10px; flex-wrap: wrap; }
.sample { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px; width: 150px; text-align: left; }
.sample img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; }
.sample div { font-size: 12px; margin-top: 4px; }
.preview img { max-width: 100%; max-height: 60vh; border-radius: 8px; margin-top: 12px; border: 1px solid var(--line); }
.regform { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.regform .field { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; margin: 6px 0; }
.regform .field label { font-size: 12px; color: var(--muted); }
.regform input, .regform select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.regform input.filled { background: #f0f7ff; border-color: #9cc0f0; }
.regform .chk { color: var(--late); font-size: 11px; grid-column: 2; }
.reading { display: flex; align-items: center; gap: 10px; padding: 30px; justify-content: center; color: var(--muted); }
.spinner { width: 20px; height: 20px; border: 3px solid #cfd6e3; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#regMap { height: 200px; border-radius: 8px; margin-top: 8px; }

/* 表のページ */
.page { padding: 20px; width: 100%; overflow-y: auto; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.summary { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.summary .pill { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.summary .pill b { font-size: 18px; }
.tablewrap { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tbl th { background: #f7f8fa; font-weight: 600; font-size: 12px; color: var(--muted); position: sticky; top: 0; }
.tbl tr.bad td { background: #fff3f3; }
.tbl tr.wait td { background: #fffaf0; }
.tbl td.num { text-align: right; }

/* ドライバー画面 */
.phone-wrap { display: flex; gap: 30px; padding: 20px; width: 100%; overflow-y: auto; justify-content: center; }
.phone-side { width: 300px; }
.phone-side select { display: block; margin-top: 6px; padding: 6px; width: 100%; }
.phone-frame { width: 390px; height: 760px; border: 10px solid #14213d; border-radius: 36px; background: #fff; overflow: hidden; flex: none; }
.phone-screen { height: 100%; overflow-y: auto; background: #f4f5f7; }
.ph-head { background: #14213d; color: #fff; padding: 14px 16px; }
.ph-head .t { font-size: 18px; font-weight: 700; }
.ph-head .s { font-size: 12px; color: #c9d3e8; }
.ph-body { padding: 12px; }
.ph-alert { background: #fff8e1; border: 1px solid #f2c94c; border-radius: 10px; padding: 10px; margin-bottom: 10px; font-size: 14px; }
.ph-stop { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); }
.ph-stop.done { opacity: .55; }
.ph-stop .nm { font-size: 16px; font-weight: 700; }
.ph-stop .ad { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.ph-row { display: flex; gap: 8px; }
.ph-row .btn { flex: 1; padding: 10px; border-radius: 8px; }
.ph-round { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 2px 6px; }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 14px; }
.choice button { padding: 14px 0; border: 2px solid var(--line); background: #fff; border-radius: 10px; font-size: 16px; font-weight: 700; }
.choice button.on { border-color: var(--primary); background: var(--soft-phone); }

/* モーダル・トースト */
.modal { position: fixed; inset: 0; background: rgba(10,15,30,.5); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-card { background: #fff; border-radius: 12px; padding: 18px; width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; position: relative; }
.modal-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; color: var(--muted); }
.modal h3 { margin: 0 0 10px; }
.form-row { margin: 10px 0; }
.form-row > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.suggest { border: 1px solid var(--line); border-radius: 6px; max-height: 180px; overflow-y: auto; }
.suggest div { padding: 6px 8px; cursor: pointer; border-bottom: 1px solid var(--line); }
.suggest div:hover, .suggest div.on { background: var(--soft-phone); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #14213d; color: #fff; padding: 10px 18px; border-radius: 20px; z-index: 3000; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.toast[hidden] { display: none; }

@media print {
  .topbar, .page-actions, #uTable, #view-report .page-head:nth-of-type(2) { display: none !important; }
  .view { display: none !important; }
  #view-report { display: block !important; }
  .tablewrap { border: 0; }
}
@media (max-width: 900px) {
  .view.active { flex-direction: column; }
  .side, .board-side { width: 100%; max-height: 45%; }
  .reg { flex-direction: column; } .reg-right { width: 100%; }
}

/* 配車を組む */
.plan-side { width: 520px; }
.steps { display: flex; border-bottom: 1px solid var(--line); }
.steps div { flex: 1; text-align: center; padding: 8px 4px; font-size: 12px; color: var(--muted); border-bottom: 3px solid transparent; }
.steps div.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--primary); }
.steps div.done { color: var(--ok); }
.plan-body { flex: 1; overflow-y: auto; padding: 10px 12px; }
.plan-foot { display: flex; gap: 8px; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--line); background: #fafbfc; }
.plan-h { font-size: 15px; font-weight: 700; margin: 4px 0 2px; }
.plan-lead { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.6; }
.grp { margin: 12px 0 4px; font-size: 13px; font-weight: 700; }
.prow { display: flex; gap: 8px; align-items: flex-start; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.prow .main { flex: 1; min-width: 0; }
.prow .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.prow select { max-width: 170px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { font-size: 12px; border-radius: 12px; padding: 2px 8px; color: #fff; }
.pcard { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.pcard .hd { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.drv-pin { color: #fff; border: 2px solid #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.drv-pin.must { border-radius: 4px; }
.drv-pin.pick { opacity: .85; width: 16px; height: 16px; font-size: 9px; }

/* 日報（紙のかわり） */
.nippo { border: 1px solid #333; padding: 12px; font-size: 13px; background: #fff; }
.nippo h4 { margin: 0 0 6px; text-align: center; font-size: 16px; letter-spacing: .3em; }
.nippo .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; font-size: 12px; }
.nippo table { width: 100%; border-collapse: collapse; }
.nippo th, .nippo td { border: 1px solid #999; padding: 4px 6px; text-align: left; vertical-align: top; }
.nippo th { background: #f2f2f2; font-size: 12px; }
.nippo tr.unl td { background: #f7f7f7; color: var(--muted); }
.nippo .tot { margin-top: 8px; font-size: 12px; }
.qty { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.qty .v { width: 56px; text-align: center; font-size: 18px; font-weight: 700; }
.qty button { width: 44px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 20px; }
.thumb { width: 72px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid #c8ccd4; cursor: zoom-in; vertical-align: middle; margin-top: 4px; }
.thumb.big { width: 100%; height: auto; max-height: 200px; cursor: default; }
.vol-label { background: rgba(255,255,255,.92); border: 1px solid #c8ccd4; border-radius: 4px; padding: 0 4px; font-size: 11px; font-weight: 700; color: #1d2433; box-shadow: none; }
.vol-label::before { display: none; }
.vol-label.low { color: #9aa0ab; font-weight: 400; }
.leaflet-container:not(.show-labels) .vol-label { display: none; }
.tag.again { background: #e0f4f5; color: #0b7f89; }
.kpi.again { background: #e0f4f5; } .kpi.again .n { color: #0b7f89; }

/* 地図のマーク（色＋形） */
.mk { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); box-sizing: border-box; }
.mk.ok { width: 14px; height: 14px; border-radius: 50%; background: #2e9d5b; font-size: 9px; opacity: .85; }
.mk.todo { border-radius: 50%; background: #f08c00; }
.mk.late { background: #d63b3b; border-radius: 3px; transform: rotate(45deg); }
.mk.late span { transform: rotate(-45deg); }
.mk.left { background: #8e44ad; border-radius: 4px; font-size: 10px; }
.mk.again { background: #0e9aa7; border-radius: 50%; font-size: 13px; }
.mk-phone { width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: #1f5fbf; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; font-weight: 700; }
.mk-phone > * { transform: rotate(45deg); }
.mk-phone.sm { width: 18px; height: 18px; font-size: 9px; }
.mk-under { position: absolute; left: 3px; top: 24px; transform: scale(.8); }
.legend .lg { width: 24px; display: inline-flex; justify-content: center; }
.legend .mk { transform-origin: center; }
.legend .mk.late { transform: rotate(45deg) scale(.85); }
.kpi .n .mk { width: 16px; height: 16px; font-size: 9px; }
/* 回収品目 */
.items { background: #f7f8fa; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; margin: 6px 0; line-height: 1.6; }
.items .ng { color: #b42b2b; }
.items .memo { color: #555; }
.items.compact { padding: 4px 6px; font-size: 11px; }
.mk.before { border-radius: 50%; background: #fff; border: 2px dashed #9aa0ab; color: #6b7385; font-size: 9px; width: 18px; height: 18px; }
/* 写真と地図を見比べて位置を合わせる */
.pmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 340px; }
.pmp-photo { border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; overflow: hidden; }
.pmp-map { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pmp-search { display: flex; gap: 4px; padding: 4px; background: #f7f8fa; }
.pmp-search input { flex: 1; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
.pmp-leaflet { flex: 1; }
.reg-right { width: 560px; }
.pmp-cands { max-height: 120px; overflow-y: auto; font-size: 12px; }
.pmp-cands div { padding: 4px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pmp-cands div:hover { background: var(--soft-phone); }
/* 配車を組む：カーソルを合わせたルートだけ目立たせる */
#planMap.dimmed .leaflet-marker-pane > *:not(.hl), #planMap.dimmed .leaflet-overlay-pane path:not(.hl) { opacity: .18; }
/* AI に話しかける（見本） */
.ai-top { background: #fff; color: #14213d; border: 1px solid #fff; font-weight: 700; }
.ai-panel { position: fixed; right: 18px; top: 64px; z-index: 1500; width: 400px; max-height: 70vh; background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; }
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #14213d; color: #fff; }
.ai-head .modal-x { color: #fff; }
.ai-note { font-size: 11px; color: var(--muted); padding: 6px 12px; background: #fff8e1; }
.ai-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.ai-msg { padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.5; max-width: 90%; }
.ai-msg.me { align-self: flex-end; background: var(--soft-phone); }
.ai-msg.ai { align-self: flex-start; background: #f2f3f5; }
.ai-ex { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 6px; }
.ai-ex button { font-size: 11px; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 3px 8px; }
.ai-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.ai-input input { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }

/* 紙の運行日報と同じ並び */
.nippo td.n, .nippo th.n { text-align: center; width: 34px; }
.nippo td.betsu { font-size: 11px; }
.nippo tr.unl td { border-bottom: 2px solid #d63b3b; }
.pn-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0; }
.tbl.pn td, .tbl.pn th { padding: 4px; }
.tbl.pn input { padding: 3px 4px; }

/* 地図の現場の詳細（カーソルを合わせたとき） */
.leaflet-tooltip.site-tip-wrap { padding: 0; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); white-space: normal; }
.site-tip { width: 290px; padding: 9px 11px; font-size: 12px; line-height: 1.45; color: #111; }
.site-tip b { font-size: 13px; }
.site-tip .st-head { font-size: 11px; font-weight: 700; color: #1f5fbf; margin-bottom: 2px; }
.site-tip .st-head span { color: #888; font-weight: 400; }
.site-tip .st-mute { color: #666; font-size: 11px; }
.site-tip table { border-collapse: collapse; margin-top: 5px; width: 100%; }
.site-tip th { text-align: left; color: #666; font-weight: 400; padding: 1px 8px 1px 0; white-space: nowrap; vertical-align: top; width: 1%; }
.site-tip td { padding: 1px 0; }

/* ルートの順番の入れ替えと合流 */
.ord-row .no { flex: 0 0 auto; }
.ord-btns { display: inline-flex; flex-direction: column; gap: 1px; }
.ord-btns button { border: 1px solid var(--line); background: #fff; border-radius: 3px; font-size: 9px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.ord-btns button:disabled { opacity: .25; cursor: default; }
.tag.join { background: #e6f0ff; color: #1f5fbf; margin-left: 4px; }

/* 現場の詳細：地図の端の枠（ルートに重ねない） */
.map-info { position: absolute; top: 10px; opacity: .96; z-index: 1000; background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); pointer-events: none; max-height: calc(100% - 140px); overflow: hidden; }
.map-info.left { left: 52px; } .map-info.right { right: 10px; }
.map-info[hidden] { display: none; }
.leaflet-interactive.tip-ring, path.tip-ring { stroke-dasharray: 4 3; }

.map-info .site-tip { width: 250px; font-size: 11.5px; }

/* 荷下ろし先の選択と工場ごとの台数 */
.unl-sel { font-size: 12px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; }
.unl-count { background: #f3f6fb; border: 1px solid #d6e0ef; border-radius: 8px; padding: 6px 10px; margin: 6px 0 10px; font-size: 13px; }

/* 原本に名前を入れる位置 */
.mfw { position: relative; }
.mf-name { position: absolute; font-size: 15px; font-weight: 700; color: #c00; white-space: nowrap; pointer-events: none; }

/* タブ：よく使うものだけ。ほかは「その他」 */
.tabs .more { display: none; }
.tabs.show-more .more { display: inline-flex; }
.tabs .tab-more { opacity: .85; }
.tabs.show-more .tab-more { opacity: 1; }
/* マニフェスト印刷：照合は参考として閉じておく */
.ref-box { margin-top: 18px; border: 1px dashed #b8c0cf; border-radius: 8px; padding: 8px 12px; background: #fafbfc; }
.ref-box summary { cursor: pointer; color: var(--muted); font-size: 13px; }
/* 出勤と車の確認 */
.duty-box { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff6e8; border: 2px solid #e8890c; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.duty-box.ok { background: #eef8f1; border-color: #2e9d5b; }
.dcard.off { opacity: .55; padding: 8px 12px; }

/* トラック：最後の報告の時刻 */
.truck-icon .t-time { margin-left: 4px; background: #fff; color: #14213d; border-radius: 6px; padding: 0 4px; font-size: 10px; font-weight: 700; }

/* 付箋（ルートの現場ごとのメモ） */
.fusen { background: #fff59d; border-left: 5px solid #f2c200; color: #3b3200; padding: 4px 8px; margin: 4px 0; font-size: 12.5px; border-radius: 3px; box-shadow: 1px 2px 3px rgba(0,0,0,.12); transform: rotate(-.4deg); flex-basis: 100%; }
.stops li { flex-wrap: wrap; }

/* ルートへのメッセージ（ルートを開いたとき一番上） */
.route-msg { background: #fff3e0; border: 3px solid #e8890c; border-radius: 10px; padding: 8px 10px; margin: 6px 0 10px; animation: rm-blink 1.6s ease-in-out 3; }
.route-msg.read { background: #f6f7f9; border: 1px solid #ccd; animation: none; }
.route-msg .rm-h { font-weight: 700; color: #a85f00; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.route-msg.read .rm-h { color: #555; }
.route-msg .rm-body { font-size: 14px; line-height: 1.6; margin-top: 4px; }
.rm-read { font-size: 11px; color: #2e9d5b; font-weight: 400; } .rm-unread { font-size: 11px; color: #d63b3b; }
@keyframes rm-blink { 50% { box-shadow: 0 0 0 6px rgba(232,137,12,.25); } }
.msg-edit { margin: 6px 0; } .msg-edit label { font-size: 12px; font-weight: 700; color: #a85f00; }
.msg-edit textarea { width: 100%; box-sizing: border-box; border: 2px solid #e8890c; border-radius: 6px; padding: 6px; font-size: 13px; font-family: inherit; }

/* ② ルートを作る・足す：ルートの札と現場の札 */
.rt-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
.rt-tab { position: relative; flex: 0 0 auto; min-width: 74px; border: 2px solid var(--c, #ccc); border-radius: 10px; padding: 4px 8px 8px; background: #fff; cursor: pointer; text-align: center; font-size: 11px; line-height: 1.3; }
.rt-tab b { display: block; font-size: 18px; color: var(--c); }
.rt-tab span { color: var(--muted); white-space: nowrap; }
.rt-tab i { position: absolute; left: 6px; bottom: 3px; height: 3px; background: var(--c); border-radius: 2px; max-width: calc(100% - 12px); }
.rt-tab.on { background: var(--c); } .rt-tab.on b, .rt-tab.on span { color: #fff; }
.rt-tab.rt-new { border-style: dashed; border-color: #1f5fbf; color: #1f5fbf; font-weight: 700; font-size: 12px; display: flex; align-items: center; }
.rt-drop { position: absolute; inset: 0; border-radius: 8px; }
.rt-drop .fuda { display: none; }
.rt-tabs.dragging .rt-tab:not(.on):not(.rt-new) { outline: 3px dashed var(--c); outline-offset: 1px; background: #fffbe6; }
.rt-card { border: 3px solid; border-radius: 12px; padding: 10px; background: #fff; }
.rt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rt-list { list-style: none; margin: 8px 0 4px; padding: 0; }
.fuda { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 5px 0; background: #fff; cursor: grab; user-select: none; }
.fuda:hover { border-color: #1f5fbf; background: #f7faff; }
.fuda .fd-main { flex: 1; min-width: 0; font-size: 13px; } .fuda .fd-sub { font-size: 11px; color: var(--muted); }
.fuda .fd-vol { font-size: 12px; font-weight: 700; white-space: nowrap; } .fuda .fd-grip { color: #aab; font-size: 18px; line-height: 1; }
.fuda-ghost { opacity: .35; } .fuda-chosen { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.rt-hint { font-size: 11px; color: var(--muted); background: #f6f8fb; border-radius: 6px; padding: 4px 8px; }
.rt-empty { text-align: center; color: var(--muted); padding: 22px 8px; border: 2px dashed var(--line); border-radius: 8px; margin: 8px 0; }
.rt-more { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; } .rt-more summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.rt-more textarea { width: 100%; box-sizing: border-box; border: 2px solid #e8890c; border-radius: 6px; padding: 6px; font-size: 13px; font-family: inherit; margin-top: 4px; }
.rt-tabs { position: sticky; top: 0; z-index: 5; background: #fff; box-shadow: 0 4px 6px -4px rgba(0,0,0,.15); }

/* 事務員さんに渡すもの */
.ho-box { border: 2px solid #1f5fbf; background: #f3f7fd; border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; display: grid; gap: 8px; }
.ho-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 16px; }
.ho-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ho-items > div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; }
.ho-items span { font-size: 12px; color: var(--muted); }
.ho-btns { display: flex; gap: 8px; flex-wrap: wrap; } .ho-btns .btn-big { flex: 1 1 260px; }

.ho-flow { background: #fff; border: 1px dashed #b8c6dd; border-radius: 6px; padding: 4px 8px; color: #1f5fbf; font-weight: 700; }
/* 地図の見方：ふだんは小さいボタン、押すと開く（地図の上の情報にかぶらないように） */
.legend { background: transparent; box-shadow: none; padding: 0; }
.lg-box > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.95); border-radius: 16px; padding: 4px 10px; font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.25); color: #1d2433; }
.lg-box > summary::-webkit-details-marker { display: none; }
.lg-box > summary::after { content: '▴'; font-size: 10px; color: #6b7385; }
.lg-box[open] > summary::after { content: '▾'; }
.lg-box .lg-in { margin-bottom: 6px; background: rgba(255,255,255,.96); border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px 4px rgba(0,0,0,.2); max-width: 300px; }
.lg-box { display: flex; flex-direction: column-reverse; align-items: flex-start; }
/* 開いたときは、前と同じ「1行に1つ」の並びにする */
.legend .lg-box .lg-in { display: block; width: max-content; max-width: min(320px, 80vw); }
.legend .lg-box .lg-in > div { display: flex; align-items: center; gap: 6px; margin: 2px 0; white-space: normal; }

/* 今週の見通し */
.week-box { border: 2px solid #2e9d5b; background: #eef8f1; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; display: grid; gap: 4px; font-size: 13px; }
.week-box.tight { border-color: #e8890c; background: #fff6e8; } .week-box.short { border-color: #d63b3b; background: #fdecec; }
.week-box .wb-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.week-box .wb-n b { font-size: 16px; }
.week-box .wb-days { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.ideas { display: grid; gap: 8px; margin-top: 10px; }
.idea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; display: grid; gap: 2px; }
.idea-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.idea-h .no { width: 22px; height: 22px; border-radius: 50%; background: #1f5fbf; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.msg-tpl { background: #f6f8fb; border: 1px dashed #b8c6dd; border-radius: 6px; padding: 8px 10px; margin-top: 4px; font-size: 13px; user-select: all; }
/* 電話の早見 */
.phq { position: relative; }
.phq input { width: 220px; padding: 7px 10px; border-radius: 8px; border: 2px solid #1f5fbf; font-size: 13px; }
.phq-s { position: absolute; top: 100%; left: 0; right: 0; z-index: 3000; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.18); max-height: 300px; overflow: auto; color: #1d2433; }
.phq-s > div { padding: 7px 10px; cursor: pointer; font-size: 13px; } .phq-s > div:hover { background: #eef3fb; }
.reply-box { background: #e7effb; border: 2px solid #1f5fbf; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.reply-box .reply { font-size: 18px; font-weight: 700; color: #14213d; line-height: 1.5; }
table.look { width: 100%; border-collapse: collapse; font-size: 14px; } table.look th { text-align: left; width: 100px; color: var(--muted); font-weight: 400; padding: 6px 8px 6px 0; vertical-align: top; } table.look td { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* 週の予定 */
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.wk-col { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-col.past { background: #f6f7f9; } .wk-col.wk-today { border: 2px solid #1f5fbf; } .wk-col.next { border: 2px dashed #d63b3b; background: #fff8f7; }
.wk-h { font-weight: 700; font-size: 16px; display: flex; gap: 6px; align-items: baseline; } .wk-h span { font-size: 12px; color: var(--muted); font-weight: 400; } .wk-h em { font-style: normal; font-size: 11px; background: #1f5fbf; color: #fff; border-radius: 4px; padding: 0 5px; }
.wk-sec { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px; } .wk-n { font-size: 20px; font-weight: 700; }
.wk-it { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 12px; cursor: pointer; display: grid; } .wk-it:hover { background: #eef3fb; }
.wk-it span { color: var(--muted); font-size: 11px; } .wk-it.req { border-left: 4px solid #1f5fbf; } .wk-it.promise { border-left: 4px solid #2e9d5b; } .wk-it.ok { border-left: 4px solid #2e9d5b; opacity: .7; } .wk-it.late { border-left: 4px solid #d63b3b; background: #fdecec; } .wk-it.carry { border-left: 4px solid #d63b3b; }

/* ドライバーの画面：ゲーム */
.game { display: grid; gap: 8px; margin-bottom: 10px; }
.g-boss { background: linear-gradient(135deg, #3b1d5e, #14213d); color: #fff; border-radius: 12px; padding: 10px 12px; }
.g-boss-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 13px; } .g-boss-h b { font-size: 15px; } .g-boss-h span b { font-size: 20px; color: #ffd166; }
.g-hp { height: 14px; background: rgba(255,255,255,.18); border-radius: 7px; overflow: hidden; margin: 6px 0 4px; border: 1px solid rgba(255,255,255,.35); }
.g-hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b6b, #ffb347); transition: width .6s; }
.g-sub { font-size: 12px; } .g-sub b { color: #7cf29c; font-size: 14px; } .g-warn { color: #ffb3b3; }
.g-me { background: #fffbea; border: 2px solid #f2c200; border-radius: 12px; padding: 8px 10px; }
.g-me-h { display: flex; align-items: baseline; gap: 8px; } .g-pt { font-size: 26px; font-weight: 800; color: #b07d00; margin-left: auto; } .g-pt small { font-size: 12px; } .g-wk { font-size: 11px; color: #8a6d00; }
.g-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.gp-chip { font-size: 11px; border: 1px solid #e6d27a; border-radius: 12px; padding: 2px 8px; color: #8a7a3a; background: #fff; } .gp-chip.on { background: #f2c200; color: #3b2f00; border-color: #f2c200; } .gp-chip b { color: #b00020; }
.g-rule { font-size: 10px; color: #8a7a3a; }
/* 今週の見通し：状態の内訳（ルートに入れただけでは回収済みにしない） */
.wb-kinds{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px}
.wb-kinds span{font-size:12px;padding:2px 7px;border-radius:10px;background:#f1f3f6;white-space:nowrap}
.wb-kinds .k-none{background:#fff1dc;color:#8a5200}
.wb-kinds .k-routed{background:#e5eefb;color:#1f4f9f}
.wb-kinds .k-left{background:#f1e6f8;color:#6d2f8e}
.wb-kinds .k-clear{background:#e3f4ea;color:#1f6e3f}
/* 現場にいる人（押すだけ） */
.wk-chips{display:flex;flex-wrap:wrap;gap:6px}
.wk-chips button{flex:0 0 auto;font-size:14px;padding:6px 10px}
/* 月の予定 */
.wk-mode{margin-bottom:10px}
.mo-head{display:flex;align-items:center;gap:12px;margin:4px 0 8px;font-size:16px}
.mo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mo-w{text-align:center;font-size:12px;color:#667;padding:2px 0}
.mo-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:88px;padding:4px 6px;border:1px solid #d9dee6;border-radius:6px;background:#fff;text-align:left;font:inherit;cursor:pointer;min-width:0}
.mo-cell.empty{border:none;background:transparent;cursor:default}
.mo-cell.past{background:#f5f6f8}
.mo-cell.wkend{background:#f8f6f1}
.mo-cell.today{border:2px solid #1f5fbf;background:#e5eefb}
.mo-cell:hover:not(.empty){border-color:#1f5fbf}
.mo-d{font-weight:700;font-size:14px}.mo-d small{font-weight:400;color:#889;margin-left:3px;font-size:11px}
.mo-l{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mo-l.off{color:#a85f00}.mo-l.phone{color:#1f5fbf}.mo-l.start{color:#2e9d5b}
@media (max-width:700px){.mo-cell{min-height:64px}.mo-l{font-size:10px}}