/* Global responsive hardening for all devices */
:root {
  --app-vh: 1vh;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  min-height: 100dvh;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  max-width: 100%;
}

table {
  width: 100%;
}

.overflow-x-auto,
[style*="overflow-x: auto"],
[style*="overflow-x:auto"] {
  -webkit-overflow-scrolling: touch;
}

/* Charts */
.recharts-responsive-container,
.recharts-wrapper,
.recharts-surface {
  max-width: 100% !important;
  min-width: 0 !important;
}

.recharts-legend-wrapper {
  max-width: 100% !important;
}

/* Maps */
.leaflet-container,
.leaflet-pane,
.leaflet-map-pane {
  max-width: 100% !important;
}

/* Avoid 100vh issues on mobile browsers */
@media (max-width: 1024px) {
  .h-screen {
    height: 100dvh !important;
  }

  .min-h-screen {
    min-height: 100dvh !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .leaflet-control-zoom {
    transform: scale(0.9);
    transform-origin: top left;
  }

  .leaflet-popup-content {
    max-width: 78vw;
  }

  .recharts-default-tooltip {
    max-width: min(90vw, 320px) !important;
    white-space: normal !important;
  }
}

@media (max-width: 430px) {
  aside[class*="fixed"][class*="w-64"] {
    width: min(18rem, 86vw) !important;
  }

  .leaflet-control-zoom {
    transform: scale(0.82);
  }
}