/* =========================================================
   ✅ 기능별 CSS (주석 강화 버전)
   - 각 섹션: “무슨 기능/컴포넌트”를 다루는지
   - 각 규칙: “무엇(어디)을 어떤 방식으로 조절”하는지
   ========================================================= */


/* =========================================================
   [기능] 전체 대시보드 기본 톤
   - 페이지 배경, 기본 여백, 기본 글자색
   ========================================================= */
.map-dashboard{
  background: #fafafa;      /* ✅ 전체 배경색 */
  padding: 0px 18px 22px;   /* ✅ 전체 컨테이너 내부 여백 */
  color: #111;              /* ✅ 기본 텍스트 컬러 */
}

/* =========================================================
   [기능] 전체 폰트 통일
   - 대시보드 내부 모든 요소의 폰트를 Pretendard 계열로 통일
   ========================================================= */
.map-dashboard *{
  font-family: "Pretendard", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; /* ✅ 폰트 스택 */
}


/* =========================================================
   [기능] 상단 필터바(Sticky)
   - 스크롤해도 상단에 고정
   - 반투명 + 블러 + 하단 구분선
   ========================================================= */
.map-filterbar{
  position: sticky;               /* ✅ 스크롤 시 상단 고정 */
  top: 0;                         /* ✅ 화면 맨 위에 붙임 */
  z-index: 30;                    /* ✅ 지도/그래프 위로 올라오게 */
  padding: 1px 0 1px;             /* ✅ 필터바 상하 여백(컴팩트) */
  background: rgba(250,250,250,.92); /* ✅ 반투명 배경 */
  backdrop-filter: blur(10px);    /* ✅ 뒤 배경 블러 */
  border-bottom: 1px solid #eee;  /* ✅ 하단 구분선 */
}

/* [기능] 필터바 카드(프레임워크 카드) 외형 제거 */
.map-filtercard{
  background: transparent;        /* ✅ 카드 배경 제거 */
  border: 0;                      /* ✅ 카드 테두리 제거 */
  border-radius: 0;               /* ✅ 라운드 제거 */
  box-shadow: none !important;    /* ✅ 그림자 제거 */
  padding: 0 !important;          /* ✅ 기본 패딩 제거 */
}

/* =========================================================
   [기능] 라벨 텍스트(필드명)
   - 라벨 글자 크기/굵기/색/간격을 통일
   ========================================================= */
.map-label{
  font-size: 11px;        /* ✅ 라벨 글자 크기 */
  font-weight: 600;       /* ✅ 라벨 굵기 */
  letter-spacing: .2px;   /* ✅ 자간 */
  color: #6b7280;         /* ✅ 라벨 색 */
  margin: 0 0 6px;        /* ✅ 라벨과 컨트롤(드롭다운) 사이 간격 */
}

/* [기능] 인라인 라벨(한 줄 배치에서 라벨 줄바꿈 방지) */
.map-label-inline{
  font-size: 11px;        /* ✅ 라벨 글자 크기 */
  font-weight: 600;       /* ✅ 라벨 굵기 */
  letter-spacing: .2px;   /* ✅ 자간 */
  color: #6b7280;         /* ✅ 색상 */
  white-space: nowrap;    /* ✅ 라벨이 줄바꿈되지 않게 */
}


/* =========================================================
   [기능] 드롭다운(react-select) 톤
   - 테두리/높이/폰트/옵션 패딩 등 “드롭박스 UI” 전체 외형 조절
   ========================================================= */

/* (1) 드롭다운 박스(컨트롤) 외곽선/높이/라운드/그림자 */
.map-dashboard .Select-control,
.map-dashboard .Select__control{
  border: 1px solid #e5e7eb !important; /* ✅ 드롭박스 테두리 색/두께 */
  border-radius: 8px !important;        /* ✅ 모서리 라운드(완만하게) */
  box-shadow: none !important;          /* ✅ 포커스/기본 그림자 제거 */
  min-height: 34px;                     /* ✅ 드롭박스 높이(버튼과 맞춤) */
}

/* (2) placeholder(선택 전 안내 문구) 색/크기 */
.map-dashboard .Select-placeholder,
.map-dashboard .Select__placeholder{
  color:#9ca3af !important;   /* ✅ placeholder 색 */
  font-size: 12px !important; /* ✅ placeholder 글자 크기 */
}

