<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;
      z-index: 1 !important;
      transition: right 0.3s ease-in-out !important;
  }

  /* Desktop slideover behavior for map - default to sidebar open */
  @media (min-width: 1024px) {
      #aprs-map {
          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%;
  }
</style>

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