/* Vertair GCS — Components: buttons, badges, telemetry, controls, waypoints, delivery, fleet, stream */

/* BUTTONS */
.btn { font-size:12px; font-weight:500; padding:7px 14px; border-radius:var(--radius); transition:all var(--ease); display:inline-flex; align-items:center; gap:6px; }
.btn-white { background:var(--text); color:var(--text-inverse); }
.btn-white:hover { background:#ccc; }
.btn-outline { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-outline:hover { color:var(--text); border-color:var(--border-light); background:var(--bg-hover); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { background:#d63a33; }
.btn-ghost { color:var(--text-muted); padding:4px 8px; font-size:11px; }
.btn-ghost:hover { color:var(--text); background:var(--bg-hover); }
.btn-sm { font-size:11px; padding:5px 10px; }

/* BADGE */
.badge { font-size:10px; font-weight:600; padding:2px 7px; border-radius:4px; display:inline-flex; align-items:center; gap:3px; letter-spacing:.02em; }
.badge-online { background:var(--green-bg); color:var(--green); }
.badge-offline { background:var(--red-bg); color:var(--red); }
.badge-armed { background:var(--red-bg); color:var(--red); }
.badge-disarmed { background:var(--green-bg); color:var(--green); }
.badge-mode { background:var(--accent-bg); color:var(--text-secondary); border:1px solid var(--border); }
.badge-state { background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); }
.badge-state.en-route,.badge-state.climbing,.badge-state.takeoff { color:var(--blue); background:var(--blue-bg); }
.badge-state.descending,.badge-state.winch-deploy,.badge-state.winch-retract { color:var(--yellow); background:var(--yellow-bg); }
.badge-state.landed { color:var(--green); background:var(--green-bg); }
.badge-state.rtl,.badge-state.preflight { color:var(--text-secondary); }

/* TELEMETRY */
.telem-section { margin-bottom:14px; }
.telem-section-title { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.telem-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.telem-item { display:flex; flex-direction:column; gap:1px; }
.t-label { font-size:9px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.t-value { font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--text); }
.t-value-lg { font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--text); }
.telem-item.full-width { grid-column:1/-1; }

/* STATUS LINE */
.last-seen { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; padding:6px 10px; border-radius:var(--radius); margin-bottom:10px; }
.last-seen.online { background:var(--green-bg); color:var(--green); }
.last-seen.offline { background:var(--red-bg); color:var(--red); }
.last-seen-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }

.armed-banner { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:var(--radius); margin-bottom:10px; border:1px solid var(--border); }
.armed-banner.armed { background:var(--red-bg); border-color:rgba(248,81,73,.2); }
.armed-banner.disarmed { background:var(--bg-surface); }

/* BATTERY BAR */
.bat-bar-wrap { width:100%; height:4px; background:var(--bg); border-radius:2px; overflow:hidden; margin-top:4px; }
.bat-bar { height:100%; border-radius:2px; transition:width 500ms ease; }
.bat-bar.high { background:var(--green); }
.bat-bar.mid { background:var(--yellow); }
.bat-bar.low { background:var(--red); }

/* HEALTH */
.health-row { display:flex; flex-wrap:wrap; gap:4px; }
.health-badge { font-size:9px; font-weight:600; padding:2px 6px; border-radius:3px; letter-spacing:.02em; }
.health-badge.ok { background:var(--green-bg); color:var(--green); }
.health-badge.fail { background:var(--red-bg); color:var(--red); }
.health-badge.warn { background:var(--yellow-bg); color:var(--yellow); }

/* CONTROL GRID */
.control-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:14px; }
.ctrl-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:14px 8px; border-radius:var(--radius); background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); transition:all var(--ease); cursor:pointer; }
.ctrl-btn:hover { background:var(--bg-hover); border-color:var(--border-light); color:var(--text); }
.ctrl-btn .c-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.ctrl-btn.estop { background:var(--red-bg); border-color:rgba(248,81,73,.2); color:var(--red); }
.ctrl-btn.estop:hover { background:var(--red); color:#fff; }

/* MAV CONSOLE */
.mav-console { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:8px; max-height:180px; overflow-y:auto; font-family:var(--font-mono); font-size:10px; line-height:1.7; color:var(--green); }
.mav-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mav-ts { color:var(--text-muted); margin-right:6px; }

/* WAYPOINT TABLE */
.wp-table { width:100%; border-collapse:collapse; font-size:12px; }
.wp-table th { font-size:9px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); }
.wp-table td { padding:6px 8px; border-bottom:1px solid var(--border); color:var(--text-secondary); font-family:var(--font-mono); font-size:11px; }
.wp-table tr:hover td { background:var(--bg-hover); }
.wp-table .wp-done td { color:var(--text-muted); text-decoration:line-through; }
.wp-table .wp-current td { color:var(--green); font-weight:600; }
.wp-table .wp-cmd { font-family:var(--font); font-weight:500; }

