/* =====================================================================
   atlas.css — Sites Atlas front door. Re-skins the SA Gov street basemap
   into the BMS_Tools dark operations console look. Loaded after Leaflet.
   ===================================================================== */

/* let the atlas fill the workspace cell, no scroll, no inset */
.shell.atlasMode .work-inner { padding: 0; max-width: none; height: 100%; }
.shell.atlasMode .workspace { overflow: hidden; }
.shell.atlasMode .sheetMarks { display: none; }
/* keep the top bar (and its project switcher dropdown) above the atlas panels */
.shell.atlasMode .topbar { position: relative; z-index: 700; }

.atlas { position: relative; height: 100%; width: 100%; overflow: hidden; background: var(--bg-0); }

/* ---- the map ---- */
.atlas-map { position: absolute; inset: 0; background: var(--bg-0); z-index: 0; }
.atlas-map .maplibregl-map { background: var(--bg-0); font: inherit; }
.atlas-map .maplibregl-canvas:focus { outline: none; }
.atlas-map .maplibregl-ctrl-logo { display: none !important; }
.atlas-map .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--panel) 70%, transparent); border-radius: 6px 0 0 0; font-size: 10px; }
.atlas-map .maplibregl-ctrl-attrib a { color: var(--ink-3); }
.atlas-map .maplibregl-ctrl-bottom-right { z-index: 450; }

@keyframes atlasPulse { 0% { transform: scale(.55); opacity: .65; } 100% { transform: scale(2.6); opacity: 0; } }

/* popup text */
.apop-name { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }
.apop-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--ink-3); }
.apop-code { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }

/* engine glow wash + vignette over the map (theme-aware, non-interactive) */
.atlas-glow {
  position: absolute; inset: 0; z-index: 401; pointer-events: none;
  background:
    radial-gradient(900px 620px at 58% 44%, oklch(0.74 0.125 195 / 0.10), transparent 62%),
    radial-gradient(700px 520px at 22% 88%, oklch(0.70 0.13 300 / 0.05), transparent 60%),
    radial-gradient(150% 120% at 50% 40%, transparent 60%, var(--bg-0) 100%);
}
[data-theme="light"] .atlas-glow { opacity: 0.45; }

/* ---- maplibre popup, dark ---- */
.atlas-pop .maplibregl-popup-content { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 11px 13px 12px; font-size: 12.5px; }
.atlas-pop .maplibregl-popup-tip { border-top-color: var(--panel-2) !important; border-bottom-color: var(--panel-2) !important; }

/* ---- floating chrome over the map ---- */
.atlas-cmd, .atlas-stats, .atlas-legend, .atlas-controls { position: absolute; z-index: 500; }

/* command panel (left) */
.atlas-cmd {
  top: 18px; left: 18px; width: 340px; max-height: calc(100% - 36px);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--panel-2) 85%, transparent); backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.acmd-hd { padding: 15px 16px 13px; border-bottom: 1px solid var(--line); }
.acmd-eye { display: flex; align-items: center; gap: 8px; }
.acmd-eye .dotlive { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.acmd-eye .cap { color: var(--acc); }
.acmd-greet { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; }
.acmd-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.acmd-search { display: flex; align-items: center; gap: 8px; margin: 13px 16px 0; padding: 8px 10px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-3); }
.acmd-search input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font: inherit; font-size: 12.5px; }
.acmd-search input::placeholder { color: var(--ink-4); }

.acmd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 13px 16px; }
.aact {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--panel); color: var(--ink-2); cursor: pointer; transition: .13s; text-align: left;
}
.aact:hover { border-color: var(--line-strong); background: var(--panel-2); color: var(--ink); transform: translateY(-1px); }
.aact .aico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: var(--panel-3); color: var(--ink-3); }
.aact b { font-size: 12.5px; font-weight: 600; }
.aact span { font-size: 10.5px; color: var(--ink-4); }
.aact.primary { background: linear-gradient(165deg, oklch(0.74 0.125 195 / 0.18), var(--panel)); border-color: oklch(0.74 0.125 195 / 0.4); }
.aact.primary .aico { background: linear-gradient(150deg, var(--acc), var(--acc-dim)); color: var(--acc-ink); box-shadow: 0 4px 12px -4px var(--acc-glow); }
.aact.primary b { color: var(--ink); }