/* (3) 선택된 값(단일 선택) 텍스트 크기/세로정렬 */
.map-dashboard .Select-value-label,
.map-dashboard .Select__single-value{
  font-size: 12px !important;     /* ✅ 선택된 값 글자 크기 */
  line-height: 30px !important;   /* ✅ 컨트롤 내부 수직정렬 느낌 */
}

/* (4) 드롭다운 메뉴(리스트) 폰트 크기 */
.map-dashboard .Select-menu-outer,
.map-dashboard .Select__menu{
  font-size: 12px !important;     /* ✅ 옵션 리스트 전체 글자 크기 */
}

/* (5) 옵션(각 항목) 폰트/패딩(클릭 영역) */
.map-dashboard .Select-option,
.map-dashboard .Select__option{
  font-size: 12px !important;     /* ✅ 옵션 글자 크기 */
  padding: 7px 10px !important;   /* ✅ 옵션 클릭 영역(패딩) */
}


/* =========================================================
   [기능] 필터 “한 줄 레이아웃”(라벨+드롭다운 배치)
   - 드롭다운 ‘폭’을 사실상 여기서 결정함(minmax 최소폭)
   ========================================================= */
.map-filtergrid{
  display: grid; /* ✅ 라벨/드롭다운을 칼럼 단위로 정렬 */

  /* ✅ 드롭다운 폭 조절 핵심:
     - minmax(160px, 1fr) = 드롭다운 최소 160px, 남는 공간은 유동
     - 숫자를 줄이면 드롭다운이 더 좁아질 수 있음 */
  grid-template-columns:
    auto minmax(160px, 1fr)   /* ✅ 1번째 드롭다운(최소폭 160) */
    auto minmax(160px, 1fr)   /* ✅ 2번째 드롭다운(최소폭 160) */
    auto minmax(220px, 1fr)  /* ✅ Scenario 드롭다운(최소폭 220) */
    auto
    auto; 

  gap: 8px 10px;        /* ✅ 라벨/드롭다운 사이 간격(행/열) */
  align-items: center;  /* ✅ 라벨과 컨트롤의 세로정렬 */
  padding: 6px 4px;     /* ✅ 필터 영역 내부 여백 */
}

/* =========================================================
   [기능] Scenario 드롭다운 + Reset 버튼을 “한 줄로 고정”
   - dropdown이 줄어들 수 있게 min-width:0 처리
   ========================================================= */
.map-scn-wrap{
  display: grid;
  grid-template-columns: 1fr auto auto; /* ✅ 왼쪽: dropdown(늘어남), 오른쪽: 버튼(고정) */
  gap: 8px;                        /* ✅ dropdown과 버튼 간격 */
  align-items: center;             /* ✅ 수직정렬 */
  min-width: 0;                    /* ✅ grid에서 자식이 줄어들 수 있게(중요) */
}

/* ✅ Scenario 내부 dropdown이 내용 때문에 안 줄어드는 현상 방지 */
.map-scn-wrap .map-dd{
  min-width: 0;
}


/* =========================================================
   [기능] Reset 버튼 외형/인터랙션
   - 높이(드롭다운과 맞춤), pill 모양, hover 반전
   ========================================================= */
.map-resetbtn{
  height: 34px;                    /* ✅ 버튼 높이(드롭다운과 동일) */
  padding: 0 12px;                 /* ✅ 좌우 패딩 */
  border-radius: 999px !important; /* ✅ pill 형태 */
  border: 1px solid #e5e7eb !important; /* ✅ 테두리 */
  background: #fff !important;     /* ✅ 배경 */
  color: #111 !important;          /* ✅ 글자색 */
  font-weight: 800;                /* ✅ 굵기 */
  font-size: 12px;                 /* ✅ 글자 크기 */
  letter-spacing: -0.2px;          /* ✅ 자간 */
  white-space: nowrap;             /* ✅ 줄바꿈 방지 */
  box-shadow: none !important;     /* ✅ 그림자 제거 */
  transition: background .12s ease, border-color .12s ease, color .12s ease; /* ✅ 호버 전환 */
}
.map-resetbtn:hover{
  background: #111 !important;     /* ✅ 호버 배경(검정) */
  border-color: #111 !important;   /* ✅ 호버 테두리(검정) */
  color: #fff !important;          /* ✅ 호버 글자색(흰색) */
}
.map-resetbtn:focus{
  outline: none !important;        /* ✅ 기본 포커스 제거 */
  box-shadow: 0 0 0 2px rgba(17,17,17,.08) !important; /* ✅ 커스텀 포커스 링 */
}



