:root{
  --neo:#39ff14; /* neon green */
  --bg:#14181e;
  --bg-acc:#1b2129;
  --text:#e5e7eb;
  --muted:#94a3b8;
}
html,body{height:100%;background:var(--bg);color:var(--text);} 
.bg-dark-acc{background:var(--bg-acc)!important;}
.border-neo{border-color:rgba(57,255,20,.25)!important;}
.text-neo{color:var(--neo)!important;}
.text-bg-neo{color:#0b0f14;background:var(--neo);} 
.navbar-brand .brand-title{font-weight:800;letter-spacing:.5px}
.navbar-brand .brand-subtitle{font-weight:500}

/* Subtle animated neon glow for brand */
.navbar-brand .brand-title{
  text-shadow: 0 0 8px rgba(57,255,20,.6), 0 0 18px rgba(57,255,20,.35);
  animation: neonGlow 2.8s ease-in-out infinite;
}
@keyframes neonGlow{
  0%, 100% { text-shadow: 0 0 6px rgba(57,255,20,.45), 0 0 14px rgba(57,255,20,.25); }
  50% { text-shadow: 0 0 16px rgba(57,255,20,.75), 0 0 28px rgba(57,255,20,.45); }
}

.btn-neo{background:var(--neo);color:#0b0f14;border:1px solid #2ddb0d;box-shadow:0 0 12px rgba(57,255,20,.35);}
.btn-neo:hover{filter:brightness(.95)}
.btn-neo-subtle{background:transparent;border:1px solid rgba(57,255,20,.35);color:var(--text);} 
.btn-outline-neo{color:var(--neo);border-color:rgba(57,255,20,.4)}
.btn-outline-neo:hover{background:rgba(57,255,20,.12);color:var(--neo)}

/* Solid neon for navbar radius chips on hover/checked */
.navbar .btn-check:checked + .btn-outline-neo,
.navbar .btn-outline-neo:hover,
.navbar .btn-outline-neo:focus,
.navbar .btn-outline-neo:active,
.navbar .btn-outline-neo.active{
  background: var(--neo) !important;
  color: #0b0f14 !important;
  border-color: #2ddb0d !important;
  box-shadow: 0 0 12px rgba(57,255,20,.35) !important;
}
.navbar .btn-outline-neo{transition: background-color .12s ease, color .12s ease, box-shadow .12s ease}

/* Solid neon for Monitor modal options on hover/checked */
#monitorModal .btn-check:checked + .btn-outline-neo,
#monitorModal .btn-outline-neo:active,
#monitorModal .btn-outline-neo.active,
#monitorModal .btn-outline-neo:focus,
#monitorModal .btn-outline-neo:hover{
  background: var(--neo) !important;
  color: #0b0f14 !important;
  border-color: #2ddb0d !important;
  box-shadow: 0 0 12px rgba(57,255,20,.35) !important;
}
/* Ensure text stays visible even during hover transitions */
#monitorModal .btn-outline-neo{transition: background-color .12s ease, color .12s ease, box-shadow .12s ease}

/* Navbar buttons: solid neon highlight on hover/active */
.navbar .btn-neo-subtle:hover,
.navbar .btn-neo-subtle:focus,
.navbar .btn-neo-subtle:active,
.navbar .btn-neo-subtle.active,
.navbar .btn-neo-subtle[aria-pressed="true"]{
  background: var(--neo) !important;
  color: #0b0f14 !important;
  border-color: #2ddb0d !important;
  box-shadow: 0 0 12px rgba(57,255,20,.35) !important;
}

.pulse-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--neo);display:inline-block;box-shadow:0 0 0 0 rgba(57,255,20,.7);animation:pulse 1.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,255,20,.7)}70%{box-shadow:0 0 0 12px rgba(57,255,20,0)}100%{box-shadow:0 0 0 0 rgba(57,255,20,0)}}

