/* viewer.css — Map Viewer chrome, lifted from SCR scr-map.css (same look + feel).
   Theme variable values copied from SCR public/css/base.css. */
:root {
  --tc-blue:        #0098DB;
  --tc-blue-lt:     #EBF6FD;
  --tc-border:      #DDE1E7;
  --tc-text:        #1C1C1E;
  --tc-text-sub:    #6B7280;
  --tc-text-dim:    #9CA3AF;
  --theme-bg:       #F4F5F7;
  --tc-blue-border: rgba(0, 152, 219, 0.30);
  --tc-blue-tint:   rgba(0, 152, 219, 0.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: 'Open Sans', system-ui, sans-serif; }

/* ── Full-screen map area (fills the whole extension panel) ───────────── */
.scr-mapfs {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--theme-bg);
  --scr-mapfs-hover-bg:     #EBF6FD;
  --scr-mapfs-hover-fg:     #0098DB;
  --scr-mapfs-hover-border: #0098DB;
}
.scr-mapfs-map {
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: #eef2f6;
  overflow: hidden;
}
.scr-mapfs-target { width: 100%; height: 100%; background: #eef2f6; }

/* ── OL zoom +/- restyled as the top-right corner pill ───────────────── */
.scr-mapfs .ol-zoom {
  position: absolute;
  top: 58px; right: 8px; left: auto; bottom: auto;
  width: 40px; margin: 0; padding: 0;
  background: #fff;
  border: 1px solid var(--tc-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column; gap: 0;
  overflow: hidden;
}
.scr-mapfs .ol-zoom button {
  width: 100%; height: 40px; margin: 0;
  background-color: transparent !important;
  color: var(--tc-text-sub) !important;
  border: 0 !important; border-radius: 0; outline: none !important;
  font: 700 16px/1 'Open Sans', system-ui, sans-serif;
  cursor: pointer;
}
.scr-mapfs .ol-zoom button:first-child { border-bottom: 1px solid var(--tc-border) !important; }
.scr-mapfs .ol-zoom button:hover,
.scr-mapfs .ol-zoom button:focus,
.scr-mapfs .ol-zoom button:focus-visible {
  background-color: var(--scr-mapfs-hover-bg) !important;
  color:            var(--scr-mapfs-hover-fg) !important;
  outline: none !important;
}
.scr-mapfs .ol-zoom:has(button:hover),
.scr-mapfs .ol-zoom:has(button:focus) { border-color: var(--scr-mapfs-hover-border); }

.scr-mapfs .ol-attribution {
  font-size: 10px; padding: 1px 5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px; right: 12px; bottom: 12px;
}

/* ── Top-right NAV pillow: basemap source select ─────────────────────── */
.scr-mapfs-nav {
  position: absolute;
  top: 20px; right: 20px; height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--tc-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.scr-mapfs-nav .mp-source {
  font: 12px 'Open Sans', system-ui, sans-serif;
  padding: 4px 26px 4px 12px;
  border: 1px solid var(--tc-border);
  border-radius: 14px;
  background: #fff;
  color: var(--tc-text);
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5 6 8l3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 10px;
  max-width: 220px;
}
.scr-mapfs-nav .mp-source:hover { border-color: var(--tc-blue-border); }
.scr-mapfs-nav .mp-source:focus { outline: none; border-color: var(--tc-blue); }