/* Apply 버튼 스타일(Reset과 높이 통일) */
.map-applybtn{
  height: 34px;                    /* ✅ 버튼 높이(드롭다운과 동일) */
  padding: 0 12px;                 /* ✅ 좌우 패딩 */
  border-radius: 999px !important; /* ✅ pill 형태 */
  border: 1px solid #e5e7eb !important; /* ✅ 테두리 */
  background: #fff !important;     /* ✅ 배경 */
  color: #111 !important;          /* ✅ 글자색 */
  font-weight: 800;                /* ✅ 굵기 */
  font-size: 12px;                 /* ✅ 글자 크기 */
  letter-spacing: -0.2px;          /* ✅ 자간 */
  white-space: nowrap;             /* ✅ 줄바꿈 방지 */
  box-shadow: none !important;     /* ✅ 그림자 제거 */
  transition: background .12s ease, border-color .12s ease, color .12s ease; /* ✅ 호버 전환 */
}
.map-applybtn:hover{
  background: #111 !important;     /* ✅ 호버 배경(검정) */
  border-color: #111 !important;   /* ✅ 호버 테두리(검정) */
  color: #fff !important;          /* ✅ 호버 글자색(흰색) */
}
.map-applybtn:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(17,17,17,.12) !important;
}

.map-dashboard .pill-radio label:has(input:checked),
.map-dashboard .pill-radio label:has(input:checked) span,
.map-dashboard .pill-radio label:has(input:checked) *{
  color: #fff !important;
}


/* =========================================================
   [기능] 공통 카드 UI(대시보드 카드들)
   - 카드 배경/테두리/라운드/헤더/바디 패딩
   ========================================================= */

/* 카드 외형(기본) */
.map-card{
  background: #fff;            /* ✅ 카드 배경 */
  border: 1px solid #ededed;   /* ✅ 카드 테두리 */
  border-radius: 12px;         /* ✅ 카드 라운드 */
  overflow: hidden;            /* ✅ 기본은 내용 잘라 깔끔하게 */
  box-shadow: none !important; /* ✅ 그림자 제거 */
}

/* 카드 헤더(제목/우측 컨트롤) */
.map-cardheader{
  background: #fff;                 /* ✅ 헤더 배경 */
  border-bottom: 1px solid #f0f0f0; /* ✅ 헤더/바디 구분선 */
  padding: 14px 16px;              /* ✅ 헤더 패딩 */
  display:flex;                     /* ✅ 좌/우 배치 */
  align-items:center;               /* ✅ 수직 중앙 */
  justify-content: space-between;   /* ✅ 좌(제목) 우(컨트롤) */
}

/* 카드 제목/부제 */
.map-title{
  font-size: 15px;          /* ✅ 제목 크기 */
  font-weight: 900;         /* ✅ 제목 굵기 */
  letter-spacing: -0.3px;   /* ✅ 자간(타이트) */
  color: #111;
}
.map-subtitle{
  margin-top: 3px;          /* ✅ 제목과 간격 */
  font-size: 12px;          /* ✅ 부제 크기 */
  color: #6b7280;           /* ✅ 부제 색 */
  letter-spacing: -0.1px;
}

/* 카드 바디: 프레임워크 기본 padding 제거(지도/그래프를 “꽉” 채우기 위함) */
.map-cardbody{
  padding: 0 !important;
}


/* =========================================================
   [기능] 왼쪽 컬럼 레이아웃(연도 카드 + 지도 카드)
   ========================================================= */

/* 왼쪽은 “연도(위) + 지도(아래)”로 쌓는 그리드 */
.map-left-stack{
  display: grid;
  grid-template-rows: auto 1fr; /* ✅ 위: 연도(내용만큼), 아래: 지도(남는 공간) */
  gap: 14px;                    /* ✅ 카드 간 간격 */
  min-height: 0;                /* ✅ 내부 높이 계산 안정 */
}



/* =========================================================
   [기능] 지도 영역(iframe)
   - 지도 높이 확보 + 스크롤/넘침 방지
   ========================================================= */
