/* === Brand Map Styles (Branded + Fancy Popup) === */
:root{
  --safety-blue: #005D9C;
  --alert-yellow: #FFB81C;
  --grey-20: #ECEBEA;
  --black-6: #101820;
  --industry-blue: #28334A;
  --white: #FFFFFF;

  --bg: var(--grey-20);
  --text: var(--black-6);
  --panel: var(--white);
  --stroke: #98B7D2;
  --province: #E6EEF7;
  --province-hover: #CFE2F3;
  --focus: var(--alert-yellow);
  --shadow: 0 8px 26px rgba(16,24,32,0.12), 0 2px 8px rgba(16,24,32,0.06);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(1100px 600px at 10% -10%, #f5f7fb 0%, var(--bg) 60%);
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.45;
}

/* Header */
.app-header-text{color: white;background-color: var(--safety-blue);padding:20px;border-radius:10px;}
.yellow-rounded-bullet{background-color: var(--alert-yellow);border-radius: 5px; display: inline-block;}
.appbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: clamp(10px, 1.2vw, 16px) clamp(12px, 2vw, 24px);
  background: linear-gradient(180deg, var(--safety-blue), #004a7c);
  color: var(--white);
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 20;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { width:36px; height:36px; border-radius: 10px;
  background: var(--alert-yellow);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
}
.brand-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; letter-spacing: .2px;
  font-size: clamp(18px, 2.2vw, 24px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Controls */
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.control {
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  padding: 8px 10px;
  display: inline-flex;
  align-items:center; gap:8px;
  box-shadow: var(--shadow);
}
.control-label { font-size: 13px; font-weight: 600; color: var(--industry-blue); }
select#FPparam, input#param-search {
  appearance: none;
  border: 1px solid rgba(16,24,32,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--white);
  min-width: min(48vw, 420px);
  max-width: 60vw;
  outline: none;
}
select#FPparam:focus, input#param-search:focus { box-shadow: 0 0 0 3px var(--focus); border-color: var(--focus); }

/* Layout */
.wrap { padding: clamp(10px, 1.6vw, 18px); }
.panel {
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
}
.map-wrap {
  position: relative;
  height: min(78vh, 900px);
  min-height: 420px;
}
#FPmap { width:100%; height:100%; position: relative; }
svg { display:block; width:100%; height:100%; }

/* Provinces */
.province {
  fill: var(--province);
  stroke: var(--stroke);
  stroke-width: .6;
  transition: fill .15s ease-in-out, stroke .15s ease-in-out, filter .2s ease;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.province:hover, .province:focus { fill: var(--province-hover); stroke: var(--safety-blue); outline: none; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.08)); }

/* Floating controls */
.fab { position: absolute; right: 12px; top: 12px; display:flex; flex-direction:column; gap:8px; z-index:5; }
.btn {
  background: var(--white);
  border: 1px solid rgba(16,24,32,0.1);
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
}
.btn:focus-visible { outline: 3px solid var(--focus); }
.btn:hover { border-color: var(--safety-blue); }

/* Fancy tooltip card */
.tooltip {
  position: absolute; pointer-events: none;
  transform-origin: 50% 100%;
  transform: translate(-50%, -120%) scale(.98);
  opacity: 0; transition: opacity .16s ease, transform .18s cubic-bezier(.2,.7,.2,1);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  padding: 12px 14px;
  font-size: 13px;
  border-radius: 14px;
  z-index: 8;
  box-shadow: var(--shadow);
  border: 1px solid rgba(16,24,32,0.08);
  max-width: 64ch;
  line-height: 1.35;
}
.tooltip.show { opacity: 1; transform: translate(-50%, -120%) scale(1); }
.tooltip::before {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: rgba(255,255,255,0.8);
  filter: drop-shadow(0 1px 1px rgba(16,24,32,0.08));
}
.tt-title {
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing:.2px;
  color: var(--industry-blue);
}
.tt-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11px; font-weight:700; letter-spacing:.2px;
  padding: 4px 8px; border-radius: 999px;
  background: linear-gradient(180deg, #fff3d1, #ffe8a1);
  color: #5b4700; border: 1px solid #ffe08c;
}
.tt-value {
  margin-top: 4px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 16px; color: var(--black-6);
}
.tt-muted { color: #6b7280; }
.tt-actions { margin-top:8px; display:flex; gap:8px; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor:pointer;
  background: var(--white); border: 1px solid rgba(16,24,32,0.12); box-shadow: 0 1px 2px rgba(16,24,32,0.06);
  user-select:none;
}
.chip:hover { border-color: var(--safety-blue); }
.chip:active { transform: translateY(1px); }

/* Helper */
.helper {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--grey-20), #f7f7f7);
  font-size: 13px; color: var(--industry-blue);
  border-top: 1px solid rgba(16,24,32,0.06);
}
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--alert-yellow); box-shadow: 0 0 0 2px #ffd56c80; }

