/* ══════════════════════════════════════════════════════════════
   VN-ClimateGIS — Main CSS
   ══════════════════════════════════════════════════════════════
   Bổ sung cho Tailwind CDN:
     - Leaflet overrides (z-index, font, controls)
     - Scrollbar tuỳ chỉnh
     - Sidebar transitions
     - Filter section animations
     - Province panel slide
     - Tooltip styles
     - Grid labels
     - Compare divider
     - ✅ Mobile toolbar (bottom bar, basemap sheet, opacity popup)
     - Responsive (Tablet + Mobile)
     - Print styles
   ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   CHUẨN HÓA CHUNG
   ═══════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;           /* Ngăn pull-to-refresh trên mobile */
}

/* Ngăn body cuộn khi modal/panel mở */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* Ẩn Leaflet default zoom control (đã custom) */
.leaflet-control-zoom {
  display: none !important;
}


/* ═══════════════════════════════════════
   SCROLLBAR — Mỏng, gọn
   ═══════════════════════════════════════ */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.dark * {
  scrollbar-color: #475569 transparent;
}

/* Ẩn scrollbar hoàn toàn (cho quick nav, dropdown cuộn ngang) */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}


/* ═══════════════════════════════════════
   LEAFLET OVERRIDES
   ═══════════════════════════════════════ */

/* Attribution nhỏ gọn */
.leaflet-control-attribution {
  font-size: 11px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  padding: 2px 8px !important;
  border-radius: 4px 0 0 0 !important;
  z-index: 800 !important;
  pointer-events: auto;
  margin-bottom: 0 !important;
  bottom: 50px !important;
}

.dark .leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #94a3b8 !important;
}


.dark .leaflet-control-attribution a {
  color: #60a5fa !important;
}
.leaflet-bottom.leaflet-right {
  z-index: 800 !important;
  bottom: 0 !important;
  right: 0 !important;
}

/* Scale bar */
.leaflet-control-scale-line {
  font-size: 12px !important;
  border-color: #6b7280 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
}

.dark .leaflet-control-scale-line {
  background: rgba(15, 23, 42, 0.7) !important;
  color: #94a3b8 !important;
  border-color: #475569 !important;
}

/* Leaflet popup override */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
}

.dark .leaflet-popup-content-wrapper {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

.dark .leaflet-popup-tip {
  background: #1e293b !important;
}

/* Tile loading — fade in mượt */
.leaflet-tile {
  transition: opacity 0.3s ease-in-out;
}


/* ═══════════════════════════════════════
   SIDEBAR — Transition & Layout
   ═══════════════════════════════════════ */
#sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#sidebar-content {
  transition: opacity 0.2s ease;
  min-width: 280px;
}

#btn-sidebar-toggle {
  transition: all 0.2s ease;
}

#btn-sidebar-toggle:hover {
  background-color: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.dark #btn-sidebar-toggle:hover {
  background-color: #1e3a5f;
  border-color: #3b82f6;
  color: #60a5fa;
}


/* ═══════════════════════════════════════
   FILTER SECTIONS — Dropdown animations
   ═══════════════════════════════════════ */
.filter-section {
  position: relative;
}

/* Dropdown panels — slide down xuất hiện */
#region-panel,
#variable-panel {
  animation: slideDown 0.2s ease-out;
  transform-origin: top center;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Variable panel — nằm ngoài sidebar */
#variable-panel {
  position: absolute;
  left: 0;
  z-index: 100;
}

/* Filter header hover */
.filter-section > button:first-child {
  transition: all 0.15s ease;
}

.filter-section > button:first-child:hover {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Scenario / Period / TimeDetail button transition */
#scenario-list button,
#period-list button,
#timedetail-list button {
  transition: all 0.15s ease;
}


/* ═══════════════════════════════════════
   PROVINCE PANEL — Slide animation
   ═══════════════════════════════════════ */
#province-panel {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tab indicator mượt */
.pp-tab {
  transition: all 0.2s ease;
  position: relative;
}

.pp-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #2563eb;
  transition: all 0.2s ease;
  transform: translateX(-50%);
}

.pp-tab.active::after,
.pp-tab[style*="border-blue"]::after {
  width: 100%;
}

/* Summary card hover */
#pp-summary-cards > div {
  transition: all 0.15s ease;
}

#pp-summary-cards > div:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════
   TOOLTIP — Province hover card
   ═══════════════════════════════════════ */
#province-tooltip {
  animation: tooltipFadeIn 0.15s ease-out;
  backdrop-filter: blur(8px);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ═══════════════════════════════════════
   COLOR LEGEND — Thanh chú giải màu dưới bản đồ
   ═══════════════════════════════════════ */
#color-legend {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

#legend-gradient {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dark #legend-gradient {
  border-color: rgba(255, 255, 255, 0.1);
}


