/**
 * app.css
 * 版本: v1.2.0
 * 變更紀錄:
 * - v1.1.0 -> v1.2.0: 新增 id="school-list" 學校列表面板、卡片式按鈕 (school-item-btn)、選中狀態與捲動容器樣式。
 * - v1.0.0 -> v1.1.0: 增加學校初步脆弱度五級圖例、圓形標籤 swatch-circle、圖層核取方塊、脆弱度等級徽章與彈窗互動按鈕樣式。
 */
:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
  background: #e2e8f0;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input, select { font: inherit; }
.app-shell { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; height: 100dvh; }
.sidebar { position: relative; z-index: 700; display: flex; flex-direction: column; gap: 14px; padding: 20px; overflow-y: auto; background: rgba(248,250,252,.97); border-right: 1px solid #cbd5e1; box-shadow: 8px 0 28px rgba(15,23,42,.10); }
.brand { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.brand-nav { margin-bottom: 6px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #2563eb; text-decoration: none; padding: 3px 8px; border-radius: 6px; background: rgba(37,99,235,.08); transition: background .15s ease, color .15s ease; }
.back-link:hover { background: rgba(37,99,235,.16); color: #1d4ed8; }
.eyebrow { margin:0 0 5px; font-size:11px; letter-spacing:.14em; color:#64748b; font-weight:700; }
h1 { margin:0; font-size:22px; line-height:1.2; }
.badge { border-radius:999px; padding:5px 9px; background:#0f172a; color:#fff; font-size:11px; font-weight:800; }
.panel { border:1px solid #dbe3ed; border-radius:16px; background:#fff; padding:15px; box-shadow:0 4px 14px rgba(15,23,42,.04); }
.controls { display:grid; gap:13px; }
label { display:grid; gap:6px; font-size:13px; color:#475569; font-weight:650; }
input, select { width:100%; min-height:42px; border:1px solid #cbd5e1; border-radius:10px; padding:8px 10px; background:#fff; color:#0f172a; outline:none; transition:.15s ease; }
input:focus, select:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12); }

.vuln-control-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #2563eb;
}
.checkbox-label span {
  font-size: 13px;
  color: #1e293b;
  font-weight: 700;
}

.button-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
button { border:0; border-radius:10px; min-height:40px; padding:8px 12px; cursor:pointer; background:#0f172a; color:#fff; font-weight:700; }
button.secondary { background:#e2e8f0; color:#334155; }
button:hover { filter:brightness(1.08); }
.status-panel { display:grid; gap:9px; }
.metric { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:#64748b; }
.metric strong { color:#0f172a; font-variant-numeric: tabular-nums; }
.progress { height:6px; overflow:hidden; border-radius:99px; background:#e2e8f0; }
.progress span { display:block; height:100%; width:0%; background:linear-gradient(90deg,#2563eb,#7c3aed); transition:width .2s ease; }

.legend h2 { margin:0 0 10px; font-size:14px; }
.legend-subheading { margin: 16px 0 10px !important; font-size: 14px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.legend > div { display:flex; align-items:center; gap:9px; margin:7px 0; font-size:13px; }
.legend p { margin:10px 0 0; font-size:12px; line-height:1.55; color:#64748b; }
.legend-hint { color: #2563eb !important; font-weight: 600; }

.swatch { width:21px; height:13px; border-radius:3px; border:2px solid rgba(15,23,42,.5); }
.swatch.elementary { background:#f59e0b; }
.swatch.junior { background:#2563eb; }
.swatch.both { background:#7c3aed; }
.swatch.partial { background:rgba(245,158,11,.25); border-style:dashed; }

.vuln-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 8px 0;
}
.vuln-legend-grid > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #334155;
}
.swatch-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,.2);
  display: inline-block;
  flex-shrink: 0;
}

footer { margin-top:auto; display:grid; gap:4px; color:#94a3b8; font-size:10px; line-height:1.4; }
.map-wrap { position:relative; min-width:0; }
#map { position:absolute; inset:0; background:#dbeafe; }
.loading-overlay { position:absolute; inset:0; z-index:600; display:grid; place-items:center; pointer-events:none; background:rgba(241,245,249,.45); backdrop-filter:blur(2px); transition:opacity .25s ease; }
.loading-overlay.hidden { opacity:0; visibility:hidden; }
.loader-card { display:grid; justify-items:center; gap:9px; min-width:230px; padding:20px 26px; border:1px solid rgba(203,213,225,.8); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 18px 45px rgba(15,23,42,.16); }
.loader-card span { font-size:12px; color:#64748b; }
.spinner { width:28px; height:28px; border:3px solid #dbeafe; border-top-color:#2563eb; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.mobile-toggle { display:none; position:absolute; top:12px; left:12px; z-index:800; min-height:38px; }

/* Popup 樣式增強 */
.leaflet-popup-content { margin:14px 16px; min-width:260px; max-width:380px; }
.popup-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.popup-title strong { font-size:16px; }
.popup-title span { color:#64748b; font-size:12px; }

.badge-vuln {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.school-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 12px;
}
.school-card-details div { display: flex; justify-content: space-between; }
.school-card-details span { color: #64748b; }
.school-card-details strong { color: #0f172a; }

.popup-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.btn-highlight-district {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-highlight-district:hover {
  background: #1d4ed8;
}
.btn-go-platform {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  padding: 4px;
}
.btn-go-platform:hover {
  color: #0f172a;
  text-decoration: underline;
}

.popup-section { border-top:1px solid #e2e8f0; padding-top:8px; margin-top:8px; }
.popup-section h3 { margin:0 0 5px; font-size:12px; color:#475569; text-transform:uppercase; letter-spacing:.04em; }
.school-row { padding:6px 0; }
.school-row + .school-row { border-top:1px dashed #e2e8f0; }
.school-row b { display:block; font-size:13px; }
.school-row small { display:block; margin-top:3px; color:#64748b; line-height:1.45; }
.school-row .school-link {
  color: #0f172a;
  text-decoration: none;
  cursor: pointer;
}
.school-row .school-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.pill { display:inline-block; margin-top:4px; border-radius:999px; padding:2px 6px; font-size:10px; font-weight:700; background:#f1f5f9; color:#475569; }
.pill.partial { background:#fff7ed; color:#c2410c; }
.pill.free { background:#ecfdf5; color:#047857; }
.error-banner { position:absolute; z-index:750; top:12px; left:50%; transform:translateX(-50%); max-width:min(760px,calc(100% - 24px)); padding:10px 14px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; box-shadow:0 8px 24px rgba(15,23,42,.12); font-size:12px; }

/* 學校列表面板 (school-list) 樣式 */
.school-list-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 250px;
}
.school-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.school-list-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.school-list-count {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 7px;
  border-radius: 999px;
}
.school-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  padding-right: 4px;
}
.school-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
  font-size: 12px;
}
.school-item-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.school-item-btn.is-selected {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
}
.school-item-btn.is-selected .school-item-town {
  color: rgba(255,255,255,.85);
}
.school-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.school-item-name {
  font-weight: 700;
  font-size: 12px;
}
.school-item-town {
  font-size: 11px;
  color: #64748b;
}
.school-item-badge {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .app-shell { display:block; }
  .sidebar { position:absolute; inset:0 auto 0 0; width:min(88vw,360px); transform:translateX(-103%); transition:transform .22s ease; }
  .sidebar.open { transform:translateX(0); }
  .map-wrap { height:100dvh; }
  .mobile-toggle { display:block; }
}



/* badge-vuln-white-fix-v1 */
.popup-title .badge-vuln {
  color: #fff !important;
}