/* ============================================================
   Airo Mobile — native-app screen styles, used across the whole app:
   login, 2FA setup/verify, projects, clusters, map, bottom sheet.
   Derived from the airo-mobile_1.html design reference, ConnectUAV brand
   (gold #DBC078 / navy #1D2E4F — same tokens as frontend/assets/app.css).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #0A0E13;
  --surface: #121820;
  --surface-2: #1A222C;
  --surface-3: #212B36;
  --border: #26313D;
  --border-soft: #1E2833;
  --text: #EAF0F5;
  --text-dim: #8A98A6;
  --text-faint: #55616D;

  --gold: #DBC078;
  --gold-dim: #695C3A;
  --navy: #1D2E4F;
  --blue: #3B9EFF;

  --status-uncaptured: #C9CDD4;
  --status-captured: #19BE6B;
  --status-uploaded: #60a5fa;
  --status-inaccessible: #E23C39;
  --status-reattempt: #dbc078;

  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Inter', -apple-system, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; margin:0; overscroll-behavior:none; }
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  display:flex; justify-content:center; -webkit-font-smoothing:antialiased;
}

#app{
  width:100%; max-width:460px; height:100vh; height:100dvh;
  position:relative; overflow:hidden; background:var(--bg);
  box-shadow:0 0 60px rgba(0,0,0,0.4);
}

.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--bg); transform:translateX(100%); transition:transform 0.32s cubic-bezier(.2,.9,.3,1);
  opacity:0; pointer-events:none;
}
.screen.active{ transform:translateX(0); opacity:1; pointer-events:auto; z-index:2; }

.btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:14px 10px; border-radius:12px; border:1px solid var(--border);
  font-size:14px; font-weight:700; background:var(--surface-2); color:var(--text);
  cursor:pointer;
}
.btn:active{ transform:scale(0.97); }
.btn.primary{ background:var(--gold); color:#1A1200; border-color:var(--gold); }
.btn.block{ width:100%; }
.btn.disabled{ opacity:0.4; pointer-events:none; }
.icon{ width:16px; height:16px; flex:none; }

/* ── Login / 2FA ─────────────────────────────────────────────────────── */
.brand-mark{
  width:28px; height:28px; border-radius:7px; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:13px; color:#0A0E13; flex:none;
}
.brand-logo{ display:block; margin:0 auto 18px; height:34px; width:auto; }

.auth-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:28px 26px; }
.login-hero{ text-align:center; margin-bottom:34px; }
.login-hero .brand-mark{ width:52px; height:52px; border-radius:14px; margin:0 auto 16px; font-size:22px; }
.login-hero h1{ font-size:20px; margin:0 0 6px; font-weight:800; letter-spacing:-0.01em; color:var(--text); }
.login-hero p{ font-size:13px; color:var(--text-dim); margin:0; }

.field{ margin-bottom:14px; }
.field label{ font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:7px; }
.field input{
  width:100%; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px;
  color:var(--text); font-family:var(--sans); font-size:15px; padding:13px 14px;
}
.field input:focus{ outline:none; border-color:var(--gold); }
.field .input-icon-wrap{ position:relative; }
.field .input-icon-wrap i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:16px; pointer-events:none; }
.field .input-icon-wrap input{ padding-left:38px; }

.error-msg{ background:rgba(226,60,57,0.1); border:1px solid rgba(226,60,57,0.3); border-radius:12px; padding:10px 14px; font-size:13px; color:var(--status-inaccessible); margin-bottom:14px; display:none; }
.success-msg{ background:rgba(25,190,107,0.1); border:1px solid rgba(25,190,107,0.3); border-radius:12px; padding:10px 14px; font-size:13px; color:var(--status-captured); margin-bottom:14px; display:none; text-align:center; }

