/* Basic layout tweaks */
:root {
  --font-thai-sarabun: "TH Sarabun New", "Sarabun", "Noto Sans Thai", sans-serif;
  
  /* Enhanced color system */
  --primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --surface-gradient: linear-gradient(to bottom right, #ffffff, #f8fafc);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.18);
  
  /* Modern shadows */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.dark {
  --surface-gradient: linear-gradient(to bottom right, #0f172a, #1e293b);
  --glass-bg: rgba(30, 41, 59, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
}

html,
body,
input,
textarea,
select,
button {
  font-family: var(--font-thai-sarabun);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--surface-gradient);
  transition: background 0.3s ease;
}

/* Enhanced Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Map enhancements */
#map { 
  position: relative; 
  z-index: 1;
  min-height: 360px;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#map:hover {
  box-shadow: var(--shadow-large);
}

/* Map container with glow effect */
.map-container {
  position: relative;
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sidepanel improvements */
.sidepanel { 
  min-width: 0; 
  width: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass { 
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--glass-border);
}

.dark .glass { 
  background: var(--glass-bg);
}

/* Enhanced buttons */
.btn { 
  @apply px-3 py-2 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn:active {
  transform: translateY(0);
}

/* Badge improvements */
.badge { 
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.badge:hover {
  transform: scale(1.05);
}

/* Enhanced spinner */
.spin {
  border: 3px solid rgba(15,157,88,0.15);
  border-left-color: #0f9d58;
  border-radius: 9999px;
  width: 24px; 
  height: 24px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { 
  to { 
    transform: rotate(360deg);
  } 
}

/* Enhanced active states with animations */
.region-item-active {
  background: rgba(15, 157, 88, 0.16) !important;
  box-shadow: inset 0 0 0 2px rgba(15, 157, 88, 0.45), 0 4px 12px rgba(15, 157, 88, 0.15);
  font-weight: 600;
  transform: translateX(4px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .region-item-active {
  background: rgba(15, 157, 88, 0.3) !important;
}

.province-item-active,
.district-item-active {
  background: rgba(15, 157, 88, 0.12) !important;
  box-shadow: inset 0 0 0 2px rgba(15, 157, 88, 0.4), 0 2px 8px rgba(15, 157, 88, 0.12);
  font-weight: 600;
  transform: translateX(4px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .province-item-active,
.dark .district-item-active {
  background: rgba(15, 157, 88, 0.24) !important;
}

/* Enhanced back button */
.list-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #0f9d58;
  border: 1px solid rgba(15, 157, 88, 0.35);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(15, 157, 88, 0.08);
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-back-btn:hover {
  background: rgba(15, 157, 88, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 157, 88, 0.15);
}

.list-back-btn:active {
  transform: translateY(0);
}

/* Enhanced tooltip */
.leaflet-tooltip.selected-area-label {
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3), 0 0 16px rgba(16, 185, 129, 0.15);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  backdrop-filter: blur(8px);
  animation: tooltipIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.leaflet-tooltip.selected-area-label::before {
  display: none;
}

/* Enhanced KPI sticky section */
.kpi-sticky {
  position: sticky;
  top: var(--kpi-sticky-top, 0.25rem);
  z-index: 15;
  padding: 0.5rem;
  margin: 0;
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.kpi-sticky.kpi-stuck {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(120deg, rgba(224, 242, 254, 0.96), rgba(220, 252, 231, 0.95));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18), 0 0 20px rgba(16, 185, 129, 0.1);
  transform: translateY(-2px);
}

.dark .kpi-sticky {
  border-color: rgba(100, 116, 139, 0.3);
  background: rgba(15, 23, 42, 0.9);
}

.dark .kpi-sticky.kpi-stuck {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(120deg, rgba(15, 23, 42, 0.95), rgba(20, 83, 45, 0.85));
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.55), 0 0 24px rgba(16, 185, 129, 0.15);
}

/* KPI Card enhancements */
[data-kpi] {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-kpi]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-kpi]:hover::before {
  transform: scaleX(1);
}

[data-kpi]:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-large);
  border-color: rgba(16, 185, 129, 0.3);
}

/* Icon animations */
[data-kpi] [aria-hidden="true"] {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-kpi]:hover [aria-hidden="true"] {
  transform: scale(1.1) rotate(5deg);
}

/* Layer switch buttons */
[data-layer-switch] {
  position: relative;
  overflow: hidden;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}

[data-layer-switch] span {
  gap: 0.375rem;
}

[data-layer-switch] svg {
  width: 0.875rem;
  height: 0.875rem;
}

[data-layer-switch].active {
  background: var(--primary-gradient);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-layer-switch]:not(.active):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
  border-color: rgba(16, 185, 129, 0.3);
}

/* Select inputs enhancement */
select {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

select:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Filter section enhancement */
#filter-sticky {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0.75rem 1rem; /* Compact padding */
}

/* Compact Filter Styles */
#filter-sticky .flex.flex-col {
  gap: 0.5rem;
}

#filter-sticky h1 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  margin-top: 0.25rem;
}

#filter-sticky .text-sm.text-slate-500 {
  font-size: 0.75rem;
  margin-bottom: 0.125rem;
}

#active-filters {
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

#active-filters svg {
  width: 0.875rem;
  height: 0.875rem;
}

#filter-controls {
  margin-top: 0.5rem;
}

