/* ============================================================
   Biomass Map Vietnam v2 — WordPress / Flatsome CSS
   Upload to: flatsome-child/assets/css/biomass-map.css
   ============================================================ */


/* ============================================================
   DESIGN SYSTEM — LIGHT THEME
   ============================================================ */
:root {
  --bg:        #eef1ec;
  --panel:     #ffffff;
  --card:      #f7f9f6;
  --card2:     #f0f3ef;
  --border:    rgba(0,0,0,0.07);
  --shadow:    0 2px 16px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --text:      #1a2818;
  --muted:     #7a947a;
  --accent:    #2d7a3a;
  --n1: #5bbde0; --n2: #1560a8;
  --c1: #ffd166; --c2: #d4670a;
  --s1: #6ecf8a; --s2: #1a6e38;
  --w1: #e8c49a; --w2: #7a3a14;
}

/* WordPress: html/body styles are applied via .bm-wrap scope below */

/* ── WRAPPER ── */
.bm-wrap { height:100vh; display:flex; flex-direction:column; }

/* ── HEADER ── */
.bm-wrap .bio-hdr {
  flex-shrink:0; height:64px;
  background:var(--panel);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:relative; z-index:200;
}
.bm-wrap .bio-hdr::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--n1),var(--c1),var(--s1),var(--w1));
}
.hdr-logo { display:flex; align-items:center; gap:12px; }
.logo-img  { height:46px; width:46px; object-fit:contain; border-radius:10px; display:block; }
.logo-fallback {
  width:46px; height:46px; border-radius:10px;
  background:linear-gradient(135deg,#4caf50,#1b5e20);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
  box-shadow:0 2px 8px rgba(27,94,32,0.3);
}
.hdr-title { font-size:15px; font-weight:800; letter-spacing:-0.01em; color:var(--text); }
.hdr-sub   { font-size:10px; font-weight:500; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase; }

.hdr-stats { display:flex; gap:0; }
.hdr-stat  { text-align:center; padding:0 22px; border-left:1px solid var(--border); }
.hdr-stat-val {
  font-size:18px; font-weight:800;
  background:linear-gradient(135deg,#2d7a3a,#1a4a24);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hdr-stat-lbl { font-size:9px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }

.hdr-badge {
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#e8f5e9,#c8e6c9);
  border:1px solid rgba(76,175,80,0.3); border-radius:20px; padding:6px 14px;
}
.badge-dot { width:7px; height:7px; border-radius:50%; background:#4caf50; animation:blink 2s infinite; }
.badge-txt { font-size:10px; font-weight:700; color:#2e7d32; letter-spacing:0.08em; }

/* ── MAIN: 2-column ── */
.bm-wrap .bio-main {
  flex:1; overflow:hidden;
  display:grid;
  grid-template-columns: 220px 1fr 305px;
}

/* ── LEFT STATS PANEL ── */
.bm-wrap .bio-left {
  background:var(--panel);
  border-right:1px solid var(--border);
  overflow-y:auto; padding:14px 12px;
  display:flex; flex-direction:column; gap:0;
  box-shadow:2px 0 8px rgba(0,0,0,0.04);
}
.bm-wrap .bio-left::-webkit-scrollbar { width:3px; }
.bm-wrap .bio-left::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1); border-radius:2px; }

.l-sec {
  font-size:8.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.18em;
  padding-bottom:7px; border-bottom:1px solid var(--border);
  margin:0 0 10px;
}

/* National KPI cards */
.lkpi {
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:10px 10px 10px 14px;
  margin-bottom:7px; position:relative; overflow:hidden;
}
.lkpi::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.lkpi.green::before  { background:linear-gradient(to bottom,var(--s1),var(--s2)); }
.lkpi.blue::before   { background:linear-gradient(to bottom,var(--n1),var(--n2)); }
.lkpi.amber::before  { background:linear-gradient(to bottom,var(--c1),var(--c2)); }
.lkpi.brown::before  { background:linear-gradient(to bottom,var(--w1),var(--w2)); }
.lkpi-icon { font-size:16px; margin-bottom:3px; }
.lkpi-val  { font-size:18px; font-weight:900; color:var(--text); line-height:1; }
.lkpi-lbl  { font-size:9px; font-weight:600; color:var(--muted); margin-top:2px; }

/* Region bars */
.rbar { margin-bottom:9px; }
.rbar-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.rbar-name { font-size:9.5px; font-weight:600; color:var(--text); }
.rbar-pct  { font-size:9px; font-weight:700; }
.rbar-track { height:5px; background:rgba(0,0,0,0.07); border-radius:3px; overflow:hidden; }
.rbar-fill  { height:100%; border-radius:3px; transition:width 1.2s cubic-bezier(.17,.67,.3,1.1); }
.rbar.west .rbar-fill   { background:linear-gradient(90deg,var(--w1),var(--w2)); }
.rbar.west .rbar-pct    { color:var(--w2); }
.rbar.south .rbar-fill  { background:linear-gradient(90deg,var(--s1),var(--s2)); }
.rbar.south .rbar-pct   { color:var(--s2); }
.rbar.central .rbar-fill{ background:linear-gradient(90deg,var(--c1),var(--c2)); }
.rbar.central .rbar-pct { color:var(--c2); }
.rbar.north .rbar-fill  { background:linear-gradient(90deg,var(--n1),var(--n2)); }
.rbar.north .rbar-pct   { color:var(--n2); }

/* Top sources */
.tsrc { display:flex; align-items:center; gap:7px; padding:5px 0; border-bottom:1px solid var(--border); }
.tsrc:last-child { border-bottom:none; }
.tsrc-rank { width:16px; height:16px; border-radius:50%; background:var(--card2); display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:var(--muted); flex-shrink:0; }
.tsrc-name { flex:1; font-size:9px; font-weight:600; color:var(--text); line-height:1.3; }
.tsrc-val  { font-size:9px; font-weight:700; color:var(--accent); white-space:nowrap; }

/* CO2 savings */
.co2-box {
  margin-top:10px;
  background:linear-gradient(135deg,#e8f5e9,#f1f8e9);
  border:1px solid rgba(76,175,80,0.25); border-radius:10px; padding:11px 12px;
  text-align:center;
}
.co2-val { font-size:18px; font-weight:900; color:#2e7d32; }
.co2-lbl { font-size:8.5px; font-weight:600; color:#558b2f; margin-top:2px; }

/* ── CENTER ── */
.bm-wrap .bio-center {
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  /* Rich layered topographic background */
  background:
    radial-gradient(ellipse 60% 40% at 40% 25%, rgba(180,225,195,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 70% 70%, rgba(160,215,235,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 15% 75%, rgba(190,225,190,0.4) 0%, transparent 60%),
    linear-gradient(155deg,#c5d9c5 0%,#d8e8d8 35%,#cfe3d5 65%,#c8dcc8 100%);
}
/* Topographic grid overlay */
.bm-wrap .bio-center::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,80,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,80,0,0.035) 1px, transparent 1px),
    linear-gradient(rgba(0,80,0,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,80,0,0.015) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 20px 20px, 20px 20px;
}
/* Decorative compass / scale badge */
.bm-wrap .bio-center::after {
  content:'N ↑'; position:absolute; bottom:50px; left:16px;
  font-size:10px; font-weight:800; color:rgba(45,122,58,0.5);
  font-family:'Montserrat',sans-serif; letter-spacing:0.1em;
  background:rgba(255,255,255,0.6); border-radius:6px;
  padding:4px 8px; backdrop-filter:blur(4px);
  border:1px solid rgba(0,0,0,0.08); z-index:5; pointer-events:none;
}

/* Map stage — aspect-ratio keeps size even when image missing */
.map-stage {
  position:relative;
  aspect-ratio: 950.95 / 1858.76;
  height:100%;
  max-width:100%;
  min-height:200px;
  cursor:grab;
  z-index:1;
}
.map-stage:active { cursor:grabbing; }
/* Province SVG — draggable container */
#vn-map-wrap {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.05s linear;
  will-change:transform;
}
#vn-map-wrap svg { width:100%; height:100%; display:block; }
path[data-region] { cursor:pointer; transition:filter 0.18s ease; }
path[data-region]:hover { filter:brightness(1.15) saturate(1.15) drop-shadow(0 0 4px rgba(0,0,0,0.2)); }
.rg-hl { pointer-events:none; }
/* Drag hint pill */
.drag-hint {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.82); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.08); border-radius:20px;
  padding:5px 14px; font-size:9.5px; font-weight:600; color:var(--muted);
  box-shadow:0 2px 8px rgba(0,0,0,0.09); white-space:nowrap; z-index:10;
  display:flex; align-items:center; gap:6px; opacity:1;
  transition:opacity 0.4s ease;
}
.drag-hint.hidden { opacity:0; pointer-events:none; }
/* Pan container — fills map-stage, gets translated on drag */
#map-pan {
  position:absolute; inset:0;
  will-change:transform;
}

/* ── FLOATING CARDS ── */
.float-card {
  position:absolute;
  background:rgba(255,255,255,0.93);
  border-radius:12px;
  padding:11px 14px 11px 18px;
  width:160px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(0,0,0,0.14);
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  z-index:10;
  border:1.5px solid rgba(0,0,0,0.06);
}
.float-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  border-radius:12px 0 0 12px;
}
.float-card.north::before   { background:linear-gradient(to bottom,var(--n1),var(--n2)); }
.float-card.central::before { background:linear-gradient(to bottom,var(--c1),var(--c2)); }
.float-card.south::before   { background:linear-gradient(to bottom,var(--s1),var(--s2)); }
.float-card.west::before    { background:linear-gradient(to bottom,var(--w1),var(--w2)); }

.float-card:hover  { transform:scale(1.04); box-shadow:0 8px 24px rgba(0,0,0,0.18); }
.float-card.active { transform:scale(1.05); box-shadow:0 10px 30px rgba(0,0,0,0.2); }
.float-card.active.north   { border-color:var(--n1); }
.float-card.active.central { border-color:var(--c1); }
.float-card.active.south   { border-color:var(--s1); }
.float-card.active.west    { border-color:var(--w1); }

/* Positions follow Vietnam's S-curve */
.float-card.north   { top:9%;  left:3%;  }
.float-card.central { top:43%; right:3%; }
.float-card.south   { top:72%; right:3%; }
.float-card.west    { top:83%; left:3%;  }

.fc-name { font-size:13px; font-weight:700; margin-bottom:5px; }
.fc-name.north   { color:var(--n2); }
.fc-name.central { color:var(--c2); }
.fc-name.south   { color:var(--s2); }
.fc-name.west    { color:var(--w2); }
.fc-ton  { font-size:11px; font-weight:700; color:var(--text); margin-bottom:2px; }
.fc-gw   { font-size:10px; font-weight:500; color:var(--muted); }

/* Map hint */
.map-hint {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.88); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.1); border-radius:20px;
  padding:6px 16px; font-size:10px; font-weight:600; color:var(--muted);
  box-shadow:0 2px 8px rgba(0,0,0,0.1); white-space:nowrap; z-index:10;
}