.code-row-wrap{ position:relative; margin:26px 0 18px; }
.code-row{ display:flex; gap:8px; justify-content:center; }
.code-box{ width:42px; height:52px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:22px; font-weight:700; color:var(--text); }
.code-box.filled{ border-color:var(--gold); }
.code-hidden-input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; margin:0; font-size:16px; text-align:center; }
.resend{ text-align:center; font-size:12.5px; color:var(--text-dim); margin-top:4px; }
.resend b{ color:var(--gold); font-weight:600; cursor:pointer; }

.back-link{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--text-dim); cursor:pointer; margin-bottom:14px; }
.back-link:active{ opacity:0.7; }

.qr-box{ background:#fff; border-radius:14px; padding:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; width:180px; height:180px; }
.manual-key{ text-align:center; margin-bottom:20px; }
.manual-key .label{ font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.manual-key code{ font-family:var(--mono); font-size:12.5px; color:var(--gold); word-break:break-all; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:8px; padding:6px 10px; display:inline-block; }

.app-header{ padding:calc(var(--safe-top) + 12px) 18px 4px; display:flex; align-items:center; justify-content:space-between; }
.header-title{ font-size:19px; font-weight:800; letter-spacing:-0.01em; }
.header-sub{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.back-chip{ width:34px; height:34px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.logout-chip{ font-size:11px; color:var(--text-faint); font-weight:600; cursor:pointer; }
.account-chip{ display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:20px; border:1px solid var(--border); background:var(--surface); font-size:12px; font-weight:600; color:var(--text); cursor:pointer; }

.list-wrap{ flex:1; overflow-y:auto; padding:14px 18px calc(var(--safe-bottom) + 18px); }
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--text-faint); font-size:13px; }
.proj-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; padding:16px; margin-bottom:12px; cursor:pointer; }
.proj-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.proj-name{ font-size:15.5px; font-weight:700; }
.proj-loc{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.proj-pct{ font-family:var(--mono); font-size:16px; font-weight:700; color:var(--status-captured); }
.proj-track{ height:5px; border-radius:3px; background:var(--surface-2); margin-top:12px; overflow:hidden; }
.proj-track .fill{ height:100%; background:var(--status-captured); }
.proj-meta{ display:flex; gap:14px; margin-top:10px; font-size:11px; color:var(--text-faint); font-family:var(--mono); }

.cluster-card{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:13px 14px; margin-bottom:10px; cursor:pointer; }
.cluster-card.checked{ border-color:var(--gold); background:var(--surface-2); }
.checkbox{ width:22px; height:22px; border-radius:6px; border:1.5px solid var(--border); flex:none; display:flex; align-items:center; justify-content:center; }
.cluster-card.checked .checkbox{ background:var(--gold); border-color:var(--gold); color:#1A1200; }
.cluster-info{ flex:1; min-width:0; }
.cluster-name{ font-size:14px; font-weight:700; }
.cluster-sub{ font-size:11px; color:var(--text-faint); font-family:var(--mono); margin-top:2px; }
.cluster-pct{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text-dim); flex:none; }

.sticky-cta{ padding:12px 18px calc(var(--safe-bottom) + 14px); border-top:1px solid var(--border-soft); background:var(--bg); }

.map-header{ padding:calc(var(--safe-top) + 10px) 16px 8px; display:flex; align-items:center; justify-content:space-between; }
.conn{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.04em; padding:5px 9px 5px 7px; border-radius:20px; border:1px solid var(--border); background:var(--surface); }
.conn-dot{ width:6px; height:6px; border-radius:50%; }
.conn.online .conn-dot{ background:var(--status-captured); box-shadow:0 0 6px var(--status-captured); }
.conn.online{ color:var(--status-captured); }
.conn.offline .conn-dot{ background:var(--status-inaccessible); }
.conn.offline{ color:var(--status-inaccessible); border-color:#4A2323; }

.cluster-switch{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-dim); font-weight:600; cursor:pointer; }
.cluster-switch b{ color:var(--text); }

.header2{ padding:2px 16px 10px; }
.progress-strip{ margin-top:8px; }
.progress-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.progress-labels b{ color:var(--text); font-family:var(--mono); font-weight:600; }
.progress-track{ height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; display:flex; }
.progress-seg{ height:100%; }

.chips{ display:flex; gap:7px; padding:0 16px 12px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:none; display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:20px; border:1px solid var(--border); background:var(--surface); font-size:12px; font-weight:600; color:var(--text-dim); white-space:nowrap; cursor:pointer; }
.chip .n{ font-family:var(--mono); color:var(--text-faint); font-weight:500; }
.chip.active{ background:var(--surface-2); border-color:#3A4756; color:var(--text); }
.chip .swatch{ width:7px; height:7px; border-radius:50%; }

.search-row{ display:flex; align-items:center; gap:8px; padding:0 16px 10px; }
.search-icon-btn{ flex:none; width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.search-input-wrap{ flex:1; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:0 6px 0 12px; height:34px; }
.search-input-wrap input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-size:13px; font-family:var(--sans); height:100%; }
.search-input-wrap input::placeholder{ color:var(--text-faint); }
.search-cancel-btn{ flex:none; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:14px; cursor:pointer; }
.search-results{ margin:0 16px 10px; background:var(--surface); border:1px solid var(--border-soft); border-radius:12px; max-height:240px; overflow-y:auto; }
.search-result-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border-soft); cursor:pointer; }
.search-result-row:last-child{ border-bottom:none; }
.search-result-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.search-result-id{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); }
.search-result-cluster{ font-size:11px; color:var(--text-faint); margin-left:auto; text-align:right; }
.search-result-row.unselected-cluster .search-result-cluster{ color:var(--status-reattempt); }
.search-empty{ padding:14px; text-align:center; font-size:12px; color:var(--text-faint); }