/* MISSION CARD */
.mission-card { border:1px solid var(--border); border-radius:var(--radius); padding:14px; background:var(--bg-card); }
.mission-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.mission-id { font-family:var(--font-mono); font-size:12px; font-weight:700; }
.mission-address { font-size:12px; color:var(--text-secondary); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mission-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:8px; }
.mission-stat { text-align:center; }
.mission-stat .t-label { display:block; }
.mission-stat .t-value { display:block; }
.mission-actions { display:flex; gap:6px; margin-top:8px; }

/* PROGRESS BAR */
.progress-bar { display:flex; gap:2px; margin-bottom:8px; }
.progress-step { flex:1; height:3px; border-radius:2px; background:var(--border); }
.progress-step.done { background:var(--text); }
.progress-step.current { background:var(--text); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* PREFLIGHT */
.preflight-box { padding:8px 10px; border-radius:var(--radius); margin-bottom:8px; font-size:11px; }
.preflight-box.errors { background:var(--red-bg); color:var(--red); border:1px solid rgba(248,81,73,.2); }
.preflight-box.warnings { background:var(--yellow-bg); color:var(--yellow); border:1px solid rgba(210,153,34,.2); }
.preflight-box ul { list-style:none; }
.preflight-box li::before { content:"- "; }

/* ADDRESS INPUT */
#address-input,.addr-input { width:100%; padding:8px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); font-size:12px; color:var(--text); }
#address-input::placeholder,.addr-input::placeholder { color:var(--text-muted); }
#address-input:focus,.addr-input:focus { border-color:var(--text-secondary); }
.dropdown { position:absolute; left:0; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); max-height:200px; overflow-y:auto; z-index:100; margin-top:4px; }
.dropdown-item { padding:8px 12px; font-size:12px; color:var(--text-secondary); cursor:pointer; border-bottom:1px solid var(--border); }
.dropdown-item:hover { background:var(--bg-hover); color:var(--text); }
.dropdown-item:last-child { border-bottom:none; }

/* DRONE ROW */
.drone-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:var(--radius); cursor:pointer; transition:background var(--ease); margin-bottom:2px; }
.drone-row:hover { background:var(--bg-hover); }
.drone-row.active { background:var(--accent-bg); }
.drone-row-left { display:flex; align-items:center; gap:8px; }
.drone-row-id { font-family:var(--font-mono); font-size:12px; font-weight:600; }
.drone-row-right { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-secondary); }

/* WEATHER */
.weather-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.weather-item { text-align:center; }
.weather-val { font-family:var(--font-mono); font-size:14px; font-weight:600; }
.weather-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }

/* FLIGHT CONDITIONS */
.conditions-row { display:flex; flex-wrap:wrap; gap:6px; }
.condition-badge { font-size:11px; font-weight:600; padding:4px 10px; border-radius:4px; }
.condition-badge.good { background:var(--green-bg); color:var(--green); }
.condition-badge.caution { background:var(--yellow-bg); color:var(--yellow); }
.condition-badge.bad { background:var(--red-bg); color:var(--red); }

/* DELIVERY ROW */
.delivery-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:12px; }
.delivery-row:last-child { border-bottom:none; }
.delivery-id { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text-muted); margin-right:8px; }
.delivery-addr { color:var(--text-secondary); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:8px; }

/* DELIVERY COMMAND TIMELINE */
.cmd-timeline { padding:4px 0; }
.cmd-step { display:flex; align-items:flex-start; position:relative; padding-left:28px; min-height:36px; }
.cmd-step:last-child .cmd-line { display:none; }
.cmd-dot {
  position:absolute; left:8px; top:3px;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--border);
  background:var(--bg-card);
  z-index:1;
}
.cmd-step.done .cmd-dot { background:var(--text); border-color:var(--text); }
.cmd-step.current .cmd-dot { background:var(--green); border-color:var(--green); animation:pulse 1.5s infinite; }
.cmd-line {
  position:absolute; left:12px; top:15px; bottom:-2px;
  width:2px; background:var(--border);
}
.cmd-step.done .cmd-line { background:var(--text-muted); }
.cmd-info { flex:1; }
.cmd-label { font-size:12px; font-weight:500; color:var(--text); }
.cmd-step.pending .cmd-label { color:var(--text-muted); }
.cmd-detail { font-size:11px; color:var(--text-muted); margin-left:8px; font-family:var(--font-mono); }
.cmd-status { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; min-width:40px; text-align:right; }
.cmd-step.done .cmd-status { color:var(--green); }
.cmd-step.current .cmd-status { color:var(--blue); }

