/* ============================================================================
 * style.css ― 画面の見た目（色・配置・大きさ）をまとめたファイル
 *   通常は触らなくてOKです。色などを変えたい場合だけ編集してください。
 * ========================================================================== */

/* ---- ページ全体の基本設定 ---- */
* { box-sizing: border-box; }            /* 幅の計算をわかりやすくする */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #1a1a1a;
}
/* 画面全体を「上：ヘッダー／下：地図」の縦並びにする */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;                       /* 全体スクロールを止める */
}

/* ---- 画面上部のヘッダー（タイトル＋絞り込みボタン） ---- */
#header {
  flex: 0 0 auto;                         /* 高さは中身ぶんだけ */
  position: relative;
  z-index: 1000;                          /* 地図より前面に出す */
  background: #0d3b66;                     /* 濃紺 */
  color: #fff;
  padding: 8px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#header h1 {
  font-size: 16px;
  margin: 0;
  white-space: nowrap;
}
#header .sub {
  font-size: 12px;
  opacity: .8;
  margin-right: auto;                      /* ボタン群を右に押しやる */
}

/* ---- 絞り込みボタン群 ---- */
#filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-btn {
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.filter-btn:hover { background: rgba(255,255,255,.25); }
/* 押されている（ON）状態：左の小さな丸を色で塗る */
.filter-btn .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.filter-btn.off { opacity: .4; text-decoration: line-through; } /* OFFは薄く */