#filter-controls > div:first-child {
  gap: 0.375rem;
  padding-bottom: 0.25rem;
}

#filter-controls select {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

#filter-controls label {
  font-size: 0.8125rem;
}

#filter-controls > div:last-child {
  gap: 0.375rem;
  padding-bottom: 0.25rem;
}

#filters-reset-btn {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}

#filters-reset-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

#breadcrumb {
  font-size: 0.8125rem;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

#filter-toggle-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

#filter-toggle-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Charts animation */
#charts-section > div {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

#charts-section > div:nth-child(1) { animation-delay: 0.1s; }
#charts-section > div:nth-child(2) { animation-delay: 0.2s; }
#charts-section > div:nth-child(3) { animation-delay: 0.3s; }

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

/* Chart cards hover effect */
.bg-white.rounded-2xl,
.dark .bg-slate-800.rounded-2xl {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-white.rounded-2xl:hover,
.dark .bg-slate-800.rounded-2xl:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-large);
}

/* Modal animation */
#breakdown {
  animation: fadeIn 0.2s ease-out;
}

#breakdown > div {
  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Backdrop blur */
#sidepanel-backdrop,
#breakdown {
  backdrop-filter: blur(4px);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 4px;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

.dark ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Loading state */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes popupIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.loading-popup {
  backdrop-filter: blur(8px) saturate(160%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  animation: popupIn 0.2s ease-out;
}

/* Breadcrumb separator */
#breadcrumb span:not(:last-child)::after {
  content: '›';
  margin-left: 0.5rem;
  opacity: 0.5;
}

/* Tab button styles */
#tab-hosp,
#tab-doc {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#tab-hosp.active,
#tab-doc.active {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transform: translateY(-2px);
}

/* Responsive breakpoints */
@media (min-width: 640px) {
  #map { min-height: 460px; }
  
  #filter-sticky {
    padding: 0.875rem 1.25rem;
  }
  
  #filter-sticky h1 {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  #map { min-height: 620px; }
  .sidepanel { min-width: 320px; }
}

@media (max-width: 640px) {
  .kpi-sticky {
    position: static;
    top: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
  }
  
  /* Adjust animations for mobile */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode specific enhancements */
.dark {
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Print styles */
@media print {
  .kpi-sticky,
  #filter-sticky,
  [data-layer-switch],
  button {
    display: none !important;
  }
  
  #map,
  .chart-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}