.map-mapbody{
  height: calc(100dvh - 300px); /* ✅ 화면 높이 기반 지도 영역 확보 */
  min-height: 520px;            /* ✅ 너무 작아지는 것 방지 */
  overflow: hidden;             /* ✅ 지도 내부 스크롤/잘림 정리 */
}

.map-mapcard--lower{ margin-top: 8px; }
.map-filtercard--lower{ margin-top: 8px; }

.map-mapbody--short{
  height: clamp(420px, 78vh, 980px);
  min-height: 420px;
  max-height: none;
}

.map-cardheader-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.map-level-dd{
  min-width: 120px;
}

/* iframe을 부모에 꽉 채우기 위한 래퍼 */
.map-iframewrap{
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* 실제 iframe 크기/테두리 */
.map-iframe{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block; /* ✅ 아래쪽 여백/라인 문제 방지 */
  touch-action: pan-x pan-y;
}


/* =========================================================
   [기능] 우측 그래프 스택(카드 2개 등) + Plotly 잘림/리사이즈 안정화
   ========================================================= */

/* 우측 카드들을 세로로 쌓는 스택 */
.map-side-stack{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;           /* ✅ 내부 높이 계산 안정 */
}

/* 우측 카드: 헤더(고정) + 바디(가변)로 동작하게 */
.map-sidecard{
  display: flex;
  flex-direction: column;
  min-height: 0;           /* ✅ Plotly/overflow 계산 안정 */
  height: 100%;
}

/* ✅ 핵심: 카드 바디가 "남는 공간"을 확실히 먹도록 flex 지정 */
.map-sidecard .map-cardbody{
  flex: 1 1 auto;          /* ✅ 바디가 늘어나게 */
  min-height: 0;           /* ✅ overflow/height 계산 안정 */
  display: flex;           /* ✅ 바디 내부(loading/graph)도 flex로 */
  flex-direction: column;
}

/* ✅ Plotly 축/레이블 잘림 방지: 우측 카드만 overflow hidden 해제 */
.map-sidecard.map-card{
  overflow: visible !important;
}

/* (선택) 바디가 visible이면 Plotly가 바깥으로 나갈 수 있어 body도 visible 권장 */
.map-sidecard .map-cardbody{
  overflow: visible;       /* ✅ 축/레이블 잘림 추가 방지(상황에 따라 도움) */
}

/* 라운드 유지(overflow visible로 클리핑이 안 되니 헤더/바디에 라운드 부여) */
.map-sidecard .map-cardheader{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.map-sidecard .map-cardbody{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* =========================================================
   [기능] 그래프 바디(타임시리즈/Top10) 높이 체인
   - Dash(dcc.Loading, dcc.Graph, plotly DOM) 구조에서
     “100% 높이”가 끊기지 않게 전달하는 역할
   ========================================================= */
.map-timeseriesbody,
.map-top10body{
  flex: 1 1 auto;          /* ✅ 남는 공간 차지 */
  min-height: 0;           /* ✅ flex overflow 계산 안정 */
  padding: 12px !important;/* ✅ 그래프 주변 여백 */
  display: flex;           /* ✅ 내부 래퍼들도 flex로 제어 */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;       /* ✅ 축/레이블 잘림 방지 */
}

/* 타임시리즈 그래프가 너무 작아지지 않도록 최소 높이 */
.map-timeseriesbody{
  min-height: 360px;
}

/* 바디 직계 자식(div 래퍼)도 늘어나도록 */
.map-timeseriesbody > div,
.map-top10body > div{
  flex: 1 1 auto;
  min-height: 0;
}

/* 그래프 유틸: 부모를 꽉 채우도록 */
.map-fill{
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
}

/* dcc.Loading 중첩 div에 height 100% 전달 */
.map-timeseriesbody .dash-loading,
.map-timeseriesbody .dash-loading > div,
.map-timeseriesbody .dash-loading > div > div,
.map-top10body .dash-loading,
.map-top10body .dash-loading > div,
.map-top10body .dash-loading > div > div{
  height: 100% !important;
  min-height: 0 !important;
}

/* dash-graph도 부모 크기 따라가게 */
.map-timeseriesbody .dash-graph,
.map-top10body .dash-graph{
  flex: 1 1 auto;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
}

/* plotly 내부 컨테이너도 100% + overflow visible */
.map-timeseriesbody .js-plotly-plot,
.map-timeseriesbody .plot-container,
.map-timeseriesbody .plotly,
.map-top10body .js-plotly-plot,
.map-top10body .plot-container,
.map-top10body .plotly{
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}


/* =========================================================
   [기능] Top10 탭(필 버튼) UI
   ========================================================= */
.map-top10tabs{
  display:flex;
  gap: 6px;                /* ✅ 탭 간격 */
  flex-wrap: wrap;         /* ✅ 좁으면 줄바꿈 */
  align-items:center;      /* ✅ 수직 정렬 */
  justify-content:flex-end;/* ✅ 오른쪽 정렬 */
}

/* 탭 버튼 기본 */
.top10-pill{
  padding: 7px 10px;        /* ✅ 클릭 영역 */
  border-radius: 999px;     /* ✅ pill */
  border: 1px solid #e5e7eb;/* ✅ 테두리 */
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.1px;
  color: #111;
  background: #fff;
  text-decoration: none !important;
}

/* 활성 탭 */
.top10-pill.is-active{
  background: #111;
  border-color: #111;
  color: #fff;
}

/* 호버 */
.top10-pill:hover{ background:#f5f5f5; }
.top10-pill.is-active:hover{ background:#111; }


/* =========================================================
   [기능] 반응형(모바일)
   - 필터는 2열로, 연도 pill 숨김, 지도 높이는 vh로
   ========================================================= */
@media (max-width: 992px){

  /* 필터: 라벨|컨트롤 2열로 내려서 줄바꿈 */
  .map-filtergrid{
    grid-template-columns: auto 1fr;
  }

  /* Scenario 래퍼는 가로 100% */
  .map-scn-wrap{
    width: 100%;
  }

  /* 왼쪽: 연도/지도 둘 다 auto로 자연스러운 스크롤 */
  .map-left-stack{
    grid-template-rows: auto auto;
  }

  /* 지도: 모바일은 60vh 정도가 보기 좋음 */
  .map-mapbody{
    height: 60vh;
    min-height: 60vh;
  }
}

@media (max-width: 640px){
  .map-filter-row{
    grid-template-columns: 1fr;
  }
  .map-filter-row--scenario{
    grid-template-columns: 1fr;
  }
  .map-filter-actions--inline{
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ===== Grid Map Popup & Right Panel ===== */
.map-filtergrid--panel{
  grid-template-columns: 1fr;
  gap: 14px;
}

/* 조건 선택 드롭다운 폭 축소 */
.map-filtergrid--panel .map-dd{
  max-width: none;
  width: 100%;
}

.map-filter-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 8px;
}

.map-filter-row--scenario{
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 8px;
}

.map-filter-actions--inline{
  justify-content: flex-end;
}

.map-filter-field .map-label-inline{
  display: block;
  margin-bottom: 6px;
}

.map-filter-field .map-dd{
  width: 100%;
}

/* 단일 라인(시나리오 라벨/행) 좌우 여백 */
.map-filtergrid--panel > .map-label-inline{
  display: block;
  padding: 0 8px;
}

.map-cardheader .map-title{
  margin-left: 6px;
}

.map-filter-actions--inline{
  gap: 6px;
}

.map-filter-actions--inline .map-resetbtn{
  min-width: 64px;
}

.map-filter-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ===== Grid Map Right Panel Refresh ===== */
.map-filterpanel{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 8px 2px;
}

.map-filter-row--triple{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.map-filter-field{
  min-width: 0;
}

.map-filter-field .map-label-inline{
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: -0.2px;
}

.map-filterpanel .map-dd .Select-control{
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid #d9dde5;
  box-shadow: none;
}

.map-filterpanel .map-dd .Select-value-label,
.map-filterpanel .map-dd .Select-placeholder{
  line-height: 38px !important;
  font-size: 14px;
}

.map-filter-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.map-applybtn,
.map-resetbtn{
  min-width: 66px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px !important;
  font-size: 13px;
  font-weight: 700;
}

.map-resetbtn{
  border-color: #d1d5db !important;
  color: #111 !important;
  background: #fff !important;
}

@media (max-width: 991px){
  .map-filter-row--triple{
    grid-template-columns: 1fr;
  }

  .map-filteractions,
  .map-filter-actions{
    justify-content: flex-start;
  }
}

.map-popup-backdrop{
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 12px;
}

.map-popup{
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 32px));
  height: min(520px, calc(100% - 32px));
  min-height: 360px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  padding: 12px 14px 12px;
  z-index: 30;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.map-popup-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 10px;
  flex: 0 0 auto;
}

.map-popup-header-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.map-popup-mode-tabs{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  background: #f7f7f7;
  flex: 0 0 auto;
}

.map-popup-mode-btn{
  border: 0;
  background: transparent;
  color: #6b7280;
  border-radius: 999px;
  min-width: 74px;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}

.map-popup-mode-btn:hover{
  background: rgba(17,17,17,0.06);
  color: #111111;
}

.map-popup-mode-btn.is-active{
  background: #111111;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(17,17,17,0.10);
}

.map-popup-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 0;
}

.grid-stock-controls{
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 4px 10px;
  min-height: 0;
}

.grid-popup-scenario-controls{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 4px 8px;
  min-height: 0;
  flex-wrap: wrap;
}

.grid-popup-scenario-tabs{
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid #9ca3af;
  border-radius: 4px;
  overflow: hidden;
  background: #f8f8f8;
}

.grid-popup-scenario-btn{
  border: 0;
  border-right: 1px solid #d1d5db;
  background: #f8f8f8;
  color: #4b5563;
  border-radius: 0;
  min-width: 74px;
  height: 26px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}

.grid-popup-scenario-btn:last-child{
  border-right: 0;
}

.grid-popup-scenario-btn:hover{
  background: #efefef;
  color: #111111;
}

.grid-popup-scenario-btn.is-active{
  color: #111111;
  box-shadow: inset 0 2px 0 #6b7280, inset 0 -2px 0 #6b7280;
}

.grid-stock-label{
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
}

.grid-stock-scenario-dd{
  width: 168px;
  min-width: 168px;
}

.grid-stock-helper{
  font-size: 11px;
  color: #9ca3af;
  line-height: 1;
  white-space: nowrap;
}

.map-popup-plot{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 360px;
  padding: 0 4px 2px;
  display: flex;
  align-items: stretch;
}

.map-popup-plot > div{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.map-popup-graph{
  display: block;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 360px;
  height: 100%;
  width: 100%;
}

.map-popup .dash-graph,
.map-popup .js-plotly-plot,
.map-popup .plot-container,
.map-popup .plotly,
.map-popup .svg-container{
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.map-popup-close{
  border-radius: 999px;
  min-width: 68px;
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
}

.map-popup.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.map-popup-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px){
  .map-popup{
    width: calc(100% - 20px);
    height: min(460px, calc(100% - 20px));
    min-height: 300px;
    padding: 10px 10px 10px;
    border-radius: 12px;
  }

  .map-popup-header{
    align-items: flex-start;
    padding-bottom: 8px;
  }

  .map-popup-header-left{
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .map-popup-header .map-title{
    font-size: 14px;
    line-height: 1.35;
    min-width: 0;
    padding-right: 8px;
  }

  .map-popup-mode-tabs{
    gap: 4px;
    padding: 2px;
    flex-wrap: wrap;
  }

  .map-popup-mode-btn{
    min-width: 64px;
    height: 28px;
    padding: 0 9px;
    font-size: 11px;
  }

  .grid-stock-controls{
    gap: 8px;
    padding: 0 0 8px;
    flex-wrap: wrap;
  }

  .grid-popup-scenario-controls{
    gap: 6px;
    padding: 0 0 6px;
  }

  .grid-popup-scenario-tabs{
    gap: 0;
  }

  .grid-popup-scenario-btn{
    min-width: 66px;
    height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  .grid-stock-scenario-dd{
    width: 150px;
    min-width: 150px;
  }

  .grid-stock-helper{
    font-size: 10px;
  }

  .map-popup-body{
    min-height: 0;
  }

  .map-popup-plot{
    min-height: 260px;
    padding: 0;
  }

  .map-popup-graph{
    min-height: 260px;
  }

  .map-popup .dash-graph,
  .map-popup .js-plotly-plot,
  .map-popup .plot-container,
  .map-popup .plotly,
  .map-popup .svg-container{
    min-height: 260px;
  }

  .map-popup-close{
    min-width: 60px;
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* map fade while loading */
#map_div{
  transition: opacity 0.2s ease-in-out;
}
#map_div.map-loading{
  opacity: 0.6;
}