/* 各状態の色（旗・凡例・ボタンの丸で共通利用） */
.dot.good  { background: #2e7dd1; } /* 良好=青 */
.dot.warn  { background: #f2c12e; } /* 要注意=黄 */
.dot.bad   { background: #e23b3b; } /* 不良=赤 */
.dot.ours  { background: #ffd700; border: 1px solid #b58900; } /* 自社=金★ */

/* ---- 地図本体 ---- */
#map {
  flex: 1 1 auto;                         /* 残りの高さをすべて使う */
  position: relative;                     /* パネルの位置基準になる */
}

/* ============================================================================
 * 旗（マーカー）の見た目
 *   Leaflet の DivIcon（HTMLで作るアイコン）を使って、色付きのピンを描きます。
 * ========================================================================== */
/* ピンのサイズはここで調整できます（密集地で見やすいよう小さめの丸ドット）。
   大きくしたいときは PIN_SIZE の値（px）を変えるだけ。js側の iconSize も合わせています。 */
:root { --pin-size: 12px; }   /* ← 以前は26px。約1/3の小さな丸ピンに変更 */

.pin {
  position: relative;
  width: var(--pin-size);
  height: var(--pin-size);
}
/* 丸ドット。状態色は JS で good/warn/bad クラスを付けて切替 */
.pin .head {
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 50%;                      /* まんまるの点 */
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
  position: absolute;
  left: 0; top: 0;
  box-sizing: border-box;
}
.pin.good .head { background: #2e7dd1; }
.pin.warn .head { background: #f2c12e; }
.pin.bad  .head { background: #e23b3b; }

/* 小さくなったので★は使わず、金色の二重リングで「自社管理」を強調 */
.pin .star { display: none; }

/* 契約種別 KM/K/M の色（マーカー横ラベル・フィルタ・バッジ共通） */
.ct-KM { background: #1a7f3c !important; } /* 建設＆メンテ：緑 */
.ct-K  { background: #4a6da7 !important; } /* 建設：青 */
.ct-M  { background: #e08a1e !important; } /* メンテ：橙 */

/* 点とラベルを横並びにする入れ物 */
.pinrow { display: flex; align-items: center; white-space: nowrap; }
.pinrow .pin { flex: 0 0 auto; }
/* マーカーの右に並べる契約種別ラベル（KM/K/M） */
.ctype {
  display: inline-block; margin-left: 3px;
  font-size: 10px; font-weight: bold; color: #fff;
  padding: 0 4px; border-radius: 3px; line-height: 15px;
  white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* フィルタボタン内の種別チップ */
.ct-chip {
  display: inline-block; color: #fff; font-size: 11px; font-weight: bold;
  padding: 1px 5px; border-radius: 4px; margin-right: 5px; vertical-align: middle;
}
/* フィルタの区切り（状況｜種別） */
.filter-sep { display: inline-block; width: 1px; height: 20px; background: rgba(255,255,255,.4); margin: 0 4px; vertical-align: middle; }
/* パネルの種別バッジ */
.badge.ct-badge { color: #fff; }
/* 第2階層のセクション見出し */
.detail-section {
  font-size: 13px; font-weight: bold; color: #8a5a00;
  border-bottom: 1px solid #e0a040; margin: 16px 0 6px; padding-bottom: 3px;
}
.pin.ours .head {
  border-color: #ffd700;
  border-width: 2px;
  box-shadow: 0 0 0 1.5px rgba(255,215,0,.85), 0 1px 2px rgba(0,0,0,.45);
}

/* ============================================================================
 * 情報パネル（旗クリックで右からスライドして出る）
 * ========================================================================== */
#panel {
  position: absolute;
  top: 0; right: 0;
  width: 380px;
  max-width: 92vw;
  height: 100%;
  background: #fff;
  box-shadow: -3px 0 12px rgba(0,0,0,.25);
  z-index: 1500;
  transform: translateX(105%);            /* 初期は画面外に隠す */
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}
#panel.open { transform: translateX(0); } /* open クラスで出現 */

/* パネル上部のバー（タイトル＋閉じる） */
#panel-head {
  background: #0d3b66;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#panel-head h2 { font-size: 16px; margin: 0; flex: 1; }
#panel-close {
  background: none; border: none; color: #fff;
  font-size: 22px; cursor: pointer; line-height: 1;
}

/* パネルの中身（スクロール領域） */
#panel-body {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}

/* 種別・状態などの小さなラベル（バッジ） */
.badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-right: 6px;
  margin-bottom: 4px;
  color: #fff;
}
.badge.good  { background: #2e7dd1; }
.badge.warn  { background: #f2c12e; color:#5a4500; }
.badge.bad   { background: #e23b3b; }
.badge.type  { background: #4a4a4a; }
.badge.ours  { background: #ffd700; color:#5a4500; }
.badge.guest { background: #888; }

/* 写真スライド表示 */
.slider {
  position: relative;
  width: 100%;
  height: 220px;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0;
}
.slider img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.slider .nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  color: #fff; border: none;
  width: 34px; height: 44px;
  font-size: 20px; cursor: pointer;
}
.slider .nav.prev { left: 0; border-radius: 0 6px 6px 0; }
.slider .nav.next { right: 0; border-radius: 6px 0 0 6px; }
.slider .count {
  position: absolute; bottom: 6px; right: 8px;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: 12px; padding: 1px 8px; border-radius: 10px;
}

/* 項目の見出しと本文 */
.field { margin: 10px 0; }
.field .label {
  font-size: 12px; color: #666; font-weight: bold;
  display: block; margin-bottom: 2px;
}
.field .value { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* 第2階層（社員専用）の開閉ボックス */
#detail-toggle {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: #fff4e0;
  border: 2px dashed #e0a040;
  border-radius: 8px;
  font-size: 14px; font-weight: bold;
  color: #8a5a00;
  cursor: pointer;
  text-align: left;
}
#detail-toggle:hover { background: #ffeccb; }
#detail-box {
  display: none;                           /* 初期は閉じる */
  margin-top: 10px;
  padding: 12px;
  background: #fff8ee;
  border: 1px solid #e0a040;
  border-radius: 8px;
}
#detail-box.open { display: block; }
#detail-box .warn-note {
  font-size: 12px; color: #b00;
  background: #ffecec; padding: 6px 8px; border-radius: 6px;
  margin-bottom: 10px;
}

/* スマホ向け：画面が狭いとき */
@media (max-width: 600px) {
  #header h1 { font-size: 14px; }
  #header .sub { display: none; }
}

/* 写真スライドの説明文（撮影日時・担当・メモ） */
.slider .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  padding: 5px 8px;
  white-space: pre-wrap;
  line-height: 1.4;
}

/* 社員ページ上部のメニューリンク */
#staff-nav { display: flex; gap: 12px; }
#staff-nav a {
  color: #fff; font-size: 13px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.5);
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
#staff-nav a:hover { background: rgba(255,255,255,.2); }

/* ============================================================================
 * ログイン画面
 * ========================================================================== */
body.centered-page {
  display: flex; align-items: center; justify-content: center;
  background: #0d3b66; height: 100vh;
}
.login-box {
  background: #fff; padding: 28px 26px; border-radius: 12px;
  width: 320px; max-width: 90vw; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.login-box h1 { margin: 0 0 2px; font-size: 20px; color: #0d3b66; }
.login-box .sub { margin: 0 0 18px; color: #666; font-size: 13px; }
.login-box input[type=password] {
  width: 100%; padding: 11px; font-size: 16px;
  border: 1px solid #ccc; border-radius: 8px; margin-bottom: 12px;
}
.login-box button {
  width: 100%; padding: 11px; font-size: 16px; font-weight: bold;
  background: #0d3b66; color: #fff; border: none; border-radius: 8px; cursor: pointer;
}
.login-box button:hover { background: #11497f; }
.login-error {
  background: #ffe6e6; color: #b00; padding: 8px; border-radius: 6px;
  font-size: 13px; margin: 0 0 12px;
}
.login-note { font-size: 11px; color: #999; margin: 12px 0 0; }

/* ============================================================================
 * フォーム系ページ（写真アップ・要望一覧）の共通
 * ========================================================================== */
body.form-page { background: #f2f4f7; min-height: 100vh; display: block; overflow: visible; height: auto; }
#form-header {
  background: #0d3b66; color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
}
#form-header h1 { font-size: 17px; margin: 0; flex: 1; text-align: center; }
#form-header .back {
  color: #fff; font-size: 13px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.5); padding: 4px 9px; border-radius: 6px;
  white-space: nowrap;
}
.form-wrap {
  max-width: 560px; margin: 18px auto; padding: 0 14px 40px;
}
.form-wrap.wide { max-width: 720px; }

.f-label { display: block; font-weight: bold; font-size: 14px; margin: 16px 0 6px; }
#upload-form select,
#upload-form input[type=text],
#upload-form textarea {
  width: 100%; padding: 10px; font-size: 16px;
  border: 1px solid #ccc; border-radius: 8px;
}
#upload-form input[type=file] { width: 100%; font-size: 15px; padding: 8px 0; }
.hint { font-size: 12px; color: #777; margin: 6px 0 0; }

/* ============================================================================
 * Excel風の一覧編集画面
 * ========================================================================== */
.edit-wrap { padding: 10px 12px 40px; }
.edit-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.edit-toolbar.bottom { margin-top: 14px; }
.edit-toolbar button {
  font-size: 14px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid #0d3b66; background: #fff; color: #0d3b66; cursor: pointer;
}
.edit-toolbar button.primary { background: #1a7f3c; color: #fff; border-color: #1a7f3c; font-weight: bold; }
.edit-toolbar button:hover { opacity: .9; }
.edit-count { font-size: 14px; color: #555; }

.edit-table-wrap { overflow: auto; max-height: 70vh; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.edit-table { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.edit-table th, .edit-table td {
  border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
  padding: 2px 4px; background: #fff;
}
.edit-table thead th {
  position: sticky; top: 0; z-index: 3; background: #0d3b66; color: #fff;
  white-space: nowrap; padding: 6px 8px;
}
/* 操作（削除）列と発電所名 列は左に固定してスクロールでも見えるように */
.edit-table .op-col { position: sticky; left: 0; z-index: 2; width: 34px; min-width: 34px; text-align: center; }
.edit-table thead th.op-col { z-index: 5; }
.edit-table .sticky-col { position: sticky; left: 34px; z-index: 2; box-shadow: 1px 0 0 #ccc; }
.edit-table thead th.sticky-col { z-index: 5; }

.edit-table input, .edit-table select {
  border: 1px solid #ddd; border-radius: 3px; font-size: 12px;
  padding: 2px 3px; box-sizing: border-box; max-width: 240px;
}
.edit-table input:focus, .edit-table select:focus { outline: 2px solid #2e7dd1; border-color: #2e7dd1; }
.edit-table tbody tr:nth-child(even) td { background: #f7f9fb; }
.edit-table tbody tr:nth-child(even) .sticky-col { background: #f7f9fb; }
.del-row {
  background: #fff; border: 1px solid #e23b3b; color: #e23b3b;
  border-radius: 4px; cursor: pointer; width: 24px; height: 24px; line-height: 1; font-weight: bold;
}
.del-row:hover { background: #e23b3b; color: #fff; }

/* CSV取り込み画面 */
.import-help { background:#fff; border-radius:8px; padding:12px 16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.import-help ol { margin:6px 0; padding-left:20px; }
.import-help li { margin:4px 0; font-size:14px; line-height:1.6; }
.import-help code { background:#eef; padding:1px 5px; border-radius:4px; font-size:13px; }
.import-count { font-size:14px; margin:12px 0 6px; }
.table-scroll { overflow:auto; max-height:360px; border:1px solid #ddd; border-radius:6px; }
.preview-table { border-collapse:collapse; font-size:12px; white-space:nowrap; }
.preview-table th, .preview-table td { border:1px solid #e0e0e0; padding:3px 7px; text-align:left; }
.preview-table th { background:#0d3b66; color:#fff; position:sticky; top:0; }
.preview-table tbody tr:nth-child(even) { background:#f6f8fa; }

/* アップ用の送信ボタン */
#send-btn, #c-send, #import-btn {
  margin-top: 18px; width: 100%; padding: 13px;
  font-size: 16px; font-weight: bold; color: #fff;
  background: #1a7f3c; border: none; border-radius: 8px; cursor: pointer;
}
#send-btn:disabled, #import-btn:disabled { background: #9bbfa6; cursor: not-allowed; }
#send-btn:hover:enabled, #c-send:hover:enabled, #import-btn:hover:enabled { background: #1f964799; }

/* 写真プレビュー */
.preview-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.preview-grid .thumb {
  position: relative; width: 100px; height: 100px;
  border-radius: 6px; overflow: hidden; background: #ddd;
}
.preview-grid .thumb img { width: 100%; height: 100%; object-fit: cover; }
.preview-grid .thumb .sz {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
  text-align: center; padding: 2px 0;
}

#upload-msg, #c-msg { margin-top: 14px; font-size: 14px; min-height: 20px; }
.ok-msg { color: #1a7f3c; font-weight: bold; }
.ng-msg { color: #c00; font-weight: bold; }

/* 要望カード */
.req-card {
  background: #fff; border-radius: 10px; padding: 14px;
  margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.1);
  border-left: 5px solid #e23b3b;
}
.req-card.done { border-left-color: #1a7f3c; opacity: .75; }
.req-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.req-status { font-size: 12px; font-weight: bold; padding: 2px 10px; border-radius: 12px; color: #fff; }
.req-status.todo { background: #e23b3b; }
.req-status.done { background: #1a7f3c; }
.req-dt { font-size: 12px; color: #888; }
.req-plant { font-weight: bold; margin-bottom: 6px; }
.req-body { font-size: 14px; line-height: 1.6; }
.req-form { margin-top: 8px; }
.req-form button {
  font-size: 13px; padding: 6px 12px; border-radius: 6px;
  border: 1px solid #0d3b66; background: #fff; color: #0d3b66; cursor: pointer;
}
.req-form button:hover { background: #eef3f8; }
.empty { text-align: center; color: #888; margin-top: 40px; }

/* ============================================================================
 * お客様ページ
 * ========================================================================== */
/* お客様ページは普通に縦スクロールできるようにする（全画面固定を解除） */
body.customer-page {
  background: #f7f9fb;
  display: block;
  overflow: visible;
  height: auto;
}
.customer-page main { max-width: 600px; margin: 0 auto; padding: 0 14px 50px; }

/* 営業バナー */
#sales-banner {
  background: linear-gradient(135deg, #1a7f3c, #2bb866);
  color: #fff; padding: 22px 16px;
}
.sales-inner { max-width: 600px; margin: 0 auto; }
#sales-banner h2 { margin: 0 0 10px; font-size: 20px; }
#sales-banner p { margin: 0 0 6px; line-height: 1.7; font-size: 14px; }
.sales-contact { font-weight: bold; font-size: 15px !important; }

.customer-loading { text-align: center; padding: 60px 20px; color: #666; }

.customer-page h1 { font-size: 22px; margin: 20px 0 8px; }
.customer-page .slider { height: 260px; }
.c-info { margin-top: 8px; }
.c-h3 { margin: 26px 0 10px; font-size: 16px; border-left: 4px solid #1a7f3c; padding-left: 8px; }
#c-map { height: 380px; border-radius: 10px; overflow: hidden; }
/* スマホでは地図を低めにして、下の内容へスクロールしやすく */
@media (max-width: 600px) { #c-map { height: 300px; } }

/* 「○か所を管理中」の営業アピール文 */
.c-overview-note {
  background: #eafaf0; border-left: 4px solid #1a7f3c;
  padding: 8px 12px; border-radius: 6px; font-size: 14px;
  line-height: 1.6; margin: 4px 0 12px;
}

/* サービス一覧 */
.svc {
  background: #fff; border-radius: 8px; padding: 11px 13px; margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid #bbb;
}
.svc.free { border-left-color: #2bb866; }
.svc.paid { border-left-color: #f2a02e; }
.svc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.svc-name { font-weight: bold; }
.svc-price { font-size: 13px; color: #555; white-space: nowrap; }
.svc-desc { font-size: 13px; color: #666; margin-top: 3px; line-height: 1.5; }

/* 依頼フォーム */
.c-form { background: #fff; border-radius: 10px; padding: 16px; margin-top: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.f-note { font-size: 13px; color: #666; margin: 0 0 10px; }
#c-request-options { display: flex; flex-direction: column; gap: 4px; }
.opt { font-size: 14px; padding: 6px 4px; cursor: pointer; }
.opt input { margin-right: 8px; transform: scale(1.2); }
.c-form textarea, .c-form input[type=text] {
  width: 100%; padding: 10px; font-size: 16px;
  border: 1px solid #ccc; border-radius: 8px;
}
#c-footer { text-align: center; color: #888; font-size: 13px; margin-top: 34px; }

/* 複数施設対応：案内文・地図のヒント */
.c-intro { font-size: 14px; color: #555; margin: 4px 0 12px; line-height: 1.6; }
.c-map-hint { font-size: 12px; color: #888; margin: 8px 0 0; line-height: 1.5; }

/* 発電所ごとのカード */
.c-card {
  background: #fff; border-radius: 12px; padding: 16px;
  margin-top: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.1);
  scroll-margin-top: 12px;             /* ピンタップで上に余白を残してスクロール */
}
.c-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.c-card-head h2 { font-size: 18px; margin: 0 0 4px; }

/* Googleマップで開くリンク */
.gmap-link {
  display: inline-block; margin: 8px 0 0; font-size: 13px;
  color: #1a73e8; text-decoration: none;
}
.gmap-link:hover { text-decoration: underline; }

/* 相談フォームの選択肢 */
.c-opts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.c-result { margin-top: 12px; font-size: 14px; min-height: 18px; }

/* カード内のフォームは上に区切り線 */
.c-card .c-form {
  margin-top: 14px; box-shadow: none; border-top: 1px solid #eee;
  border-radius: 0; padding: 14px 0 0;
}

/* 詳細カードの「▲ 地図にもどる」 */
.back-to-map {
  display: inline-block; font-size: 13px; color: #1a7f3c;
  cursor: pointer; margin-bottom: 8px; font-weight: bold;
}
.back-to-map:hover { text-decoration: underline; }

/* 管理エリア全体マップ */
#c-overview-map { height: 320px; border-radius: 10px; overflow: hidden; }

/* あなたの施設＝光って大きいマーカー（点滅リング付き） */
.pin-own { position: relative; width: 30px; height: 30px; }
.pin-own .core {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(255,215,0,.95), 0 1px 3px rgba(0,0,0,.5);
}
.pin-own.good .core { background: #2e7dd1; }
.pin-own.warn .core { background: #f2c12e; }
.pin-own.bad  .core { background: #e23b3b; }
.pin-own .ring {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%;
  border: 3px solid #ffd700;
  animation: ownpulse 1.4s ease-out infinite;
}
@keyframes ownpulse {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}