/* ============================================================
   air.alibaba.sk — globálne štýly (v3.3)
   ============================================================ */

:root {
  --bg:        #0f172a;
  --panel:     #1e293b;
  --border:    #334155;
  --text:      #e2e8f0;
  --text-dim:  #94a3b8;
  --accent:    #38bdf8;
  --accent-2:  #0ea5e9;
  --target:    #ef4444;
  --drone:     #3b82f6;
  --tth:       #eab308;
  --ok:        #16a34a;
  --warn:      #f59e0b;
  --err:       #dc2626;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-size: 13px; line-height: 1.4;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 8px 0; color: #f1f5f9; }
h1 { font-size: 17px; }
h3 { font-size: 12px; }

#main-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px; background: #0b1220;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 500;
}
#main-header h1 { display: inline-block; margin-right: 16px; }
.lang-switch { display: flex; gap: 4px; align-items: center; }
.lang-switch a {
  padding: 3px 8px; border-radius: 3px; border: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase;
}
.lang-switch a.active-lang { background: var(--accent); color: #0b1220; border-color: var(--accent); }
#live-clock {
  font-family: 'Consolas', monospace; font-size: 12px; color: var(--text-dim);
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 3px;
}

#modebar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 16px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
#modebar button {
  padding: 4px 12px; border-radius: 4px; border: 1px solid var(--border);
  background: #172033; color: var(--text); cursor: pointer;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
#modebar button:hover { background: #1f2b42; }
#modebar button.mode-active { background: var(--accent); color: #0b1220; border-color: var(--accent); }
#modebar .spacer { flex: 1; }
.mode-hint { color: var(--text-dim); font-size: 11px; max-width: 420px; line-height: 1.3; }

.step-help, .step-hint { margin: 0 0 8px; color: var(--text-dim); font-size: 12px; }
.param-line {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #0b1220; text-align: left; margin-bottom: 4px;
}
.param-line strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.param-row.open .param-line { border-color: var(--accent); }
.param-slider { display: none; padding: 0 2px 8px; }
#engage-add { width: 100%; margin: 6px 0; }
.contact-list ul { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--text-dim); }
.contact-list button { padding: 2px 6px; font-size: 11px; }
.param-row.open .param-slider { display: block; }
.step-card h3 { font-size: 13px; letter-spacing: 0; text-transform: none; }
#engage-run, #btn-edit-params { width: 100%; margin-bottom: 8px; }
#param-editor { display: flex; flex-direction: column; gap: 10px; }
#param-editor[hidden] { display: none; }
.verdict { padding: 8px; border-radius: 4px; border: 1px solid var(--border); line-height: 1.45; }
.verdict-wait { color: var(--text-dim); }
.verdict-ok { background: rgba(22, 163, 74, 0.15); border-color: var(--ok); color: #bbf7d0; }
.verdict-bad { background: rgba(220, 38, 38, 0.15); border-color: var(--err); color: #fecaca; }
#engage-tune, #user-manual { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
#engage-tune summary, #user-manual summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
#engage-tune summary::-webkit-details-marker, #user-manual summary::-webkit-details-marker { display: none; }
#engage-tune summary::before, #user-manual summary::before { content: '▸ '; }
#engage-tune[open] summary::before, #user-manual[open] summary::before { content: '▾ '; }
#engage-tune .panel { margin-top: 8px; }

.wrap { display: none; padding: 10px 14px; }
.wrap.active { display: block; }
#gen-wrap, #fc-wrap { padding: 0; }
#gen-wrap iframe, #fc-wrap iframe {
  width: 100%; height: calc(100vh - 100px);
  border: 0; display: block;
}

.sim-grid {
  display: grid;
  grid-template-columns: 320px 1fr 340px;
  gap: 10px; align-items: start;
}
.col-left, .col-center, .col-right {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
@media (max-width: 1200px) { .sim-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
}
.panel h3 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px; margin-bottom: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--accent);
}