/* ── RIGHT PANEL ── */
.bm-wrap .bio-right {
  background:var(--panel);
  border-left:1px solid var(--border);
  overflow-y:auto; padding:16px;
  box-shadow:-2px 0 8px rgba(0,0,0,0.04);
}
.bm-wrap .bio-right::-webkit-scrollbar { width:4px; }
.bm-wrap .bio-right::-webkit-scrollbar-track { background:transparent; }
.bm-wrap .bio-right::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12); border-radius:2px; }

/* ── SECTION TITLE ── */
.sec {
  font-size:9px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.18em;
  padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:12px;
}

/* ── DETAIL CARDS ── */
.d-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:16px; margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  animation:fadeUp 0.3s ease both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.d-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.d-prov { font-size:10px; font-weight:500; color:var(--muted); margin-bottom:14px; }

.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpi {
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:11px 10px;
}
.kpi-v { font-size:20px; font-weight:800; }
.kpi-l { font-size:9px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:1px; }

.bio-item { margin-bottom:10px; }
.bio-row  { display:flex; justify-content:space-between; font-size:11px; font-weight:500; margin-bottom:4px; }
.bio-val  { font-size:11px; font-weight:700; }
.bar-track { height:6px; background:rgba(0,0,0,0.06); border-radius:3px; overflow:hidden; }
.bar-fill  { height:100%; border-radius:3px; transition:width 0.9s cubic-bezier(.17,.67,.3,1.2); }