/* DELIVERY SETTINGS */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.setting-item { display:flex; flex-direction:column; gap:4px; }
.setting-label { font-size:11px; font-weight:500; color:var(--text-secondary); }
.setting-input-wrap { display:flex; align-items:center; gap:6px; }
.setting-input { width:80px; padding:6px 8px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font-mono); font-size:13px; color:var(--text); text-align:center; }
.setting-input:focus { border-color:var(--text-secondary); }
.setting-unit { font-size:11px; color:var(--text-muted); }

/* FLEET TABLE */
.fleet-table { width:100%; border-collapse:collapse; }
.fleet-table th { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:8px; border-bottom:1px solid var(--border); }
.fleet-table td { font-size:12px; padding:8px; border-bottom:1px solid var(--border); color:var(--text-secondary); }
.fleet-table tr:hover td { background:var(--bg-hover); cursor:pointer; }
.fleet-row-selected td { background:var(--accent-bg) !important; }

/* FLEET DETAIL */
.fleet-detail-section { margin-bottom:14px; }
.fleet-detail-label { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }

/* STREAM */
.stream-video-wrap { width:100%; aspect-ratio:16/9; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; position:relative; }
.stream-img { width:100%; height:100%; object-fit:contain; }
.stream-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; gap:8px; }
.stream-placeholder-text { font-size:13px; color:var(--text-muted); font-weight:500; }
.stream-placeholder-sub { font-size:11px; color:var(--text-muted); }

/* ANIMATED ROUTE LINE */
.animated-route {
  animation:dash-flow 1s linear infinite;
}
@keyframes dash-flow {
  to { stroke-dashoffset: -20; }
}

/* ZONE */
.zone-row { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:6px; background:var(--bg-card); }
.zone-row-info { display:flex; align-items:center; gap:8px; }
.zone-dot { width:10px; height:10px; border-radius:50%; }
.zone-dot.flight { background:var(--blue); }
.zone-dot.delivery { background:var(--green); }
.zone-dot.loading { background:var(--text); }

/* LOG */
.log-entry { padding:5px 8px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); }
.log-ts { color:var(--text-muted); margin-right:6px; }
.log-level { margin-right:6px; font-weight:600; }
.log-level.info { color:var(--blue); }
.log-level.warn { color:var(--yellow); }
.log-level.error { color:var(--red); }