label { display: block; margin-bottom: 7px; font-size: 12px; }
label > span { display: block; color: var(--text-dim); margin-bottom: 2px; font-size: 11px; }
input[type=number], input[type=text], select {
  width: 100%; padding: 4px 6px; background: #0b1220; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 12px;
}
input[type=range] { width: 100%; accent-color: var(--accent); }
input:focus, select:focus { outline: 1px solid var(--accent); }

button {
  padding: 5px 10px; background: #1f2b42; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; font-size: 12px; font-family: inherit;
  transition: box-shadow 0.2s, background 0.2s;
}
button:hover { background: #26354f; }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #0b1220; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-2); }
.btn-danger { background: #7f1d1d; border-color: #991b1b; }
.btn-danger:hover { background: #991b1b; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* AKTÍVNE TLAČIDLÁ — svietia a preblikávajú len v aktívnom stave */
button.btn-active { font-weight: 700; }
#btn-start.btn-active-pulse { animation: btn-pulse-run 1.05s ease-in-out infinite; }
#btn-pause.btn-active-pulse { animation: btn-pulse-pause 1.05s ease-in-out infinite; }
#btn-evasive.btn-active-pulse { animation: btn-pulse-evade 1.05s ease-in-out infinite; }
@keyframes btn-pulse-run {
  0%, 100% { background: #0284c7; color: #082f49; border-color: #38bdf8; box-shadow: 0 0 8px rgba(56,189,248,0.45); }
  50%      { background: #7dd3fc; color: #082f49; border-color: #e0f2fe; box-shadow: 0 0 18px rgba(125,211,252,0.95), 0 0 32px rgba(56,189,248,0.7); }
}
@keyframes btn-pulse-pause {
  0%, 100% { background: #b45309; color: #1c1405; border-color: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.45); }
  50%      { background: #fde68a; color: #1c1405; border-color: #fffbeb; box-shadow: 0 0 18px rgba(253,230,138,0.95), 0 0 32px rgba(251,191,36,0.7); }
}
@keyframes btn-pulse-evade {
  0%, 100% { background: #c2410c; color: #1c0a05; border-color: #fb923c; box-shadow: 0 0 8px rgba(251,146,60,0.45); }
  50%      { background: #fdba74; color: #1c0a05; border-color: #fff7ed; box-shadow: 0 0 18px rgba(253,186,116,0.95), 0 0 32px rgba(251,146,60,0.7); }
}
button.btn-flash { animation: btn-flash-anim 0.5s ease-out; }
@keyframes btn-flash-anim {
  0%   { box-shadow: 0 0 0   rgba(56,189,248,0); background: #1f2b42; }
  50%  { box-shadow: 0 0 24px rgba(56,189,248,0.9), 0 0 40px rgba(56,189,248,0.5); background: var(--accent); color: #0b1220; }
  100% { box-shadow: 0 0 0   rgba(56,189,248,0); background: #1f2b42; }
}

.profiles-bar { display: none; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.profiles-bar button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; font-size: 11px; }
.profiles-bar svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profiles-bar button strong { font-size: 13px; }
.profiles-bar button span { color: var(--text-dim); }
.profiles-bar button.is-on { border-color: var(--accent); color: var(--accent); }
body.mode-quick #seen-by-name { display: none; }
body.mode-quick .profiles-bar { display: grid; }

.speed-control-group { display: inline-flex; gap: 0; }
.speed-control-group .btn-speed {
  border-radius: 0; border-right-width: 0;
  padding: 4px 10px; font-size: 11px;
}
.speed-control-group .btn-speed:first-child { border-radius: 4px 0 0 4px; }
.speed-control-group .btn-speed:last-child  { border-radius: 0 4px 4px 0; border-right-width: 1px; }
.speed-control-group .btn-speed.active { background: var(--accent); color: #0b1220; }

#view-panel h3 { margin-bottom: 6px; }
#simulation-viewport-container {
  position: relative; width: 100%; height: 400px;
  background: #0a0a12; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
}
#viewport-3d { width: 100%; height: 100%; display: block; }

#hud-overlay {
  position: absolute; inset: 0; pointer-events: none;
  font-family: 'Consolas', monospace; font-size: 11px;
}
.hud-box {
  position: absolute;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1); border-left-width: 3px;
  padding: 4px 7px; border-radius: 4px; color: #f1f5f9;
  white-space: nowrap;
}
.hud-box.hud-target  { top: 8px; left: 8px;  border-left-color: rgba(239,68,68,0.8); }
.hud-box.hud-drone   { top: 8px; left: 130px; border-left-color: rgba(59,130,246,0.8); }
.hud-box.hud-tth     { top: 8px; right: 8px; border-left-color: rgba(234,179,8,0.8); transition: border-color 0.3s, color 0.3s; }
.hud-box.hud-tth.fail { border-left-color: rgba(239,68,68,0.95); }
.hud-box.hud-tth.fail .hud-value { color: #fca5a5; }
.hud-box.hud-simtime { top: 60px; right: 8px; border-left-color: rgba(148,163,184,0.7); }
.hud-box.hud-primary { top: 110px; right: 8px; border-left-color: rgba(168,85,247,0.8); }
.hud-box.hud-camera  { bottom: 8px; left: 8px; border-left-color: rgba(8,145,178,0.8); }
.hud-box.hud-zoom    { bottom: 8px; right: 8px; border-left-color: rgba(148,163,184,0.6); }
.hud-label { color: var(--text-dim); font-size: 9px; display: block; text-transform: uppercase; }
.hud-value { font-weight: 700; }

#hit-banner {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6);
  padding: 14px 32px; border-radius: 8px;
  background: rgba(220,38,38,0.9);
  color: #fff; font-size: 32px; font-weight: 800; letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(255,255,255,0.7);
  box-shadow: 0 0 40px rgba(220,38,38,0.9), 0 0 80px rgba(220,38,38,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}
#hit-banner.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
  animation: hit-pulse 0.6s ease-out;
}
@keyframes hit-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); }
  60%  { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1.05); }
}

.data-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Consolas', monospace; font-size: 12px;
}
.data-table th, .data-table td {
  border: 1px solid var(--border); padding: 5px 6px; text-align: left;
}
.data-table th {
  background: #0b1220; color: var(--text-dim);
  font-weight: 600; font-size: 10px; text-transform: uppercase;
}
.th-target  { color: #fca5a5; background: rgba(239,68,68,0.1) !important; }
.th-drone   { color: #93c5fd; background: rgba(59,130,246,0.1) !important; }
.th-dist    { color: #86efac; background: rgba(34,197,94,0.1) !important; }
.th-tth     { color: #fde047; background: rgba(234,179,8,0.1) !important; }

.cell-dist {
  font-size: 15px !important;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.5px;
}
.cell-dist.near { color: #fbbf24; }
.cell-dist.hit  { color: #f87171; animation: cell-pulse 0.5s infinite alternate; }
@keyframes cell-pulse {
  from { background: rgba(239,68,68,0.05); }
  to   { background: rgba(239,68,68,0.35); }
}

.cell-tth {
  font-size: 15px !important;
  font-weight: 700;
  color: #fde047;
  letter-spacing: 0.5px;
}
.cell-tth.fail { color: #fca5a5 !important; }
.cell-tth.fail::after { content: ' ⚠'; }

/* MULTI-TARGET PÁS */
.multi-target-list {
  margin-top: 10px;
  padding: 8px 10px;
  background: #0b1220;
  border: 1px solid var(--border);
  border-left: 3px solid #a855f7;
  border-radius: 4px;
}
.multi-target-list.hidden { display: none; }
.mt-header {
  font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.mt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 6px;
  font-family: 'Consolas', monospace; font-size: 12px;
  border-bottom: 1px solid rgba(51,65,85,0.4);
}
.mt-row:last-child { border-bottom: 0; }
.mt-row.mt-primary {
  background: rgba(168,85,247,0.1);
  border-left: 3px solid #a855f7;
  border-radius: 3px;
}
.mt-dot {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.mt-idx { min-width: 65px; }
.mt-dist { font-weight: 700; color: #86efac; min-width: 80px; }
.mt-row.mt-primary .mt-dist { color: #fbbf24; }
.mt-badge {
  font-size: 10px; color: #fde047;
  background: rgba(234,179,8,0.15);
  padding: 1px 5px; border-radius: 3px;
}

#distance-graph {
  background: #0f172a; border: 1px solid var(--border);
  border-radius: 6px; width: 100%; height: auto; display: block;
}

#map-panel { display: flex; flex-direction: column; gap: 6px; }
#map-container {
  width: 100%; height: 240px;
  background: #0a0a12; border: 1px solid var(--border); border-radius: 6px;
}
.map-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.map-controls button { padding: 3px 7px; font-size: 11px; }
#map-status { font-size: 11px; color: var(--text-dim); min-height: 16px; }
#map-hint {
  font-size: 10px; color: var(--warn);
  background: rgba(245,158,11,0.1); border-left: 3px solid var(--warn);
  padding: 4px 6px; border-radius: 3px; display: none;
}
#map-hint.active { display: block; }
#map-north-axis {
  background: #0b1220; border: 1px solid var(--border);
  border-radius: 3px; color: var(--text); font-size: 11px; padding: 3px 6px;
}

.leaflet-container { background: #0a0a12; font: inherit; }
.gps-dot {
  width: 14px; height: 14px; background: #3b82f6;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(59,130,246,0.7);
  animation: gps-pulse 2s infinite;
}
@keyframes gps-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(59,130,246,0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0   rgba(59,130,246,0); }
}
.map-emoji {
  background: transparent !important; border: 0 !important;
  font-size: 22px; line-height: 1; text-align: center;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
}
.intercept-pulse { animation: intercept-pulse 0.7s ease-out; }
@keyframes intercept-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.recommendation-box {
  border-left: 4px solid var(--accent);
  background: rgba(56,189,248,0.08);
  padding: 6px 9px; border-radius: 3px; margin-top: 6px;
  font-size: 12px;
}
.recommendation-box strong { color: var(--accent); }

.badge-target {
  background: rgba(239,68,68,0.2); color: #fca5a5;
  padding: 1px 5px; border-radius: 3px; font-size: 10px;
}
.badge-weapon {
  background: rgba(59,130,246,0.2); color: #93c5fd;
  padding: 1px 5px; border-radius: 3px; font-size: 10px;
}

#user-manual {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font-size: 12px;
}
#user-manual summary {
  cursor: pointer; color: var(--accent); font-weight: 600;
  list-style: none; outline: none;
}
#user-manual ol { margin: 8px 0 0 20px; padding: 0; }
#user-manual li { margin-bottom: 3px; color: var(--text-dim); }

#savedExports { font-size: 11px; }
#savedExports .export-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 5px; border-bottom: 1px solid var(--border);
}
#savedExports .export-item:last-child { border-bottom: 0; }
#savedExports button { padding: 2px 5px; font-size: 10px; }
#storageInfo { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

#db-status-text { font-size: 11px; margin-top: 6px; }
#db-status-text.ok  { color: var(--ok); }
#db-status-text.err { color: var(--err); }
#multi-status { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

body.nvg {
  --bg:       #1a0505;
  --panel:    #2a0a0a;
  --border:   #5a1515;
  --text:     #ff9999;
  --text-dim: #cc5555;
  --accent:   #ff3333;
  --accent-2: #ff5555;
}
body.nvg #main-header { background: #120202; }

body.mode-quick .advanced-only { display: none !important; }

.hidden { display: none !important; }
.text-dim { color: var(--text-dim); }
.text-ok  { color: var(--ok); }
.text-err { color: var(--err); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }