/* ==========================================================================
   秋刀魚漁場速預報系統 - Leaflet 版樣式
   農業部水產試驗所 漁海況研究小組
   ========================================================================== */
:root {
  --navy: #0d2a4a; --navy-2: #14395f; --ocean: #1b6ca8; --ocean-lt: #2e8bc0;
  --accent: #f4a259; --accent-2: #e07a1f; --bg: #f0f4f8; --panel: #ffffff;
  --line: #d9e2ec; --text: #22303f; --text-lt: #5b6b7c; --good: #1a8a3a;
  --shadow: 0 2px 10px rgba(13, 42, 74, .10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans TC', system-ui, sans-serif; background: var(--bg);
  color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
/* HEADER */
.site-header { background: linear-gradient(120deg, var(--navy), var(--ocean)); color: #fff; box-shadow: var(--shadow); z-index: 1200; flex: 0 0 auto; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
.header-brand { display: flex; align-items: center; gap: 14px; }
.logo-img { height: 46px; width: auto; border-radius: 6px; background: #fff; padding: 3px; }
.brand-text { display: flex; flex-direction: column; }
.brand-org { font-size: 12px; opacity: .85; letter-spacing: .5px; }
.brand-title { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.header-meta { display: flex; align-items: center; gap: 14px; }
.meta-time { font-size: 13px; opacity: .9; font-variant-numeric: tabular-nums; }
.btn-update { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: .18s; }
.btn-update:hover { background: rgba(255,255,255,.28); }
.btn-update:disabled { opacity: .6; cursor: progress; }
/* LAYOUT */
.layout { flex: 1 1 auto; display: flex; min-height: 0; }
.sidebar { width: 320px; flex: 0 0 320px; background: var(--bg); padding: 14px; overflow-y: auto; border-right: 1px solid var(--line); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.panel-title { font-size: 14px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.panel-title .icon { font-size: 15px; }
/* forecast */
.panel-hero { background: linear-gradient(135deg, var(--navy), var(--ocean)); border: none; }
.btn-forecast { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 10px; padding: 14px; cursor: pointer; font-size: 16px; font-weight: 700; box-shadow: 0 3px 12px rgba(224,122,31,.4); transition: .18s; }
.btn-forecast:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(224,122,31,.5); }
.btn-forecast:active { transform: translateY(0); }
.fc-icon { font-size: 20px; }
.fc-hint { color: rgba(255,255,255,.85); font-size: 11.5px; text-align: center; margin-top: 8px; }
/* forms */
.form-select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: #fff; color: var(--text); cursor: pointer; }
.form-select-sm { padding: 5px 8px; font-size: 13px; }
.layer-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; cursor: pointer; border-radius: 7px; transition: background .15s; }
.layer-row:hover { background: #f2f7fb; }
.layer-chk { width: 17px; height: 17px; accent-color: var(--ocean); cursor: pointer; }
.layer-name { font-size: 14px; }
.sub-opt { margin: 0 0 8px 26px; padding: 8px 10px; background: #f5f9fc; border-radius: 8px; display: none; }
.sub-opt.show { display: block; }
.mini-label { font-size: 12px; color: var(--text-lt); display: block; margin-bottom: 5px; }
.sub-opt input[type=range], .opacity-row input[type=range] { width: 100%; accent-color: var(--ocean); }
.opacity-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* hotspots */
.hotspot-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.hotspot-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #f5f9fc; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: .15s; }
.hotspot-item:hover { background: #e8f2fa; border-color: var(--ocean-lt); }
.hs-rank { flex: 0 0 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; background: var(--accent-2); }
.hs-body { flex: 1; min-width: 0; }
.hs-coord { font-size: 13px; font-weight: 600; color: var(--navy); }
.hs-meta { font-size: 11.5px; color: var(--text-lt); }
.btn-report { width: 100%; background: var(--navy-2); color: #fff; border: none; border-radius: 9px; padding: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: .15s; }
.btn-report:hover { background: var(--ocean); }
/* load latest */
.btn-latest { width: 100%; margin-top: 8px; background: var(--navy-2); color: #fff; border: none; border-radius: 9px; padding: 9px; font-size: 13px; font-weight: 500; cursor: pointer; transition: .15s; }
.btn-latest:hover { background: var(--ocean); }
.btn-latest:disabled { opacity: .6; cursor: progress; }
/* ecdf */
.panel-ecdf .ecdf-loading { color: var(--text-lt); font-size: 13px; }
.ecdf-grid { display: flex; flex-direction: column; gap: 8px; }
.ecdf-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.ecdf-row:last-child { border-bottom: none; }
.ecdf-k { color: var(--text-lt); }
.ecdf-v { font-weight: 600; color: var(--navy); }
.ecdf-more { margin-top: 2px; }
.ecdf-more summary, .panel-sources > summary { cursor: pointer; color: var(--ocean); font-size: 12.5px; font-weight: 700; }
.ecdf-more .ecdf-row { padding-left: 8px; }
.method-note { margin-top: 8px; padding: 8px; border-radius: 7px; background: #fff7ed; color: #7c4a12; font-size: 11.5px; line-height: 1.55; }
.ecdf-chart-tools { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--text-lt); }
.ecdf-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 9px 0 4px; color: var(--text-lt); font-size: 10.5px; }
.ecdf-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ecdf-line { display: inline-block; width: 20px; height: 0; border-top: 2px solid #64748b; }
.ecdf-line.ordinary { border-top-style: dashed; }
.ecdf-line.weighted { border-top-color: #e07a1f; border-top-style: solid; }
.ecdf-chart { display: block; width: 100%; height: 190px; background: #fbfdff; border: 1px solid var(--line); border-radius: 8px; }
.ecdf-chart-note { min-height: 31px; margin-top: 5px; color: var(--text-lt); font-size: 10.5px; line-height: 1.45; }
.freshness-grid { display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.fresh-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fresh-badge { padding: 3px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; text-align: right; }
.fresh-badge.fresh { color: #166534; background: #dcfce7; }
.fresh-badge.stale { color: #9a3412; background: #ffedd5; }
.panel-sources p { margin: 7px 0; font-size: 12px; line-height: 1.5; }
.panel-sources a { color: var(--ocean); }
.panel-sources[open] > summary { margin-bottom: 8px; }
/* map */
.main-content { flex: 1 1 auto; display: flex; flex-direction: column; position: relative; min-width: 0; }
.status-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; z-index: 600; }
.status-idle { color: var(--text-lt); }
.status-busy { color: var(--accent-2); font-weight: 600; }
.status-ok { color: var(--good); font-weight: 600; }
.live-value { font-size: 13px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
#map { flex: 1 1 auto; width: 100%; background: #a9cce3; }
.legend-box { position: absolute; right: 14px; bottom: 34px; z-index: 700; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); max-width: 220px; font-size: 12px; display: none; }
.legend-box.show { display: block; }
.legend-title { font-weight: 700; color: var(--navy); margin-bottom: 6px; font-size: 12.5px; }
.legend-bar { height: 12px; border-radius: 3px; margin: 4px 0; }
.legend-scale { display: flex; justify-content: space-between; color: var(--text-lt); font-size: 11px; }
.legend-item { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend-sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.legend-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--accent-2); font-weight: 700; }
.legend-block { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.legend-block:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.hotspot-marker { background: var(--accent-2); color: #fff; border: 2px solid #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.overlay-mask { position: absolute; inset: 0; z-index: 1000; background: rgba(13,42,74,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 16px; }
.overlay-mask.hidden { display: none; }
.overlay-mask p { font-size: 15px; font-weight: 500; }
.spinner-ring { width: 46px; height: 46px; border: 4px solid rgba(255,255,255,.3); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.site-footer { flex: 0 0 auto; background: var(--navy); color: rgba(255,255,255,.82); font-size: 11.5px; padding: 6px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-sep { opacity: .4; }
.leaflet-popup-content { font-family: 'Noto Sans TC', sans-serif; font-size: 13px; }
.hs-popup-title { font-weight: 700; color: var(--navy); margin-bottom: 4px; }

@media (max-width: 800px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .header-inner { align-items: flex-start; gap: 10px; padding: 10px 12px; }
  .header-brand { gap: 9px; min-width: 0; }
  .logo-img { height: 40px; }
  .brand-title { font-size: 17px; line-height: 1.35; }
  .brand-org { font-size: 10.5px; }
  .header-meta { flex-direction: column; align-items: flex-end; gap: 5px; }
  .meta-time { font-size: 11px; white-space: nowrap; }
  .layout { flex: none; display: block; }
  .sidebar { width: 100%; padding: 10px; overflow: visible; border-right: 0; }
  .main-content { height: 72vh; min-height: 520px; }
  .status-bar { padding: 7px 10px; flex-wrap: wrap; gap: 4px; }
  .site-footer { padding: 8px 12px; }
}

.iso-row { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:8px; cursor:pointer; }
.iso-row input { width:16px; height:16px; accent-color: var(--ocean); }
.iso-label { background: rgba(255,255,255,.85); border:1px solid #555; border-radius:3px; padding:0 3px; font-size:11px; font-weight:700; color:#222; white-space:nowrap; line-height:1.3; }

/* ═══════════════════════════════════════════════════════════
   v6.0 — 當日速報 + 三日預報
   ═══════════════════════════════════════════════════════════ */

/* 預報時距切換 */
.lead-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #e8eef4;
  padding: 4px;
  border-radius: 9px;
}
.lead-btn {
  border: 0;
  background: transparent;
  color: #3f556b;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 2px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.lead-btn:hover { background: #d7e2ec; }
.lead-btn.active {
  background: #14395f;
  color: #fff;
  box-shadow: 0 1px 3px rgba(20, 57, 95, .3);
}
.lead-btn[data-lead="0"].active { background: #0d6b3f; }

/* 預報橫幅 */
.forecast-banner {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: linear-gradient(90deg, #fff4e0, #fffaf2);
  border-left: 4px solid #e07a1f;
  color: #6b4212;
  font-size: 12.5px;
  padding: 8px 14px;
  line-height: 1.5;
}
.forecast-banner.show { display: flex; }
.forecast-banner strong { color: #b35a05; }
.forecast-banner em { font-style: normal; font-weight: 700; color: #a8410a; }
.fb-sep { opacity: .45; padding: 0 2px; }

/* 資料時效：預報徽章 */
.fresh-badge.forecast { background: #fdeccd; color: #8a5310; }

/* 序列表格 */
.seq-table, .verify-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.seq-table th, .verify-table th {
  background: #14395f;
  color: #fff;
  font-weight: 500;
  padding: 5px 4px;
  text-align: center;
}
.seq-table td, .verify-table td {
  border-bottom: 1px solid #e3eaf1;
  padding: 5px 3px;
  text-align: center;
  color: #33475c;
  white-space: nowrap;
}
.seq-table th { white-space: nowrap; font-size: 11.5px; padding: 5px 3px; }
.seq-table td:last-child { white-space: normal; line-height: 1.35; }
.seq-table tr.seq-base td { background: #eef7f1; font-weight: 600; }
.seq-note {
  font-size: 11.5px;
  color: #1b6ca8;
  background: #eef5fb;
  border-radius: 6px;
  padding: 6px 9px;
  margin-bottom: 6px;
}

/* 預報技巧 */
.verify-box { font-size: 12px; }
.skill-pos { color: #0d6b3f; font-weight: 700; }
.skill-neg { color: #c0392b; font-weight: 700; }
.verify-note {
  font-size: 11px;
  color: #5b6b7c;
  line-height: 1.55;
  margin-bottom: 6px;
}
.verify-bench {
  font-size: 11.5px;
  color: #22303f;
  background: #f1f6fa;
  border-radius: 6px;
  padding: 7px 9px;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* 資料涵蓋範圍 */
.domain-note {
  font-size: 11.5px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.domain-note .dn-row { color: #3f556b; padding: 2px 0; }
.domain-note .dn-row b { color: #14395f; }
.domain-note .dn-row.warn {
  margin-top: 5px;
  color: #8a5310;
  background: #fff6e6;
  border-left: 3px solid #e07a1f;
  border-radius: 0 5px 5px 0;
  padding: 6px 9px;
}

@media (max-width: 640px) {
  .lead-btn { font-size: 11px; padding: 7px 1px; }
  .forecast-banner { font-size: 11.5px; padding: 7px 12px; }
}
.lead-pending { font-size: 12px; color: #5b6b7c; padding: 6px 4px; display: block; text-align: center; }