.acmd-tabs { display: flex; gap: 4px; padding: 0 16px; }
.acmd-tab { flex: 1; padding: 7px 0; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: .12s; }
.acmd-tab:hover { color: var(--ink-2); }
.acmd-tab.on { color: var(--ink); border-bottom-color: var(--acc); }

.acmd-list { overflow-y: auto; padding: 8px 10px 12px; }
.arow { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: var(--r-sm); cursor: pointer; transition: .1s; }
.arow:hover { background: var(--panel-2); }
.arow .sdot2 { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.arow .ar-main { min-width: 0; flex: 1; }
.arow .ar-name { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .ar-sub { font-size: 11px; color: var(--ink-3); display: flex; gap: 7px; margin-top: 2px; }
.arow .ar-sub .mono { font-family: var(--mono); color: var(--ink-2); }
.arow .ar-when { font-size: 10.5px; color: var(--ink-4); flex-shrink: 0; }

/* selected-site detail card replaces list when a node is picked */
.asel { padding: 13px 16px 15px; border-top: 1px solid var(--line); }
.asel-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.asel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 12px 0 13px; }
.asel-grid .cap { display: block; margin-bottom: 2px; }
.asel-grid b { font-size: 12.5px; font-family: var(--mono); color: var(--ink); font-weight: 500; }
.asel-act { display: flex; gap: 7px; }

/* stat band (top-right) */
.atlas-stats {
  top: 18px; right: 18px; display: flex; gap: 0;
  background: color-mix(in srgb, var(--panel-2) 85%, transparent); backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden;
}
.astat { padding: 13px 20px; border-left: 1px solid var(--line); min-width: 120px; }
.astat:first-child { border-left: none; }
.astat .cap { color: var(--ink-3); }
.astat .num { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 5px; font-feature-settings: "zero" 1; }
.astat .num .u { color: var(--acc); }

/* legend (bottom-right) */
.atlas-legend {
  bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; box-shadow: var(--shadow);
}
.atlas-legend .lg-hd { color: var(--ink-3); margin-bottom: 2px; }
.lgrow { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 2px 0; opacity: 1; transition: .12s; }
.lgrow.off { opacity: 0.32; }
.lgrow .sdot2 { width: 8px; height: 8px; border-radius: 50%; }
.lgrow span { font-size: 11.5px; color: var(--ink-2); }
.lgrow .ct { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* view controls (bottom-center) */
.atlas-controls {
  bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow-pop);
}
.actl { padding: 7px 15px; font-size: 12px; font-weight: 500; color: var(--ink-3); background: none; border: none; border-radius: 999px; cursor: pointer; transition: .12s; display: flex; align-items: center; gap: 7px; }
.actl:hover { color: var(--ink); background: var(--panel-2); }
.actl.on { color: var(--acc-ink); background: var(--acc); font-weight: 600; }
.actl-div { width: 1px; height: 18px; background: var(--line-2); }
.actl-zoom { width: 30px; height: 30px; padding: 0; justify-content: center; color: var(--ink-2); }
.actl-zoom:hover { background: var(--panel-2); color: var(--ink); }

/* responsive: collapse stat band labels on small viewports */
@media (max-width: 1160px) {
  .atlas-stats .astat { padding: 11px 14px; min-width: 96px; }
  .atlas-stats .astat .num { font-size: 22px; }
  .atlas-stats .astat:nth-child(n+4) { display: none; }
}
@media (max-width: 920px) {
  .atlas-cmd { width: calc(100% - 36px); max-height: 50%; }
  .atlas-stats { display: none; }
}