/* ═══════════════════════════════════════
   GRID LABELS — Leaflet DivIcon (lưới tọa độ)
   ═══════════════════════════════════════ */
.grid-label {
  background: none !important;
  border: none !important;
  pointer-events: none;
}


/* ═══════════════════════════════════════
   MODAL OVERLAY — Backdrop animation
   ═══════════════════════════════════════ */
.modal-overlay {
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Desktop: scale + fade */
@media (min-width: 641px) {
  .modal-overlay > div {
    animation: modalScaleUp 0.25s ease-out;
  }
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile: slide up từ dưới */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}


/* ═══════════════════════════════════════
   COMPARE PAGE — Chia đôi màn hình
   ═══════════════════════════════════════ */
#compare-container {
  position: relative;
}

#compare-divider {
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

#compare-divider:hover {
  background-color: #3b82f6 !important;
}

#compare-divider:active {
  background-color: #2563eb !important;
}

/* Compare filter panels — fade in */
#compare-left .absolute,
#compare-right .absolute {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Compare legend */
[id^="compare-legend-"] {
  animation: fadeInUp 0.3s ease-out;
}


/* ═══════════════════════════════════════
   NAV BUTTONS — Header navigation
   ═══════════════════════════════════════ */
.nav-btn {
  transition: all 0.15s ease;
  position: relative;
}

.nav-btn:hover {
  background-color: #f3f4f6;
}

.dark .nav-btn:hover {
  background-color: #1e293b;
}

/* Active indicator — gạch chân xanh */
.nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 50%;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
}


/* ═══════════════════════════════════════
   BASEMAP BUTTONS — Desktop
   ═══════════════════════════════════════ */
.basemap-btn {
  transition: all 0.15s ease;
}

.basemap-btn.active {
  background-color: #eff6ff;
}

.dark .basemap-btn.active {
  background-color: rgba(59, 130, 246, 0.15);
}


/* ═══════════════════════════════════════
   BASEMAP BUTTONS — Mobile grid
   ═══════════════════════════════════════ */
.basemap-btn-m {
  transition: all 0.15s ease;
}

.basemap-btn-m.active {
  background-color: #eff6ff;
  box-shadow: inset 0 0 0 2px #3b82f6;
  border-radius: 0.5rem;
}

.dark .basemap-btn-m.active {
  background-color: rgba(30, 58, 138, 0.2);
  box-shadow: inset 0 0 0 2px #60a5fa;
}


/* ═══════════════════════════════════════
   MOBILE TOOLBAR — Thanh công cụ dưới cùng
   ═══════════════════════════════════════ */

/* Safe-area cho iPhone (notch / Dynamic Island / home bar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #map-toolbar-mobile {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* Active state nút mobile toolbar */
#map-toolbar-mobile button.is-active {
  background-color: #eff6ff;
  color: #2563eb;
  border-radius: 0.75rem;
}

.dark #map-toolbar-mobile button.is-active {
  background-color: rgba(30, 58, 138, 0.2);
  color: #60a5fa;
}

/* Mobile basemap sheet — slide up */
#mobile-basemap-sheet {
  animation: mobileSheetUp 0.2s ease-out;
  transform-origin: bottom center;
}

@keyframes mobileSheetUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile opacity slider popup — cùng animation */
#opacity-slider-mobile {
  animation: mobileSheetUp 0.2s ease-out;
}

/* Touch feedback — co lại khi nhấn */
#map-toolbar-mobile button:active {
  transform: scale(0.92);
  transition: transform 0.1s ease;
}


/* ═══════════════════════════════════════
   LOADING & SKELETON
   ═══════════════════════════════════════ */
@keyframes pulse-gentle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.loading-pulse,
.skeleton-pulse {
  animation: pulse-gentle 1.5s ease-in-out infinite;
}


/* ═══════════════════════════════════════
   TABLE — Sticky header + hover row
   ═══════════════════════════════════════ */
#pp-commune-tbody tr {
  transition: background-color 0.1s ease;
}

table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}


/* ═══════════════════════════════════════
   KBD — Phím tắt
   ═══════════════════════════════════════ */
kbd {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.dark kbd {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}


/* ═══════════════════════════════════════
   TỌA ĐỘ CON TRỎ — Góc trái dưới
   ═══════════════════════════════════════ */
#cursor-coords {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}


/* ═══════════════════════════════════════
   TOAST NOTIFICATION — Fade in
   ═══════════════════════════════════════ */
.toast-enter {
  animation: tooltipFadeIn 0.3s ease-out; /* Tái dùng keyframe có sẵn */
}


/* ═══════════════════════════════════════
   FOCUS — Accessible focus ring
   ═══════════════════════════════════════ */
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}


/* ═══════════════════════════════════════
   TEXT SELECTION — Màu chọn text
   ═══════════════════════════════════════ */