.meter-wrap { height:8px; background:rgba(0,0,0,0.06); border-radius:4px; overflow:hidden; margin:8px 0 4px; }
.meter-fill { height:100%; border-radius:4px; transition:width 1s ease; }
.meter-labels { display:flex; justify-content:space-between; font-size:9px; font-weight:600; color:var(--muted); }

.yr-chart { display:flex; align-items:flex-end; gap:4px; height:52px; margin-top:6px; }
.yr-col   { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end; gap:3px; }
.yr-bar   { width:100%; border-radius:3px 3px 0 0; min-height:3px; }
.yr-lbl   { font-size:8px; font-weight:600; color:var(--muted); }

.prov-list { display:flex; flex-wrap:wrap; gap:4px; }
.prov-chip {
  font-size:9px; font-weight:600; padding:3px 8px;
  border-radius:20px; background:var(--card);
  border:1px solid var(--border); color:var(--muted);
}

.placeholder {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:280px;
  text-align:center; gap:12px;
}
.ph-icon { font-size:40px; opacity:0.2; }
.ph-txt  { font-size:11px; font-weight:500; color:var(--muted); line-height:1.8; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── TAB BAR ── */
.bm-wrap .bio-tabs {
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:0 20px; height:56px;
  background:var(--panel);
  border-bottom:2px solid var(--border);
  box-shadow:0 3px 12px rgba(0,0,0,0.08);
  z-index:150;
}
.region-tab {
  display:flex; align-items:center; gap:12px;
  padding:10px 18px 10px 16px; border-radius:10px; cursor:pointer;
  border:2px solid var(--border);
  transition:all 0.2s ease; position:relative; overflow:hidden; flex:1; min-height:40px;
}
.region-tab::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:10px 10px 0 0;
}
.region-tab.north::before   { background:linear-gradient(90deg,var(--n1),var(--n2)); }
.region-tab.central::before { background:linear-gradient(90deg,var(--c1),var(--c2)); }
.region-tab.south::before   { background:linear-gradient(90deg,var(--s1),var(--s2)); }
.region-tab.west::before    { background:linear-gradient(90deg,var(--w1),var(--w2)); }
.region-tab.north   { background:rgba(91,189,224,0.07); }
.region-tab.central { background:rgba(255,209,102,0.07); }
.region-tab.south   { background:rgba(110,207,138,0.07); }
.region-tab.west    { background:rgba(212,164,244,0.07); }
.region-tab:hover   { filter:brightness(0.96); }
.region-tab.active.north    { background:rgba(91,189,224,0.22);  border-color:var(--n1); box-shadow:0 4px 14px rgba(91,189,224,0.25); }
.region-tab.active.central  { background:rgba(255,209,102,0.22); border-color:var(--c1); box-shadow:0 4px 14px rgba(255,209,102,0.25); }
.region-tab.active.south    { background:rgba(110,207,138,0.22); border-color:var(--s1); box-shadow:0 4px 14px rgba(110,207,138,0.25); }
.region-tab.active.west     { background:rgba(212,164,244,0.22); border-color:var(--w1); box-shadow:0 4px 14px rgba(212,164,244,0.25); }
.rt-name { font-size:13px; font-weight:800; letter-spacing:-0.01em; }
.rt-name.north   { color:var(--n2); }
.rt-name.central { color:var(--c2); }
.rt-name.south   { color:var(--s2); }
.rt-name.west    { color:var(--w2); }
.rt-val  { font-size:11px; font-weight:500; color:var(--muted); }

/* ── MAT DOTS ── */
.mat-dot {
  position:absolute; width:20px; height:20px; border-radius:50%;
  border:2px solid #fff; border-bottom:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.35); cursor:pointer;
  transform:translate(-50%,-50%);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  z-index:12; overflow:visible;
}
.mat-dot img { width:20px; height:20px; border-radius:50%; object-fit:cover; display:block; pointer-events:none; }
.mat-dot:hover { transform:translate(-50%,-50%) scale(1.7); box-shadow:0 4px 14px rgba(0,0,0,0.45); z-index:20; }
.mat-dot-tip {
  position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.75); color:#fff;
  font-size:8px; font-weight:600; white-space:nowrap;
  padding:3px 6px; border-radius:4px; pointer-events:none;
  opacity:0; transition:opacity 0.2s ease;
}
.mat-dot:hover .mat-dot-tip { opacity:1; }

/* ── MATERIAL GALLERY (right panel) ── */
.mat-gallery { display:flex; gap:8px; margin-top:8px; }
.mat-item    { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.mat-img     { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid rgba(0,0,0,0.08); background:#f0f0f0; }
.mat-lbl     { font-size:9px; font-weight:600; color:var(--muted); text-align:center; line-height:1.2; }