/*
 * BlueWaterIntel responsive/mobile overrides.
 * Desktop layout remains unchanged.
 */

:root {
  --mobile-touch-size: 44px;
  --mobile-map-height: 62svh;
  --mobile-panel-max-height: 42svh;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
  }

  /*
   * Common application shell names. Rules only activate on narrow screens.
   * Existing desktop class names continue to work.
   */
  .app,
  .app-shell,
  .dashboard,
  .dashboard-shell,
  .workspace,
  .main-layout,
  .layout,
  .content-layout,
  .map-layout,
  main {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-shell,
  .dashboard-shell,
  .workspace,
  .main-layout,
  .content-layout,
  .map-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  header,
  .header,
  .app-header,
  .topbar,
  .toolbar,
  .status-bar {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  header > *,
  .header > *,
  .app-header > *,
  .topbar > *,
  .toolbar > *,
  .status-bar > * {
    min-width: 0 !important;
  }

  #map,
  .map,
  .map-container,
  .leaflet-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #map,
  .map-container {
    height: var(--mobile-map-height) !important;
    min-height: 360px !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }

  .sidebar,
  .side-panel,
  .left-panel,
  .right-panel,
  .controls-panel,
  .layers-panel,
  .details-panel,
  .selected-panel,
  .info-panel,
  aside {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: var(--mobile-panel-max-height) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
  }

  .panel,
  .card,
  .control-group,
  .detail-section {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .detail-grid,
  .stats-grid,
  .summary-grid,
  .control-grid,
  .layer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  select,
  .button,
  .btn,
  label {
    min-height: var(--mobile-touch-size);
  }

  button,
  [role="button"],
  .button,
  .btn {
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /*
   * Make Leaflet controls and popups usable with fingers.
   */
  .leaflet-control-zoom a,
  .leaflet-control-layers-toggle {
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
  }

  .leaflet-control-container .leaflet-top {
    top: max(6px, env(safe-area-inset-top));
  }

  .leaflet-control-container .leaflet-left {
    left: max(6px, env(safe-area-inset-left));
  }

  .leaflet-control-container .leaflet-right {
    right: max(6px, env(safe-area-inset-right));
  }

  .leaflet-control-container .leaflet-bottom {
    bottom: max(6px, env(safe-area-inset-bottom));
  }

  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 36px) !important;
  }

  .leaflet-popup-content {
    width: auto !important;
    max-width: calc(100vw - 72px) !important;
    margin: 12px 14px !important;
    overflow-wrap: anywhere;
  }

  .leaflet-tooltip {
    max-width: calc(100vw - 30px);
    white-space: normal;
  }

  .vessel-icon {
    touch-action: manipulation;
  }

  /*
   * Prevent long vessel names, coordinates, URLs, and metadata from
   * forcing the page wider than the phone.
   */
  .detail-meta,
  .feature-popup,
  .vessel-popup,
  .selected-content,
  #selectedContent {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

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

@media (max-width: 600px) {
  :root {
    --mobile-map-height: 58svh;
    --mobile-panel-max-height: 46svh;
  }

  header,
  .header,
  .app-header,
  .topbar,
  .toolbar,
  .status-bar {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .detail-grid,
  .stats-grid,
  .summary-grid,
  .control-grid,
  .layer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #map,
  .map-container {
    min-height: 320px !important;
  }

  .leaflet-control-layers-expanded {
    max-width: calc(100vw - 28px);
    max-height: 55vh;
    overflow: auto;
  }

  .leaflet-popup-close-button {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
    line-height: 36px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  :root {
    --mobile-map-height: 72svh;
    --mobile-panel-max-height: 60svh;
  }

  #map,
  .map-container {
    min-height: 260px !important;
  }
}