/* -----------------------------------------------------------
   Planning Policy — OpenLayers UI
   File: css/map.css
   ----------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css?family=Cabin:400,600&display=swap");

:root{
  --ui-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Cabin", sans-serif;
  --panel-bg: rgba(255,255,255,0.95);
  --panel-border: rgba(0,0,0,0.2);
  --panel-radius: 6px;
  --accent: #2b6cb0;
  --accent-600: #2a69ac;
  --text: #1f2937;
  --muted: #6b7280;
  --shadow: 0 1px 4px rgba(0,0,0,0.2);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font: 13px/1.35 var(--ui-font);
  color: var(--text);
  background: #f7fafc;
}

/* Map fills the viewport */
#map {
  position: absolute;
  inset: 0;
}

/* -----------------------------------------------------------
   OpenLayers built-in control tweaks
   ----------------------------------------------------------- */

.ol-attribution, .ol-attribution * ,
.ol-scale-line, .ol-scale-line-inner {
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 1.2;
}

.ol-control {
  /* keep default spacing readable on touch devices */
  padding: 0.25rem;
}

/* -----------------------------------------------------------
   Popup (OL overlay)
   ----------------------------------------------------------- */

.ol-popup {
  position: absolute;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  min-width: 220px;
  display: none; /* shown via JS */
}

/* === Popup text colour override (light mode) === */
.ol-popup * {
  color: #000 !important; /* ensure all text is black */
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 4px;
  right: 8px;
  color: #000 !important;
  opacity: 0.7;
  font-size: 14px;
}
.ol-popup-closer:hover { 
    color: #111827;
    opacity: 1;
}

/* -----------------------------------------------------------
   Layer Switcher (basemap icons + two dropdown sections)
   ----------------------------------------------------------- */

.layer-switcher {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: 10px;
  max-width: 280px;
  box-shadow: var(--shadow);
  user-select: none;
  max-height: calc(100vh - 20px);
  overflow: auto;
}

.layer-switcher h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Basemap thumbnails */
.basemap-icons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.basemap-icons img{
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
  background: #fff;
}
.basemap-icons img:hover{
  border-color: #cbd5e1;
}
.basemap-icons img.active{
  border-color: var(--accent);
}

/* Dropdown groups (WCC & BGS) */
details.panel{
  border-top: 1px solid #e2e8f0;
  padding-top: 6px;
  margin-top: 6px;
}

details.panel > summary{
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  outline: none;
}

/* Custom caret for <summary> */
details.panel > summary::before{
  content: "▸";
  font-size: 12px;
  color: var(--muted);
  transform: translateY(1px);
}
details[open].panel > summary::before{
  content: "▾";
  color: var(--accent-600);
}

/* Scrollable checkbox list */
.layer-list{
  margin-top: 6px;
  max-height: none;
  overflow: visible;
  padding-right: 0px; /* room for scrollbar */
}

/* Checkboxes */
.layer-list label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: #111827;
}
.layer-list input[type="checkbox"]{
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Nice scrollbar (WebKit/Blink) */
.layer-list::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.layer-list::-webkit-scrollbar-thumb{
  background: #cbd5e1;
  border-radius: 6px;
  border: 2px solid #f8fafc;
}
.layer-list::-webkit-scrollbar-thumb:hover{
  background: #94a3b8;
}

/* -----------------------------------------------------------
   North arrow (positioned above scale bar by JS)
   ----------------------------------------------------------- */

.north{
  background: transparent;
  padding: 0;
  box-shadow: none;
  pointer-events: none; /* click-through */
}

.north img{
  height: 40px;
  width: auto;
  display: block;
}

/* -----------------------------------------------------------
   Accessibility helpers
   ----------------------------------------------------------- */

a, button, [role="button"], summary, input[type="checkbox"]{
  outline: none;
}
a:focus-visible, button:focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(43,108,176,0.35);
  border-radius: 4px;
}

/* Visually hidden (screen-reader only) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* -----------------------------------------------------------
   Small screens
   ----------------------------------------------------------- */
@media (max-width: 520px){
  .layer-switcher{
    max-width: calc(100vw - 20px);
    right: 10px; left: 10px;
  }
  .basemap-icons img{ width: 40px; height: 40px; }
}

/* For very short viewports, re-introduce list scroll as a fallback */
@media (max-height: 600px){
  .layer-list{
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
  }
}

/* === Overrides: panel heading colours & weight === */
.layer-switcher h4 {
  font-weight: 700; /* bold */
  color: #000;      /* black */
}

details.panel > summary {
  font-weight: 700; /* bold */
  color: #000;      /* black */
}

/* -----------------------------------------------------------
   Optional: dark mode
   ----------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root{
    --panel-bg: rgba(30,41,59,0.92);
    --panel-border: rgba(148,163,184,0.35);
    --text: #e5e7eb;
    --muted: #9ca3af;
  }
  body { background: #0b1220; color: var(--text); }
  .ol-popup {
    background: #fff;        /* stay light */
    border-color: #d1d5db;
  }
  .ol-popup, .ol-popup * {
    color: #000 !important;  /* keep black text */
  }
  .basemap-icons img{ background:#0b1220; box-shadow: 0 0 0 1px rgba(148,163,184,0.25) inset; }
  .layer-switcher { box-shadow: 0 2px 10px rgba(0,0,0,0.45); }
}

/* OVERRIDE: let each group's list fully expand */
.layer-switcher .layer-list{
  margin-top: 6px;
  max-height: none !important;  /* cancel any earlier caps like 260px */
  overflow: visible !important; /* no inner scrollbars */
  padding-right: 0 !important;
}