/* === Mobile Patch (auto-generated) === */
:root {
    /* iOS safe area support */
    --safe-top: env(safe-area-inset-top);
    --safe-right: env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
}

/* Base resets for better mobile rendering */
html, body {
    height: 100%;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Map/Canvas containers fill the viewport minus safe areas */
#map, .map, .leaflet-container, canvas, .chart, #chart, #canvas {
    width: 100% !important;
    max-width: 100vw !important;
}
/* Use the --vh fix provided by JS below (sets 1vh = 1% of dynamic viewport height) */
.full-viewport, #map, .map, .leaflet-container, .app, .main, main {
    height: calc(var(--vh, 1vh) * 100 - var(--safe-top) - var(--safe-bottom)) !important;
}

header, .topbar, .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: max(8px, var(--safe-top));
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
    backdrop-filter: blur(6px);
}

footer, .bottombar, .bottom-sheet-trigger, .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding-bottom: max(8px, var(--safe-bottom));
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
}

/* Buttons: minimum touch area */
button, .btn, .chip, .pill, .toggle, .leaflet-control-zoom a {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    line-height: 1.2;
}

/* Inputs: avoid tiny fields on mobile */
input, select, textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
}

/* Side panels become bottom sheets on small screens */
@media (max-width: 768px) {
  .sidebar, .sidepanel, .drawer, .feed, .right-panel, .left-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    max-height: 70vh;
    height: auto;
    transform: translateY(0);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-bottom: max(12px, var(--safe-bottom));
    background: rgba(10,10,10,0.75);
    backdrop-filter: blur(10px);
    overflow: auto;
  }

  /* If panels were originally side-by-side, stack them */
  .layout, .grid, .columns, .container, .wrapper {
    display: block !important;
  }

  .col, .column, .left, .right, .pane {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Charts and tables scroll horizontally if needed */
  .charts, .tables, table, .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Typography scaling */
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.25rem; }
  h3, h4 { font-size: 1.1rem; }
  body, p, li, span { font-size: 0.98rem; }

  /* Reduce heavy shadows/borders for performance */
  .card, .panel, .widget, .box {
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
  }

  /* Keep the map visible behind overlays (glass effect) */
  .overlay, .menu, .modal-bg {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
  }
}

/* Leaflet controls better spacing on mobile */
.leaflet-control-container .leaflet-top.leaflet-left,
.leaflet-control-container .leaflet-top.leaflet-right {
  margin-top: calc(var(--safe-top) + 8px);
}

.leaflet-control-container .leaflet-bottom.leaflet-left,
.leaflet-control-container .leaflet-bottom.leaflet-right {
  margin-bottom: calc(var(--safe-bottom) + 8px);
}

/* Avoid overscroll bounce revealing white gaps */
body {
  overscroll-behavior-y: contain;
  background-color: #0b0f14;
  color: #e8ecf1;
}
/* Ensure images/logos scale nicely */
img, svg, video { max-width: 100%; height: auto; }

/* Utility to hide on mobile or desktop */
@media (max-width: 768px) { .hide-mobile { display: none !important; } }
@media (min-width: 769px) { .hide-desktop { display: none !important; } }