/**
 * SatView — Mobile & PWA Responsive Styles
 * Breakpoints: 768px (tablet), 480px (phone)
 * Adds: bottom nav bar, touch-optimised panels, safe areas.
 */

/* ── Safe area insets (iPhone notch / Dynamic Island) ─────────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --mobile-nav-h: 56px;
}

/* ── Bottom Navigation Bar ────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--mobile-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(30,37,44,0.97);
  backdrop-filter: blur(12px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 5000;
  display: none;
}
.mobile-nav__items {
  display: flex;
  align-items: stretch;
  height: var(--mobile-nav-h);
}
.mobile-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: #6B7280;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.15s, background 0.15s;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav__item:active { background: rgba(255,255,255,0.05); }
.mobile-nav__item.active { color: #4FA8C9; }
.mobile-nav__item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: #4FA8C9;
  border-radius: 0 0 2px 2px;
}
.mobile-nav__icon { width: 22px; height: 22px; flex-shrink: 0; }
.mobile-nav__badge {
  position: absolute;
  top: 6px; right: calc(50% - 16px);
  min-width: 16px; height: 16px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* FAB for new action */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 16px);
  right: 16px;
  width: 52px; height: 52px;
  background: #4FA8C9;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 4999;
  box-shadow: 0 4px 16px rgba(79,168,201,0.4), 0 0 0 0 rgba(79,168,201,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mobile-fab:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(79,168,201,0.3); }

/* ── Global mobile layout ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Show bottom nav & FAB */
  .mobile-nav  { display: flex; flex-direction: column; }
  .mobile-fab  { display: flex; }

  /* Add bottom padding so content isn't hidden behind nav */
  .app-layout {
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
  }
  .app-map { padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom)); }

  /* Header: more compact */
  .app-header {
    padding: 0 10px;
    padding-top: var(--safe-top);
  }
  .app-header__brand-logo { display: none; }
  .app-header__divider    { display: none; }
  .app-header__logo span  { display: block; font-size: 15px; }

  /* Hide clock on small screens */
  .app-header__clock { display: none; }

  /* Ctrl+K hint in header — hide on mobile */
  #cmdPaletteBtn { display: none; }

  /* Sidebar: full-screen overlay with slide animation */
  .sidebar-wrapper {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 4500;
    width: 100% !important;
    min-width: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar-wrapper.mobile-open {
    display: flex;
    transform: translateX(0);
  }
  .app-sidebar {
    width: 100%;
    border-right: none;
  }
  .sidebar-resize-handle { display: none; }

  /* Touch-friendly list items — larger tap targets */
  .aoi-card { padding: 14px 12px; }
  .aoi-card__actions { gap: 10px; }
  .aoi-card__action { width: 32px; height: 32px; }

  /* Tools grid: 4 columns on mobile (smaller) */
  .sidebar-tools-grid { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .sidebar-tool-btn { padding: 6px 2px 5px; font-size: 9px; }

  /* Satellite list items */
  .satellite-item { min-height: 48px; }

  /* Modal overlays: full screen */
  .aoi-modal,
  .tasking-wizard-overlay .tasking-wizard {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Time control bar */
  .time-control-bar {
    width: calc(100vw - 20px);
    bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px);
    left: 10px; right: 10px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .time-control-bar__actions { flex-wrap: wrap; }

  /* Map controls: stack on right, avoid nav bar overlap */
  .leaflet-top.leaflet-right { top: 8px; }
  .leaflet-bottom.leaflet-right {
    bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px);
  }
  .leaflet-bottom.leaflet-left {
    bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px);
  }

  /* Layer switcher */
  .layer-switcher {
    top: auto;
    bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 60px);
    left: 10px;
  }

  /* Overlays that should be full screen */
  .cp-overlay { padding-top: 0; align-items: flex-end; }
  .cp-modal { border-radius: 20px 20px 0 0; width: 100vw; max-height: 80vh; }

  /* Vision panel: slide from bottom on mobile */
  .vision-panel {
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
  }
  .vision-panel--open { transform: translateY(0) !important; }

  /* Share dialog: full screen */
  .share-dlg { width: 100vw; border-radius: 20px 20px 0 0; position: absolute; bottom: 0; }
  .share-dlg-overlay { align-items: flex-end; }

  /* TSV overlay: full height */
  .tsv-overlay { padding: 0; align-items: flex-end; }
  .tsv-panel {
    width: 100vw !important;
    max-height: 95vh !important;
    border-radius: 20px 20px 0 0 !important;
    max-width: 100vw !important;
  }
  .tsv-compare { min-height: 220px; }

  /* Context menus: ensure visible on mobile */
  .aoi-ctx-menu { min-width: 180px; font-size: 14px; }
  .aoi-ctx-menu__item { padding: 11px 14px; }

  /* Mission planner: full screen */
  .mp-overlay { padding: 0; align-items: flex-end; }
  .mp-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 95vh !important;
    max-height: 95vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .mp-body { flex-direction: column; }
  .mp-budget-panel { width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); max-height: 200px; overflow-y: auto; }
}

/* ── Small phones ─────────────────────────────────────────────── */
@media (max-width: 380px) {
  .mobile-nav__item { font-size: 8px; }
  .mobile-nav__icon { width: 20px; height: 20px; }
  .app-header__logo span { font-size: 13px; }
  .sidebar-tools-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet (768–1024px): sidebar is narrower ─────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-sidebar { width: 240px; }
  .sidebar-wrapper { min-width: 240px; }
  .sidebar-tools-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== AI Vision Panel — slide from right (desktop) ============= */
.vision-panel {
  position: fixed;
  top: var(--header-height, 48px);
  right: 0;
  bottom: 0;
  width: min(400px, 94vw);
  background: #1e252c;
  border-left: 1px solid rgba(255,255,255,0.1);
  z-index: 40000;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
  overflow: hidden;
}
.vision-panel--open { transform: translateX(0); }
.vision-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.vision-panel__header-left { display: flex; align-items: center; gap: 8px; }
.vision-panel__title { font-size: 14px; font-weight: 700; color: #E8ECEF; }
.vision-close-btn { background: none; border: none; color: #6B7280; font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; }
.vision-close-btn:hover { color: #E8ECEF; }
.vision-panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.vision-preview-wrap { border-radius: 8px; overflow: hidden; background: #111518; min-height: 140px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vision-preview-img { width: 100%; max-height: 200px; object-fit: cover; display: block; }
.vision-preview-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; color: #4B5563; font-size: 12px; }
.vision-inputs { display: flex; flex-direction: column; gap: 10px; }
.vision-input-row { display: flex; flex-direction: column; gap: 4px; }
.vision-label { font-size: 11px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.06em; }
.vision-url-row { display: flex; gap: 6px; }
.vision-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #E8ECEF; font-size: 12px; padding: 8px 10px; outline: none; font-family: inherit; }
.vision-input:focus { border-color: rgba(79,168,201,0.5); }
.vision-url-row .vision-input { flex: 1; }
.vision-load-btn { flex-shrink: 0; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: #9CA3AF; font-size: 12px; padding: 0 12px; cursor: pointer; transition: all 0.12s; font-family: inherit; }
.vision-load-btn:hover { background: rgba(255,255,255,0.12); color: #E8ECEF; }
.vision-analyse-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, #4FA8C9, #357a96); border: none;
  border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700;
  padding: 10px 16px; cursor: pointer; transition: opacity 0.15s; font-family: inherit;
}
.vision-analyse-btn:hover { opacity: 0.88; }
.vision-analyse-btn:disabled { opacity: 0.5; cursor: default; }
/* Results */
.vision-results { display: flex; flex-direction: column; gap: 10px; }
.vision-loading { display: flex; align-items: center; gap: 10px; padding: 16px 0; color: #6B7280; font-size: 13px; }
.vision-spinner { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.1); border-top-color: #4FA8C9; border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
.vision-error { display: flex; align-items: center; gap: 8px; color: #EF4444; font-size: 12px; padding: 10px 0; }
.vision-scene-header { display: flex; align-items: center; justify-content: space-between; }
.vision-scene-type { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; background: rgba(79,168,201,0.15); color: #4FA8C9; border: 1px solid rgba(79,168,201,0.3); border-radius: 4px; padding: 2px 8px; }
.vision-confidence { font-size: 12px; font-weight: 700; }
.vision-description { font-size: 12px; line-height: 1.7; color: #C9D1D9; }
.vision-stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.vision-stat { display: flex; flex-direction: column; gap: 1px; }
.vision-stat__label { font-size: 9px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; color: #4B5563; }
.vision-stat__val { font-size: 11px; color: #9CA3AF; font-weight: 600; }
.vision-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 7px; padding: 10px 12px; }
.vision-section--alert { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.05); }
.vision-section__title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6B7280; margin-bottom: 7px; }
.vision-object-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.vision-object-label { flex: 1; color: #C9D1D9; font-weight: 500; }
.vision-object-count { color: #6B7280; }
.vision-object-conf { font-size: 10px; font-weight: 700; }
.vision-object-notes { font-size: 10px; color: #4B5563; font-style: italic; }
.vision-anomaly-item { font-size: 12px; color: #F59E0B; padding: 2px 0; }
.vision-assessment { font-size: 12px; line-height: 1.6; color: #C9D1D9; }
.vision-change { font-size: 12px; line-height: 1.6; color: #C9D1D9; }
.vision-rec-item { font-size: 12px; color: #9CA3AF; padding: 2px 0; line-height: 1.5; }
.vision-actions { display: flex; gap: 8px; padding-top: 4px; }
.vision-action-btn { flex: 1; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid rgba(79,168,201,0.4); background: rgba(79,168,201,0.12); color: #4FA8C9; transition: background 0.12s; }
.vision-action-btn:hover { background: rgba(79,168,201,0.22); }
.vision-action-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.12); color: #6B7280; }
.vision-action-btn--ghost:hover { background: rgba(255,255,255,0.07); color: #E8ECEF; }
.vision-action-btn:disabled { opacity: 0.5; cursor: default; }

/* ===== Mission Planner =========================================== */
.mp-overlay {
  position: fixed; inset: 0; z-index: 70000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.mp-overlay--visible { opacity: 1; pointer-events: all; }
.mp-panel {
  width: min(1300px, 98vw); height: min(82vh, 700px);
  background: #1A1F24; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  transform: translateY(-10px); transition: transform 0.18s;
}
.mp-overlay--visible .mp-panel { transform: translateY(0); }
.mp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0; gap: 10px; flex-wrap: wrap;
}
.mp-header__left { display: flex; align-items: center; gap: 10px; }
.mp-header__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-title-input { background: transparent; border: none; outline: none; font-size: 15px; font-weight: 700; color: #E8ECEF; font-family: inherit; min-width: 160px; }
.mp-title-input:focus { border-bottom: 1px solid rgba(79,168,201,0.4); }
.mp-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #E8ECEF; font-size: 12px; padding: 5px 8px; font-family: inherit; cursor: pointer; max-width: 180px; }
.mp-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid rgba(255,255,255,0.12); transition: all 0.12s; }
.mp-btn--ghost { background: transparent; color: #9CA3AF; }
.mp-btn--ghost:hover { background: rgba(255,255,255,0.07); color: #E8ECEF; }
.mp-btn--primary { background: #4FA8C9; border-color: #4FA8C9; color: #fff; }
.mp-btn--primary:hover { background: #3d95b5; }
.mp-btn--close { background: transparent; border: none; color: #6B7280; font-size: 20px; padding: 0 4px; cursor: pointer; }
.mp-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.mp-timeline-wrap { flex: 1; overflow: auto; overscroll-behavior: contain; position: relative; cursor: crosshair; }
.mp-canvas { display: block; }
.mp-windows { position: absolute; top: 0; left: 0; pointer-events: none; }
.mp-window {
  position: absolute; border-radius: 5px; cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); user-select: none;
}
.mp-window:active { cursor: grabbing; }
.mp-window__inner {
  display: flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 8px; overflow: hidden;
}
.mp-window__prio { font-size: 10px; flex-shrink: 0; }
.mp-window__label { font-size: 11px; font-weight: 600; color: #E8ECEF; flex-shrink: 0; }
.mp-window__cost { font-size: 10px; color: rgba(255,255,255,0.6); margin-left: auto; flex-shrink: 0; }
.mp-window__cost.free { color: #10B981; }
.mp-window__del { flex-shrink: 0; background: rgba(0,0,0,0.3); border: none; color: #9CA3AF; cursor: pointer; border-radius: 3px; width: 16px; height: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: background 0.1s; }
.mp-window__del:hover { background: rgba(239,68,68,0.4); color: #fff; }
.mp-window__resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(255,255,255,0.08); border-radius: 0 5px 5px 0; }
.mp-window__resize:hover { background: rgba(255,255,255,0.2); }
.mp-budget-panel {
  width: 200px; flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.mp-budget-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6B7280; }
.mp-budget-total { font-size: 24px; font-weight: 700; color: #4FA8C9; }
.mp-budget-total span { font-size: 11px; color: #6B7280; font-weight: 400; margin-left: 4px; }
.mp-budget-breakdown { display: flex; flex-direction: column; gap: 7px; }
.mp-budget-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mp-budget-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mp-budget-name { flex: 1; min-width: 0; color: #9CA3AF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-budget-val { color: #C9D1D9; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.mp-budget-summary { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; }
.mp-budget-summary-row { display: flex; justify-content: space-between; font-size: 11px; }
.mp-budget-summary-row span:first-child { color: #4B5563; }
.mp-budget-summary-row span:last-child { color: #9CA3AF; font-weight: 500; }
.mp-budget-clear-btn { width: 100%; padding: 7px; border-radius: 6px; border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); color: #EF4444; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s; }
.mp-budget-clear-btn:hover { background: rgba(239,68,68,0.18); }
.mp-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.mp-hint { font-size: 11px; color: #374151; font-style: italic; }
.mp-window-count { font-size: 11px; color: #6B7280; }