/* Results (parameters only) */
.results{
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: min(360px, 92vw);
  max-height: 45vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 9;
}
.results.show{ display: block; }
.result-item{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16,24,32,0.06);
  cursor: pointer;
}
.result-item:last-child{ border-bottom: none; }
.result-item:hover{ background: #f8fafc; }
.result-title{ font-weight: 700; font-family: "Montserrat", sans-serif; color: var(--industry-blue); font-size: 13px; }
.mark{ background: #fff3bf; border-radius: 4px; padding: 0 2px; }

/* Responsive */
@media (max-width: 820px){
  .appbar { grid-template-columns: 1fr; }
  .controls { justify-content: flex-start; }
  select#FPparam, input#param-search { min-width: 100%; max-width: 100%; }
}


/* --- Search toggle & dropdown --- */
.search-control{ position: relative; }
.icon-btn{
  appearance: none;
  background: var(--panel);
  color: var(--industry-blue);
  border: 1px solid rgba(16,24,32,0.12);
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.icon-btn:hover{ border-color: var(--safety-blue); }
.icon-btn:focus-visible{ outline: 3px solid var(--focus); }
.search-box{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, 92vw);
  z-index: 15;
  display: none;
}
.search-control.open .search-box{ display: block; }

/* Search input in dropdown */
.search-box input#param-search{
  width: 100%;
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  box-shadow: var(--shadow);
}
.search-box input#param-search:focus{ box-shadow: 0 0 0 3px var(--focus), var(--shadow); border-color: var(--focus); }

/* Results attached to dropdown; fill width below input */
.search-box .results{
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
  margin-top: 8px;
  max-height: 45vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: none;
}
.search-box .results.show{ display: block; }


/* === Split Layout (Map | Info) === */
main.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  height: calc(100vh - 80px);
  padding: 16px;
  background: var(--bg);
}

#FPmap {
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

#FPinfo-panel {
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#FPinfo-panel .panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

#FPinfo-panel .panel-content {
  flex: 1;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.45;
}

/* Hide floating tooltip entirely since we now use selection + side panel */
.tooltip { display: none !important; }

/* Province selection state */
.province.selected {
  fill: var(--alert-yellow);
  stroke: #b38a00;
  filter: drop-shadow(0 1px 8px rgba(0,0,0,0.12));
}

/* === Split Layout (Map | Info) — Responsive === */
main.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  height: calc(100vh - 80px);
  padding: 16px;
  background: var(--bg);
}

.app-header { padding: 12px 16px; background: var(--panel); border-bottom: 1px solid rgba(16,24,32,0.06); }

#FPmap {
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 320px;
}

#FPinfo-panel {
  background: var(--panel);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#FPinfo-panel .panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.param-controls { display: flex; align-items: center; gap: 8px; }
.ghost-btn {
  padding: 6px 10px; border-radius: 8px; background: transparent; border: 1px solid rgba(16,24,32,0.12); cursor: pointer;
}
.scope-controls { display: inline-flex; gap: 6px; }
.scope-btn {
  padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(16,24,32,0.12); background: var(--white); cursor: pointer;
}
.scope-btn.active { background: var(--safety-blue); color: var(--white); border-color: var(--safety-blue); }

#search-box[hidden] { display: none !important; }
.search-box { margin-bottom: 12px; }
.search-control { display: flex; gap: 8px; align-items: center; }
.search-control input[type="search"] { flex: 1; padding: 8px 10px; border: 1px solid rgba(16,24,32,0.16); border-radius: 8px; }

#FPinfo-panel .panel-content { flex: 1; overflow: auto; white-space: pre-wrap; line-height: 1.45; }

/* Disable hover tooltip entirely; selection + side panel only */
.tooltip { display: none !important; }

/* Province selection/disabled states */
.province.selected { fill: var(--alert-yellow); stroke: #b38a00; filter: drop-shadow(0 1px 8px rgba(0,0,0,0.12)); }
.map-disabled .province { cursor: not-allowed; opacity: 0.6; }
.map-disabled .province.selected { fill: var(--province); stroke: var(--stroke); filter: none; }
.map-disabled .province { pointer-events: none; }

/* Responsive behavior */
@media (max-width: 960px) {
  main.split {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto;
  }
  #FPmap { height: 55vh; min-height: 280px; }
  #FPinfo-panel { min-height: 35vh; }
}

/* Typography & brand polish */
html, body { font-family: 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); }
h1, h2, h3 { color: var(--industry-blue); }

/* Scope buttons with icons */
.scope-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.scope-btn .scope-icon { display: inline-block; border-radius: 2px; }

/* Emphasize active scope using brand colors */
.scope-btn.active { background: var(--safety-blue); color: var(--white); border-color: var(--safety-blue); box-shadow: 0 2px 8px rgba(0,93,156,0.18); }
.scope-btn:not(.active):hover { border-color: var(--safety-blue); }

/* Param dropdown styling */
#FPparam { padding: 6px 10px; border: 1px solid rgba(16,24,32,0.16); border-radius: 8px; background: var(--white); }

/* Remove zoom controls */
.fab, .fab .btn { display: none !important; }

/* Panel emphasis + icon ratios */
.param-controls { gap: 10px; }
.param-label { font-weight: 700; color: var(--industry-blue); }
#FPparam { padding: 8px 12px; font-weight: 600; border-radius: 10px; border: 1px solid rgba(16,24,32,0.18); }

.icon-flag { height: 12px; width: auto; }
.icon-csa { height: 18px; width: auto; }

#FPinfo-panel .panel-content h2 {
  margin: 0 0 8px 0; font-size: 1.25rem; color: var(--industry-blue);
}
.param-badge {
  display: inline-block;
  background: var(--alert-yellow);
  color: #3a2a00;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.value-card {
  width: 100%;
  max-width: 100%;

  border: 1px solid rgba(16,24,32,0.08);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.value-text {
  white-space: pre-wrap;       /* preserve formatting + allow wrapping */
  word-wrap: break-word;       /* break long continuous tokens */
  overflow-wrap: anywhere;     /* modern aggressive wrapping */
  font-family: "Consolas", "Courier New", monospace; /* optional, looks like code */
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 100%;
}