<style>
  /* Map-specific CSS styles */

  /* Ensure full height layout for map pages */
  html,
  body {
      height: 100%;
      margin: 0;
      padding: 0;
  }

  /* Main content container for map pages */
  main {
      height: 100vh;
      overflow: hidden;
  }

  #map {
      height: calc(100vh - 60px);
      /* Adjust based on header height */
      width: 100%;
  }

  /* Full page map for APRS home page and callsign pages */
  #aprs-map {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: 100vh !important;
      width: 100vw !important;
      z-index: 1 !important;
      transition: right 0.3s ease-in-out !important;
  }

  /* Desktop slideover behavior for map */
  @media (min-width: 1024px) {
      #aprs-map.slideover-open {
          right: 352px !important;
      }

      #aprs-map.slideover-closed {
          right: 0 !important;
      }
  }

  /* Mobile slideover behavior for map */
  @media (max-width: 1023px) {
      #aprs-map {
          right: 0 !important;
      }
  }

  /* Ensure the map container div has proper dimensions */
  .phx-main {
      position: relative;
      height: 100vh;
      overflow: hidden;
  }

  /* Fix for LiveView containers */
  div[data-phx-main="true"] {
      height: 100vh;
      overflow: hidden;
  }

  /* Hide header on home page */
  body.home-page header {
      display: none;
  }

  /* Adjust main content area for full page map */
  body.home-page main {
      padding: 0;
      max-width: none;
      height: 100vh;
  }

  body.home-page main > div {
      max-width: none;
      height: 100%;
  }

  /* Slideover toggle button styles */
  .slideover-toggle {
      position: fixed !important;
      right: 10px;
      top: 10px;
      z-index: 1001;
      background: white;
      border: 2px solid rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .slideover-toggle:hover {
      background: #f8fafc;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      transform: translateY(-1px);
  }

  .slideover-toggle:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* Hide toggle on desktop when slideover is open */
  @media (min-width: 1024px) {
      .slideover-toggle.slideover-open {
          display: none;
      }
  }

  /* Mobile toggle adjustments */
  @media (max-width: 1023px) {
      .slideover-toggle {
          right: 15px;
          top: 15px;
          padding: 12px;
          border-radius: 50%;
          width: 48px;
          height: 48px;
      }
  }

  /* Slideover panel responsive styles */
  .slideover-panel {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 352px;
      background: white;
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
  }

  /* Desktop slideover behavior */
  @media (min-width: 1024px) {
      .slideover-panel.slideover-open {
          transform: translateX(0);
      }

      .slideover-panel.slideover-closed {
          transform: translateX(100%);
      }
  }

  /* Mobile slideover behavior */
  @media (max-width: 1023px) {
      .slideover-panel {
          width: 100vw;
          max-width: 400px;
          box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
      }

      .slideover-panel.slideover-open {
          transform: translateX(0);
      }

      .slideover-panel.slideover-closed {
          transform: translateX(100%);
      }
  }

  /* Mobile panel improvements */
  @media (max-width: 1023px) {
      .slideover-panel {
          display: flex;
          flex-direction: column;
      }
  }

  /* Improve scrolling on mobile */
  @media (max-width: 1023px) {
      .slideover-panel {
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
      }

      .slideover-panel .flex-1 {
          min-height: 0;
      }
  }
</style>

<main>
  <div>
    <.flash kind={:info} title="Success!" flash={@flash} />
    <.flash kind={:error} title="Error!" flash={@flash} />
    <.flash
      id="disconnected"
      kind={:error}
      title="We can't find the internet"
      close={false}
      autoshow={false}
      phx-disconnected={show("#disconnected")}
      phx-connected={hide("#disconnected")}
    >
      Attempting to reconnect <Heroicons.arrow_path class="ml-1 w-3 h-3 inline animate-spin" />
    </.flash>
    {@inner_content}
  </div>
</main>