/* WAYPOINT BUILDER */
.wp-builder { margin-bottom:10px; }
.wp-toolbar { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:10px; }
.wp-place-btn.wp-active { background:var(--blue-bg); border-color:rgba(88,166,255,.3); color:var(--blue); }
.wp-place-btn.wp-active:hover { background:var(--blue); color:#fff; }
.wp-hint { font-size:11px; color:var(--blue); background:var(--blue-bg); padding:6px 10px; border-radius:var(--radius); margin-bottom:10px; text-align:center; }
.wp-default-alt { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }

/* Plan row cards */
.wp-plan-list { margin-bottom:10px; }
.wp-plan-row { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; margin-bottom:6px; }
.wp-plan-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.wp-plan-seq { font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--blue); width:18px; text-align:center; flex-shrink:0; }
.wp-cmd-select { flex:1; padding:4px 6px; background:var(--bg-input); border:1px solid var(--border); border-radius:4px; font-size:11px; font-weight:600; color:var(--text); cursor:pointer; }
.wp-cmd-select:focus { border-color:var(--blue); outline:none; }
.wp-row-del { background:none; border:none; color:var(--text-muted); font-size:14px; font-weight:700; cursor:pointer; padding:2px 6px; border-radius:3px; flex-shrink:0; }
.wp-row-del:hover { color:var(--red); background:var(--red-bg); }
.wp-plan-fields { display:flex; gap:6px; flex-wrap:wrap; }
.wp-field { display:flex; flex-direction:column; gap:2px; flex:1; min-width:60px; }
.wp-field label { font-size:9px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.wp-coord-input { width:100%; padding:4px 6px; background:var(--bg-input); border:1px solid var(--border); border-radius:3px; font-family:var(--font-mono); font-size:11px; color:var(--text); }
.wp-coord-input:focus { border-color:var(--text-secondary); outline:none; }

/* Action buttons */
.wp-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.wp-write-btn { background:var(--blue-bg); border:1px solid rgba(88,166,255,.3); color:var(--blue); }
.wp-write-btn:hover { background:var(--blue); color:#fff; }
.wp-read-btn { background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); }
.wp-read-btn:hover { background:var(--bg-hover); color:var(--text); }
.wp-takeoff-btn { background:var(--green-bg); border:1px solid rgba(52,208,88,.3); color:var(--green); }
.wp-takeoff-btn:hover { background:var(--green); color:#fff; }

/* Status badges on active waypoints */
.wp-status-badge { font-size:9px; font-weight:600; padding:1px 5px; border-radius:3px; text-transform:uppercase; letter-spacing:.02em; }
.wp-st-done { background:var(--green-bg); color:var(--green); }
.wp-st-current { background:var(--blue-bg); color:var(--blue); }
.wp-st-pending { background:var(--bg-surface); color:var(--text-muted); border:1px solid var(--border); }

.planned-wp-marker { cursor:grab; }
.wp-placing { cursor:crosshair !important; }
.wp-placing * { cursor:crosshair !important; }

/* ANALYTICS DASHBOARD */
.analytics-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px; margin-top:12px;
}
.analytics-card {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; text-align:center;
}
.analytics-value {
  font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--text);
}
.analytics-label {
  font-size:10px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:0.04em; margin-top:4px;
}
.daily-bars {
  display:flex; align-items:flex-end; gap:3px;
  height:120px; padding:10px 0;
}
.daily-bar-wrap {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%;
}
.daily-bar {
  width:100%; min-width:8px; background:var(--blue); border-radius:2px 2px 0 0;
  transition:height 0.3s;
}
.daily-bar-label {
  font-size:8px; color:var(--text-muted); margin-top:4px;
  white-space:nowrap; transform:rotate(-45deg); transform-origin:top left;
}
.recent-flights-list { margin-top:10px; }
.recent-flight-row {
  display:flex; gap:8px; align-items:center;
  padding:8px 10px; border-bottom:1px solid var(--border);
  font-size:12px;
}
.recent-flight-row:last-child { border-bottom:none; }
.rf-id { font-weight:600; min-width:60px; }
.rf-drone { color:var(--text-secondary); min-width:70px; }
.rf-dist { font-family:var(--font-mono); min-width:50px; }
.rf-time { font-family:var(--font-mono); min-width:40px; }
.rf-bat { font-family:var(--font-mono); min-width:40px; color:var(--yellow); }
.rf-date { color:var(--text-muted); margin-left:auto; font-size:11px; }

/* WEATHER ABORT BANNER */
.weather-abort-banner {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; margin:0 0 12px 0;
  background:var(--red-bg); color:var(--red);
  border:1px solid rgba(248,81,73,.25); border-radius:var(--radius);
  font-size:12px; font-weight:600;
}
.weather-abort-banner svg { flex-shrink:0; }
.weather-abort-inline {
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; margin-bottom:8px;
  background:var(--red-bg); color:var(--red);
  border:1px solid rgba(248,81,73,.2); border-radius:var(--radius);
  font-size:11px; font-weight:500;
}

/* FLEET CAMERA MINI */
.fleet-camera-mini {
  width:100%; aspect-ratio:16/9; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; margin-bottom:10px;
}
.fleet-camera-mini img { width:100%; height:100%; object-fit:contain; }
.fleet-camera-placeholder {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; width:100%; height:100%; gap:6px;
  font-size:11px; color:var(--text-muted);
}

.empty-msg { text-align:center; padding:24px 16px; font-size:12px; color:var(--text-muted); }

.text-green { color:var(--green); }
.text-red { color:var(--red); }
.text-yellow { color:var(--yellow); }
.text-blue { color:var(--blue); }

/* INLINE TELEM GRID */
.dash-telem { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-top:10px; }
.dash-telem-item { display:flex; flex-direction:column; gap:1px; }
.dash-telem-item .t-label { font-size:9px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.dash-telem-item .t-value { font-family:var(--font-mono); font-size:13px; font-weight:600; }

/* SEARCH WRAP */
.search-wrap { position:relative; margin-bottom:12px; }

/* NAV ICON SVG SIZING */
.nav-icon { width:24px; text-align:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nav-icon svg { display:block; }