::selection {
  background: rgba(59, 130, 246, 0.25);
  color: inherit;
}

.dark ::selection {
  background: rgba(96, 165, 250, 0.3);
}


/* ═══════════════════════════════════════
   TIỆN ÍCH CHUNG
   ═══════════════════════════════════════ */
.transition-smooth {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dark .hover-lift:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════
   RESPONSIVE — Tablet (641px – 1024px)
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  #sidebar {
    position: fixed !important;
    top: 56px;
    left: 0;
    height: calc(100vh - 56px);
    z-index: 999;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
  }

  #province-panel {
    width: 100% !important;
    max-width: 420px;
  }

  #variable-panel {
    width: calc(100vw - 40px) !important;
    max-width: 520px;
  }
}


/* ═══════════════════════════════════════
   RESPONSIVE — Mobile (≤ 640px)
   ═══════════════════════════════════════ */
@media (max-width: 640px) {

  /* --- Header gọn --- */
  #main-header {
    height: 44px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #main-header h1 {
    font-size: 14px !important;
  }
  #main-header p {
    display: none !important;
  }

  #main-container,
  .main-container {
    height: calc(100vh - 44px) !important;
  }

  /* --- Sidebar: toàn màn hình overlay --- */
  #sidebar {
    position: fixed !important;
    top: 44px;
    left: 0;
    width: 100vw !important;
    height: calc(100vh - 44px);
    z-index: 600 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;   /* Không kéo trang phía sau */
    box-shadow: none;
  }
  #sidebar.open {
    transform: translateX(0);
  }

  /* --- Variable Panel: rộng gần 100% --- */
  #variable-panel {
    width: calc(100vw - 20px) !important;
    max-width: 100vw;
    left: 10px !important;
    font-size: 14px;
  }
  #variable-panel .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Province Panel: bottom sheet --- */
  #province-panel {
    width: 100vw !important;
    max-height: 70vh;
    bottom: 0;
    right: 0;
    top: auto !important;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  #province-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 8px auto 4px;
  }
  .dark #province-panel::before {
    background: #475569;
  }

  /* --- Color Legend: gọn + nằm trên mobile toolbar --- */
  #color-legend {
    width: calc(100vw - 20px) !important;
    min-width: auto !important;
    max-width: none !important;
    left: 10px !important;
    bottom: 68px !important;           /* Trên mobile toolbar (~60px) + gap */
    font-size: 10px;
    padding: 8px 12px !important;
    transform: none !important;        /* Bỏ translate(-50%) cho mobile */
  }
  #color-legend .legend-labels {
    font-size: 11px;
  }

  /* --- Desktop toolbar & zoom: ẩn (mobile dùng toolbar riêng) --- */
  #map-toolbar,
  #map-zoom-ctrl {
    display: none !important;
  }

  /* --- Scale bar: đẩy lên trên mobile toolbar --- */
  .leaflet-control-scale {
    margin-bottom: 60px !important;
  }

  /* --- Tọa độ con trỏ: ẩn (mobile không có mousemove) --- */
  #cursor-coords {
    display: none !important;
  }

  /* --- Province tooltip: ẩn (mobile dùng tap) --- */
  #province-tooltip {
    display: none !important;
  }

  /* --- Compare: xếp dọc --- */
  #compare-container {
    flex-direction: column !important;
  }
  #compare-left,
  #compare-right {
    width: 100% !important;
    height: 50vh !important;
  }
  #compare-divider {
    width: 100% !important;
    height: 6px !important;
    cursor: row-resize !important;
  }

  /* --- Touch target tối thiểu 44px --- */
  button,
  .btn,
  select,
  input[type="range"] {
    min-height: 44px;                 /* Apple HIG: 44pt */
  }

  /* --- Nav: ẩn text, chỉ giữ icon --- */
  .nav-btn span:last-child {
    display: none !important;
  }
  .leaflet-bottom.leaflet-right {
    bottom: 60px !important;       /* Trên mobile toolbar (~60px) */
  }
  /* --- Attribution: siêu gọn --- */
   .leaflet-control-attribution {
    font-size: 9px !important;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
     bottom: 100px !important;
  }
}


/* ═══════════════════════════════════════
   PRINT — Ẩn UI khi in
   ═══════════════════════════════════════ */
@media print {
  #main-header,
  #sidebar,
  #map-toolbar,
  #map-toolbar-mobile,
  #map-zoom-ctrl,
  #province-panel,
  #province-tooltip,
  #cursor-coords,
  .modal-overlay,
  .leaflet-control-attribution,
  .leaflet-control-scale {
    display: none !important;
  }

  #map {
    position: static !important;
    width: 100% !important;
    height: 600px !important;
  }

  #color-legend {
    position: static !important;
    transform: none !important;
    margin: 16px auto;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  body {
    background: white !important;
  }
}