:root {
  --green: #2e7d32;
  --green-fill: #43a047;
  --yellow: #f9d71c;
  --yellow-stroke: #c9a800;
  --normal-stroke: #ffffff;
  --bg: #1b1b1b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
body { display: flex; flex-direction: column; background: var(--bg); }

#topbar {
  flex: 0 0 auto;
  background: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  z-index: 1000;
}
.topbar-row { display: flex; align-items: center; gap: 10px; }
#today { flex: 0 0 auto; line-height: 1.1; }
#today-date { display: block; font-size: 13px; color: #555; }
#today-weekday { font-size: 22px; font-weight: 700; color: #222; }
#today-weekday.sun { color: #d32f2f; }
#today-weekday.sat { color: #1565c0; }

.search-wrap { position: relative; flex: 1 1 auto; }
#search {
  width: 100%; padding: 10px 12px; font-size: 16px;
  border: 1px solid #ccc; border-radius: 10px; outline: none;
}
#search:focus { border-color: var(--green); }
#search-results {
  position: absolute; left: 0; right: 0; top: 46px;
  background: #fff; border: 1px solid #ddd; border-radius: 10px;
  max-height: 50vh; overflow-y: auto; z-index: 1200; display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
#search-results.show { display: block; }
.result-item { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; font-size: 15px; cursor: pointer; }
.result-item:last-child { border-bottom: none; }
.result-item:active { background: #eef7ee; }
.result-item .ra { display: block; font-size: 12px; color: #888; }

.legend { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: #444; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 16px; height: 16px; border-radius: 4px; display: inline-block; border: 2px solid #999; }
.sw.open { background: var(--green-fill); border-color: var(--green); }
.sw.today { background: var(--yellow); border-color: var(--yellow-stroke); }
.sw.normal { background: rgba(255,255,255,.15); border-color: #bbb; }
.open-count { margin-left: auto; font-weight: 700; color: var(--green); }

#map { flex: 1 1 auto; width: 100%; }

/* ポップアップ */
.fld-popup { min-width: 220px; }
.fld-popup h3 { margin: 0 0 6px; font-size: 16px; }
.fld-popup .meta { font-size: 13px; color: #444; line-height: 1.5; margin-bottom: 10px; }
.fld-popup .meta b { color: #222; }
.fld-popup .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.today { background: var(--yellow); color: #6b5800; }
.badge.notday { background: #eee; color: #777; }
.toggle-btn {
  display: block; width: 100%; padding: 16px; font-size: 18px; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer; color: #fff;
}
.toggle-btn.to-open { background: var(--green); }
.toggle-btn.to-close { background: #b71c1c; }
.toggle-hint { margin-top: 8px; font-size: 12px; color: #888; text-align: center; }

#offline-badge {
  position: fixed; bottom: calc(env(safe-area-inset-bottom,0px) + 10px); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; z-index: 1500;
}

.leaflet-popup-content { margin: 14px; }
.leaflet-container { font: inherit; }

/* ===== 設定ボタン・同期・まとめ入力 ===== */
.icon-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid #ccc; background: #fff;
  border-radius: 10px; font-size: 20px; cursor: pointer; line-height: 1;
}
.icon-btn:active { background: #eee; }

.sync-status { margin-left: auto; font-size: 12px; color: #888; }
.sync-status.ok { color: #2e7d32; }
.sync-status.pending { color: #e67e22; }
.sync-status.err { color: #c0392b; }

.action-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bulk-enter {
  flex: 0 0 auto; padding: 8px 14px; font-size: 14px; font-weight: 700;
  border: none; border-radius: 10px; background: #1565c0; color: #fff; cursor: pointer;
}
.bulk-enter:active { opacity: .85; }
.action-row .open-count { margin-left: auto; }

body.bulk #map { outline: 3px solid #1565c0; outline-offset: -3px; }

#bulk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
  background: #102a43; color: #fff; padding: 10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  box-shadow: 0 -4px 14px rgba(0,0,0,.3);
}
.bulk-info { text-align: center; font-size: 14px; margin-bottom: 8px; }
.bulk-info b { font-size: 18px; color: #ffd54f; }
.bulk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb {
  padding: 13px 10px; font-size: 15px; font-weight: 700; border: none;
  border-radius: 10px; cursor: pointer; color: #fff;
}
.bb:active { opacity: .85; }
.bb.open { background: #2e7d32; }
.bb.close { background: #b71c1c; }
.bb.ghost { background: #2c4a66; color: #cfe2f3; }
.bb.cancel { background: #41597a; grid-column: 1 / -1; }
#bulk-selecttoday { grid-column: 1 / -1; background: #f9a825; color: #4a3500; }

/* まとめ入力時の選択ハイライト（Leaflet polygon に付与） */
.sel-outline { }

/* ===== モーダル ===== */
.modal {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* hidden属性を確実に効かせる（.modalのdisplay:flexより優先） */
.modal[hidden] { display: none; }
.modal-box { background: #fff; border-radius: 14px; padding: 20px; max-width: 360px; width: 100%; }
.modal-box h3 { margin: 0 0 8px; }
.modal-box p { font-size: 13px; color: #555; line-height: 1.5; margin: 0 0 12px; }
.modal-box input { width: 100%; padding: 12px; font-size: 17px; border: 1px solid #ccc; border-radius: 10px; margin-bottom: 14px; }
.modal-btns { display: flex; gap: 8px; }
.modal-btns .bb { flex: 1; }
.modal-btns .bb.open { color: #fff; }
.modal-btns .bb.ghost { background: #eee; color: #555; }

/* ポップアップ内の「誰が・いつ」 */
.fld-popup .who { font-size: 12px; color: #2e7d32; margin-top: 2px; }