/* ============================================================
   GPS Radar — Foundry Light UI (редизайн v2.4)
   Базові стилі + токени. Компонентні стилі — інлайн у app.js
   (навмисно: прототип задає точні px/hex; тримаємо 1:1).
   ============================================================ */

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

:root{
  --bg-app:#EDF0F4; --surface:#FFFFFF; --surface-2:#F6F8FA; --surface-sel:#E9F2FC;
  --rail:#F3F5F8; --border:#DCE1E8; --border-soft:#E6EAEF; --border-strong:#C6CEDA;
  --text:#17212C; --text-mute:#5D6B7A; --text-dim:#8B98A6; --text-ghost:#A6B1BD;
  --accent:#1B6FD1; --accent-hover:#155BAF; --accent-border:#9EC2EE;
  --critical:#D32F45; --warning:#E0942A; --warning-txt:#B9770E; --ok:#12855A; --violet:#6E56CF;
}

html,body{margin:0;padding:0;background:var(--bg-app);height:100%;}
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--text);-webkit-font-smoothing:antialiased;text-wrap:pretty;
}
*{box-sizing:border-box;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:#0F4E9C;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#CBD3DD;border:2px solid #FFFFFF;}
::-webkit-scrollbar-thumb:hover{background:#AEB9C7;}
::-webkit-scrollbar-track{background:var(--surface-2);}

/* ── Leaflet у світлій темі ── */
.leaflet-container{background:var(--bg-app)!important;font-family:'IBM Plex Mono',monospace!important;}
.leaflet-popup-content-wrapper{border-radius:0;box-shadow:0 2px 10px rgba(23,33,44,.18);}
.leaflet-popup-content{font:400 11px/1.5 'IBM Plex Mono',monospace;color:var(--text);}
.leaflet-bar a{color:var(--text-mute);}

@keyframes pulseOk{
  0%{box-shadow:0 0 0 0 rgba(18,133,90,.45)}
  70%{box-shadow:0 0 0 6px rgba(18,133,90,0)}
  100%{box-shadow:0 0 0 0 rgba(18,133,90,0)}
}

#app{height:100vh;overflow:hidden;}
body.locked{overflow:hidden;}

/* ── Легкий auth-модал ── */
#authOverlay{
  position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  background:rgba(23,33,44,.36);backdrop-filter:blur(3px);
}
#authOverlay .auth-box{
  width:320px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(23,33,44,.24);padding:26px 24px;
}
#authOverlay h1{font:600 18px/1 'IBM Plex Sans';letter-spacing:.16em;margin:0 0 4px;}
#authOverlay h1 .accent{color:var(--accent);}
#authOverlay .sub{font:400 10px/1 'IBM Plex Mono',monospace;color:var(--text-dim);letter-spacing:.1em;margin-bottom:20px;}
#authOverlay label{display:block;font:600 8.5px/1 'IBM Plex Sans';letter-spacing:.13em;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;}
#authOverlay input{
  width:100%;height:34px;padding:0 10px;background:var(--surface-2);
  border:1px solid var(--border-strong);color:var(--text);
  font:500 12px/1 'IBM Plex Mono',monospace;outline:none;
}
#authOverlay input:focus{border-color:var(--accent);}
#authOverlay button{
  width:100%;height:34px;margin-top:14px;background:var(--accent);border:0;color:#fff;
  font:600 10px/1 'IBM Plex Sans';letter-spacing:.14em;cursor:pointer;text-transform:uppercase;
}
#authOverlay button:hover{background:var(--accent-hover);}
#authOverlay button:disabled{opacity:.6;cursor:default;}
#authOverlay .err{min-height:16px;margin-top:10px;font:400 10px/1.4 'IBM Plex Mono',monospace;color:var(--critical);}
#authOverlay .footer{margin-top:16px;font:400 9px/1.4 'IBM Plex Mono',monospace;color:var(--text-dim);}

/* SVG-осі/лінії не мають перехоплювати кліки по барах */
svg text{pointer-events:none;user-select:none;}

/* ============================================================
   Темна тема (v2.5). Інлайн-хекси у розмітці перефарбовує paint()
   у app.js; тут — те, що живе у CSS: токени, скролбари, модалка, Leaflet.
   ============================================================ */
body.dark{
  --bg-app:#0A0D13; --surface:#10151D; --surface-2:#161C25; --surface-sel:#17273A;
  --rail:#0E131A; --border:#232C38; --border-soft:#1E2630; --border-strong:#2E3846;
  --text:#DCE9F8; --text-mute:#97A9BC; --text-dim:#74879B; --text-ghost:#5F7286;
  --accent:#4DA6FF; --accent-hover:#6FBBFF; --accent-border:#2F6EA8;
  --critical:#FF4D6E; --warning:#FFB347; --warning-txt:#E0A44A; --ok:#35C98A; --violet:#9A86FF;
  color-scheme:dark;
}
body.dark a:hover{color:#9FD0FF;}
body.dark ::-webkit-scrollbar-thumb{background:#2E3846;border:2px solid #10151D;}
body.dark ::-webkit-scrollbar-thumb:hover{background:#3C4859;}
body.dark #authOverlay{background:rgba(4,6,10,.66);}
body.dark #authOverlay .auth-box{box-shadow:0 24px 60px rgba(0,0,0,.6);}
body.dark .leaflet-popup-content-wrapper,
body.dark .leaflet-popup-tip{background:var(--surface);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.5);}
body.dark .leaflet-bar a{background:var(--surface);color:var(--text-mute);border-color:var(--border);}
body.dark .leaflet-bar a:hover{background:var(--surface-2);}

/* ── Екран входу: два поля замість одного ── */
#authOverlay input[type="text"]{
  width:100%;height:34px;padding:0 10px;background:var(--surface-2);
  border:1px solid var(--border-strong);color:var(--text);
  font:500 12px/1 'IBM Plex Mono',monospace;outline:none;
}
#authOverlay input[type="text"]:focus{border-color:var(--accent);}
#authOverlay .footer{line-height:1.6;}

/* ── Панель налаштувань ── */
#app select:focus,#app input:focus{border-color:var(--accent);outline:none;}
#app button[type="submit"]:hover{filter:brightness(1.08);}