.map-wrap{ flex:1; position:relative; overflow:hidden; background:#0D1319; }
#maplibre-map{ position:absolute; inset:0; width:100%; height:100%; }
.maplibregl-ctrl-attrib{ font-size:9px !important; background:rgba(10,14,19,0.7) !important; color:var(--text-faint) !important; }
.maplibregl-ctrl-attrib a{ color:var(--text-dim) !important; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right{ z-index:8; }

.pin{ display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.pin-dot{ width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid #0A0E13; box-shadow:0 2px 6px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.pin-dot::after{ content:''; width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,0.35); transform:rotate(45deg); }
.pin.selected .pin-dot{ width:26px; height:26px; box-shadow:0 0 0 5px rgba(219,192,120,0.28), 0 2px 8px rgba(0,0,0,0.6); }
.pin-label{ margin-top:2px; font-family:var(--mono); font-size:9.5px; font-weight:600; color:var(--text-dim); background:rgba(10,14,19,0.75); padding:1px 4px; border-radius:3px; letter-spacing:0.02em; }
/* Below the zoom threshold (see MAP_LABEL_MIN_ZOOM in home.html), poles show
   as colored dots only — labels collide/clutter once several poles are close
   together on screen. Toggled as one class on the map container rather than
   re-rendering pins on every zoom tick. */
.map-wrap.hide-pin-labels .pin-label{ display:none; }

/* Pilot's own live position — a maplibregl.Marker with anchor:'center', so this
   element itself doesn't need position:absolute (MapLibre positions the whole
   thing); ring+core are centered within it via their own absolute positioning. */
.me-dot{ position:relative; width:46px; height:46px; pointer-events:none; }
.me-dot .ring{ position:absolute; left:50%; top:50%; width:46px; height:46px; border-radius:50%; background:rgba(59,158,255,0.18); transform:translate(-50%,-50%); animation:ringpulse 2.2s ease-out infinite; }
.me-dot .core{ position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%; background:var(--blue); border:3px solid #0A0E13; transform:translate(-50%,-50%); box-shadow:0 0 8px rgba(59,158,255,0.7); }
@keyframes ringpulse{ 0%{ transform:translate(-50%,-50%) scale(0.5); opacity:0.9; } 100%{ transform:translate(-50%,-50%) scale(1.6); opacity:0; } }

.map-controls{ position:absolute; right:14px; top:14px; z-index:10; display:flex; flex-direction:column; gap:8px; }
.style-switch{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; display:flex; flex-direction:column; gap:3px; box-shadow:0 4px 14px rgba(0,0,0,0.4); }
.style-opt{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-dim); cursor:pointer; }
.style-opt.active{ background:var(--surface-3); color:var(--gold); }

.locate-btn{ position:absolute; right:14px; bottom:14px; z-index:10; width:44px; height:44px; border-radius:12px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.4); cursor:pointer; }
.cache-badge{ position:absolute; left:14px; top:14px; z-index:10; font-family:var(--mono); font-size:10px; font-weight:600; color:var(--text-dim); background:rgba(18,24,32,0.85); border:1px solid var(--border); padding:6px 9px; border-radius:9px; display:flex; align-items:center; gap:6px; max-width:170px; }

/* Non-blocking, survives screen navigation (direct child of #app, not .screen) */
.location-off-badge{ position:absolute; left:50%; bottom:calc(var(--safe-bottom) + 14px); transform:translateX(-50%); z-index:90; font-size:11px; font-weight:600; color:var(--status-reattempt); background:rgba(18,24,32,0.92); border:1px solid var(--border); padding:7px 12px; border-radius:20px; display:flex; align-items:center; gap:6px; box-shadow:0 4px 14px rgba(0,0,0,0.4); pointer-events:none; }

.scrim{ position:absolute; inset:0; background:rgba(0,0,0,0.5); z-index:40; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
.scrim.show{ opacity:1; pointer-events:auto; }
.sheet{ position:absolute; left:0; right:0; bottom:0; z-index:50; background:var(--surface); border-top:1px solid var(--border); border-radius:20px 20px 0 0; transform:translateY(100%); transition:transform 0.28s cubic-bezier(.2,.9,.3,1); padding-bottom:calc(var(--safe-bottom) + 16px); max-height:82%; display:flex; flex-direction:column; box-shadow:0 -10px 40px rgba(0,0,0,0.5); }
.sheet.show{ transform:translateY(0); }
.sheet-handle{ width:36px; height:4px; border-radius:3px; background:var(--border); margin:10px auto 4px; flex:none; }
.sheet-body{ overflow-y:auto; padding:14px 18px 4px; }
.sheet-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sheet-id{ font-family:var(--mono); font-size:19px; font-weight:700; letter-spacing:-0.01em; }
.sheet-cluster{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:0.02em; font-family:var(--mono); flex:none; margin-top:1px; }
.status-pill .d{ width:7px; height:7px; border-radius:50%; }
.sheet-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.stat-box{ background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px; padding:10px 12px; }
.stat-box .k{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }
.stat-box .v{ font-family:var(--mono); font-size:14px; margin-top:3px; font-weight:600; }
.field-label{ font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin:18px 0 8px; }
textarea.notes{ width:100%; min-height:78px; resize:vertical; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px; color:var(--text); font-family:var(--sans); font-size:13.5px; padding:11px 12px; line-height:1.45; }
textarea.notes:focus{ outline:none; border-color:var(--gold); }
textarea.notes:disabled{ opacity:0.6; }
.action-row{ display:flex; gap:9px; margin-top:16px; }
.btn.danger{ background:rgba(226,60,57,0.12); color:var(--status-inaccessible); border-color:#4A2323; flex:1; }
.btn.danger.active{ background:var(--status-inaccessible); color:#2A0B0B; }
.action-row .btn.primary{ flex:1; }
.save-bar{ padding:12px 18px 0; flex:none; }
.btn.save{ width:100%; background:var(--text); color:#0A0E13; padding:14px; border-radius:12px; }

.toast{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:10px 16px; border-radius:24px; font-size:12.5px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:60; opacity:0; pointer-events:none; transition:all 0.25s ease; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .d{ width:6px; height:6px; border-radius:50%; background:var(--status-captured); }

.loading-state{ text-align:center; padding:2rem 0; color:var(--text-faint); }