.search-wrap .form-control{background:transparent;border-color:rgba(57,255,20,.35);color:var(--text)}
.search-wrap .form-control::placeholder{color:#7b8a9b}

.bg-dim{background:linear-gradient(180deg,#0f141a 0%,#151b23 100%);} 
.cam-card{overflow:hidden;border-radius:12px}
.cam-card .card-title{font-weight:700}
.text-truncate-2{display:-webkit-box;display:box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.cam-img{object-fit:cover;border-bottom:1px solid rgba(57,255,20,.15)}
.cam-img.loading{filter:grayscale(100%) blur(2px);opacity:.7}

/* Fade transitions */
.fade{opacity:1;transition:opacity .6s ease}
.fade.hide{opacity:0}

#regionChips .chip{border:1px solid rgba(57,255,20,.35);border-radius:999px;padding:.35rem .75rem}

/* Scrollbar subtle styling */
*{scrollbar-width:thin;scrollbar-color:#26313e #0f141a}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#26313e;border-radius:8px}

.small, .text-secondary{color:var(--muted)!important}

/* Leaflet popup dark theme to match neon UI */
.neo-leaflet-popup .leaflet-popup-content-wrapper {
  background: #0b1117;
  color: #e2e8f0;
  border: 1px solid rgba(57,255,20,0.3);
  box-shadow: 0 0 12px rgba(0,0,0,0.6), 0 0 8px rgba(57,255,20,0.25);
}
.neo-leaflet-popup .leaflet-popup-tip {
  background: #0b1117;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.neo-leaflet-popup .leaflet-popup-content a {
  color: #39ff14;
}

/* Remove any image transition animations to avoid mobile jump */
img.cam-img,
img.rg-img,
#modalImg {
  transition: none !important;
}

/* Default modal image sizing (non-fullscreen): use safe viewport height on mobile */
#imageModal #modalImg{
  width: 100%;
  height: auto;
  max-height: calc(80dvh - 48px);
  object-fit: contain;
  background: #000;
}

/* Modal fullscreen for overlay image */
#imageModal .modal-dialog.modal-fullscreen {
  margin: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
}
#imageModal .modal-dialog.modal-fullscreen .modal-content {
  height: 100%;
  background: #0b1117;
  border: 1px solid rgba(57,255,20,0.25);
}
#imageModal .modal-dialog.modal-fullscreen .modal-body {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#imageModal .modal-dialog.modal-fullscreen #modalImg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* True Fullscreen (Fullscreen API) */
.modal-content:fullscreen,
.modal-content:-webkit-full-screen{
  width: 100%;
  height: 100%;
}
.modal-content:fullscreen .modal-body,
.modal-content:-webkit-full-screen .modal-body{
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content:fullscreen #modalImg,
.modal-content:-webkit-full-screen #modalImg{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1055; /* above navbar and modal backdrop */
}
.loading-overlay.d-none { display: none !important; }
.loading-box {
  background: #0b1117;
  color: #cbd5e1;
  border: 1px solid rgba(57,255,20,0.35);
  border-radius: 12px;
  padding: 20px 24px;
  min-width: 260px;
  box-shadow: 0 0 24px rgba(57,255,20,0.15);
}
.neo-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(57,255,20,0.25);
  border-top-color: rgb(57,255,20);
  animation: spin 0.9s linear infinite;
  margin-inline: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Ensure card/rolling images can host crossfade overlay */
.card-img-top, .rg-cell {
  position: relative;
}

.badge.text-bg-neo{border:1px solid #2ddb0d}
.ratio{background:#0f141a}
.modal-content{border:1px solid rgba(57,255,20,.25)}

/* Card footer buttons */
.card-footer .btn{--bs-btn-padding-y:.2rem;--bs-btn-padding-x:.6rem}

/* Modal overlay controls positioning */
/* Replaced by modal topbar */
.modal-topbar{padding:.5rem .75rem;border-bottom:1px solid rgba(57,255,20,.15);background:rgba(10,14,19,.85);backdrop-filter:blur(6px)}
.modal-topbar .title{font-weight:700;font-size:1rem;line-height:1.1}
.modal-topbar .sub{font-size:.8rem;color:#9aa5b1}

/* Rolling Grid 2x2 */
.onboard-tip{background:#0b1117;border:1px solid rgba(57,255,20,.35);border-radius:12px;padding:.75rem 1rem;box-shadow:0 0 18px rgba(57,255,20,.15)}
.rolling-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,0.9fr);gap:.5rem}
.rolling-grid .cell{background:#0b1117;border:1px solid rgba(57,255,20,.15);border-radius:10px;overflow:hidden;position:relative}
.rolling-grid img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width: 576px){
  .rolling-grid{grid-template-rows:repeat(2,31vh)}
}

/* Neon green checkboxes for region filter */
#regionList input[type="checkbox"]{appearance:auto;width:1.1rem;height:1.1rem;border:1px solid #39ff14;background:transparent;cursor:pointer}
#regionList input[type="checkbox"]:checked{background-color:#39ff14;border-color:#39ff14}
#regionList label{color:#cfd8e3}

/* Immersive viewer overlay */
#immersive[hidden]{ display:none !important; }
#immersive{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: #000;
  z-index: 1060; /* above modal */
  display: flex;
  flex-direction: column;
}
#immersive .iv-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .75rem;
  border-bottom:1px solid rgba(57,255,20,.2);
  background: rgba(10,14,19,.85);
  backdrop-filter: blur(6px);
}
#immersive .iv-title{font-weight:700;font-size:1rem;line-height:1.1}
#immersive .iv-sub{font-size:.8rem;color:#9aa5b1}
#immersive .right .btn{--bs-btn-padding-y:.2rem;--bs-btn-padding-x:.6rem}
#immersive #ivImg{
  flex:1 1 auto;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

/* Immersive grid for Auto Tour multi-view (manual layouts) */
#immersive .iv-grid{
  flex:1 1 auto;
  display:grid;
  width:100%;
  height:100%;
  gap:.5rem;
  padding:.5rem;
  background:#000;
}
#immersive .iv-grid .cell{
  position:relative;
  background:#000;
  border:1px solid rgba(57,255,20,.25);
  border-radius:8px;
  overflow:hidden;
}
#immersive .iv-grid .cell img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
#immersive .iv-grid .cell .meta{
  position:absolute;left:8px;bottom:8px;
  background:rgba(10,14,19,.65);
  border:1px solid rgba(57,255,20,.25);
  color:#cbd5e1;
  padding:.15rem .4rem;
  border-radius:6px;
  font-size:.75rem;
}

/* Layout presets controlled by JS via class */
#immersive .iv-grid.ly-4{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); }
#immersive .iv-grid.ly-9{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }

/* Small screens: tighter spacing */
@media (max-width: 575.98px){
  #immersive .iv-grid{ gap:.35rem; padding:.35rem; }
}