/* Shared Mapa and trip-report controls. Native controls and existing actions form two vertical groups. */
.workspace, #nativeReports {
  --fleet-map-control-size: 44px;
  --fleet-map-control-inset: 16px;
  --fleet-map-controls-bottom: 16px;
  --fleet-map-control-shadow: 0 2px 12px #26374a1c;
}

/* Initial/fallback layout while MapLibre creates its native controls. */
.workspace > .map-actions {
  display: flex !important;
  flex-direction: column;
  width: var(--fleet-map-control-size);
  max-width: none;
  right: var(--fleet-map-control-inset);
  top: var(--fleet-map-control-inset);
}

:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right {
  top: var(--fleet-map-control-inset) !important;
  right: var(--fleet-map-control-inset) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-height: calc(100% - var(--fleet-map-control-inset) - var(--fleet-map-controls-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: auto;
  padding: 1px;
}

:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right > .maplibregl-ctrl { float: none; margin: 0; flex-shrink: 0; }
:is(.workspace,#nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right[data-control-layout]:not([data-control-layout='full']){gap:4px}
:is(.workspace,#nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right .maplibregl-ctrl-group:empty{display:none}
:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right .maplibregl-ctrl-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e4e9ef;
  border-radius: 12px !important;
  box-shadow: var(--fleet-map-control-shadow) !important;
}

:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right button,
.workspace > .map-actions > .icon-button {
  width: var(--fleet-map-control-size) !important;
  height: var(--fleet-map-control-size) !important;
  min-height: var(--fleet-map-control-size);
  padding: 0;
  border-radius: 0;
  color: #425466;
}
:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-group button + button { border-top: 1px solid #e4e9ef; border-left: 0; }
:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .icon-button[aria-pressed="true"] { color: #245fd8; background: #edf3ff; }
:is(.workspace, #nativeReports) .fleet-map-controls .icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A compact layers button opens the existing selector plus the 3D checkbox. */
:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .map-layer-button { position: relative; }
:is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .map-layer-button::before {
  content: ''; position: absolute; inset: 11px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425466' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 9-4 9 4-9 4-9-4Z M3 12l9 4 9-4 M3 17l9 4 9-4'/%3E%3C/svg%3E");
}
:is(.workspace, #nativeReports) .map-layer-options {
  position: fixed; inset: auto; width: 224px; max-width: calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;box-sizing:border-box;
  margin: 0; padding: 12px; border: 1px solid #e4e9ef; border-radius: 12px;
  background: white; color: #425466; box-shadow: 0 4px 20px #26374a33; font: 14px Arial, sans-serif;
}
:is(.workspace, #nativeReports) .map-layer-options .layer-control { display: flex; align-items: stretch; padding: 0; gap: 8px; font: inherit; }
:is(.workspace, #nativeReports) .map-layer-options .map-layer-label { font-size: 12px; font-weight: 600; }
:is(.workspace, #nativeReports) .map-layer-options select { width: 100%; min-width: 0; max-width: none; min-height: 44px; padding: 8px; font-size: 16px; }
:is(.workspace, #nativeReports) .map-3d-option { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; border-top: 1px solid #e4e9ef; cursor: pointer; }
:is(.workspace, #nativeReports) .map-3d-option input { width: 18px; height: 18px; margin: 0; accent-color: #245fd8; }
:is(.workspace,#nativeReports) .fleet-map-controls .map-extra-options{display:flex;flex-direction:column;float:none;width:100%;box-shadow:none!important;border-radius:0;background:transparent;margin:8px 0 0;border-top:1px solid #e4e9ef}
:is(.workspace,#nativeReports) .fleet-map-controls .map-extra-options:empty{display:none}
:is(.workspace,#nativeReports) .fleet-map-controls.fleet-map-controls .map-extra-options button{display:flex;align-items:center;gap:10px;width:100%!important;height:auto!important;min-height:44px;padding:8px!important;border:0;border-radius:6px;background:transparent;color:#425466;font:13px/1.3 Roboto,Arial,sans-serif;text-align:left}
:is(.workspace,#nativeReports) .fleet-map-controls .map-extra-options button:hover{background:#edf3ff}
:is(.workspace,#nativeReports) .fleet-map-controls .map-extra-options button::after{content:attr(data-map-action-label)}
:is(.workspace,#nativeReports) .fleet-map-controls .map-extra-options button :is(.maplibregl-ctrl-icon,svg){display:block;width:20px;height:20px;flex:0 0 20px}
/* Keep the vertical dock in the visible map area above the existing panels. */
.has-selection .workspace { --fleet-map-controls-bottom: 316px; }
@media (max-width: 960px) {
  #nativeReports { --fleet-map-control-inset: 12px; }
  .workspace { --fleet-map-control-inset: 12px; --fleet-map-controls-bottom: calc(46% + 16px); }
  :is(.workspace, #nativeReports) .fleet-map-controls.fleet-map-controls .maplibregl-ctrl-bottom-right {
    right: calc(var(--fleet-map-control-size) + var(--fleet-map-control-inset) + 8px) !important;
    max-width: calc(100% - var(--fleet-map-control-size) - var(--fleet-map-control-inset) - 24px);
  }
  body[data-sheet='0'] .workspace { --fleet-map-controls-bottom: 128px; }
  body[data-sheet='2'] .workspace { --fleet-map-controls-bottom: calc(80% + 16px); }
  .has-selection .workspace { --fleet-map-controls-bottom: 316px; }
  .history-open .workspace { --fleet-map-controls-bottom: calc(55% + 16px); }
}
body.map-expanded .workspace { --fleet-map-controls-bottom: 16px; }
/* Landscape phones have more useful space beside the list than above it. */
@media(min-width:600px) and (max-width:960px) and (max-height:450px){
  body:not(.map-expanded) .workspace{--fleet-map-controls-bottom:16px}
  body:not(.map-expanded) .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right{left:12px;right:auto!important}
  body:not(.map-expanded) .workspace :is(.units-panel,.history-panel){left:auto;right:5px;top:12px;bottom:5px;width:46%;height:auto!important;max-height:none}
  .workspace .units-panel>.mobile-handle{display:none}
}
.map-control-space{position:absolute;top:var(--fleet-map-control-inset);bottom:var(--fleet-map-controls-bottom);width:0;pointer-events:none}

/* Main-map immersive view. The shell stays mounted with its state intact. */
.map-restore-label { display: none; }
.map-expanded:not(.is-module-view) .fleet-shell-host { display: none; }
.map-expanded:not(.is-module-view) .workspace { margin-top: 0; height: 100dvh !important; }
.map-expanded .history-panel, .map-expanded .map-caption { display: none; }
.map-expanded .status-banner { top: 68px; }
.map-immersive-brand {
  position: absolute; z-index: 6;
  top: max(12px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: center;
  width: 112px; height: 44px; padding: 8px 12px;
  background: #ffffffed; border: 1px solid #cbd5e1;
  border-radius: 11px; box-shadow: 0 2px 8px #172b4d24;
  pointer-events: none;
}
.map-immersive-brand img { display: block; width: 88px; height: 28px; object-fit: contain; }
/* Reserve room to the left for the return label without moving its icon.
   The transparent part of the dock does not intercept map gestures. */
.map-expanded .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right {
  top: calc(var(--fleet-shell-height) + var(--fleet-map-control-inset)) !important;
  width: 120px; pointer-events: none;
  max-height: calc(100% - var(--fleet-shell-height) - var(--fleet-map-control-inset) - var(--fleet-map-controls-bottom));
}
.map-expanded .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right .maplibregl-ctrl-group {
  width: var(--fleet-map-control-size); box-sizing: content-box;
  overflow: visible; pointer-events: auto;
}
.map-expanded .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-group button:first-child { border-radius: 11px 11px 0 0; }
.map-expanded .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-group button:last-child { border-radius: 0 0 11px 11px; }
.map-expanded .workspace #expandButton#expandButton {
  width: 116px !important; margin-left: -72px;
  display: flex; flex-direction: row-reverse;
  color: white; background: #245fd8; border-top-color: #245fd8;
  border-radius: 11px 0 11px 11px;
  box-shadow: 0 2px 8px #173b7833;
}
.map-expanded .workspace #expandButton#expandButton:hover { background: #194fbf; }
.map-expanded .workspace #expandButton#expandButton svg { margin: 0 12px; }
.map-expanded .map-restore-label { display: block; flex: 1; font: 600 13px Roboto,Arial,sans-serif; }
.map-expanded .workspace .map-control-space{top:calc(var(--fleet-shell-height) + var(--fleet-map-control-inset))}
@media (max-height: 450px) {
  .map-expanded .workspace .map-control-space{top:var(--fleet-map-control-inset)}
  .map-expanded .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right {
    top: var(--fleet-map-control-inset) !important;
    max-height: calc(100% - 2 * var(--fleet-map-control-inset));
  }
}