/* WattAtlas Frontend Map Fix 3
   Balanced desktop proportions after review.
   Presentation only; no data/API/business logic changes. */

:root {
  --wa-map-desktop-h: 600px;
  --wa-map-drawer-w: 360px;
  --wa-map-side-w: 300px;
}

/* Keep the map important, but not full-screen dominant. */
.atlas-shell.atlas-v2 {
  width: min(1440px, calc(100% - 28px)) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

@media (min-width: 1180px) {
  .atlas-body.map-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--wa-map-side-w) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .map-area {
    position: relative !important;
    min-width: 0 !important;
    height: var(--wa-map-desktop-h) !important;
    min-height: var(--wa-map-desktop-h) !important;
    max-height: var(--wa-map-desktop-h) !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  .map-area #map {
    width: 100% !important;
    height: 100% !important;
    min-height: var(--wa-map-desktop-h) !important;
    display: block !important;
  }

  .layers-panel {
    width: var(--wa-map-side-w) !important;
    min-width: 0 !important;
    max-width: var(--wa-map-side-w) !important;
    box-sizing: border-box !important;
  }

  .layer-options {
    grid-template-columns: 1fr 1fr !important;
  }

  .layer-option {
    min-height: 52px !important;
  }
}

/* Give the main search room without pushing controls off-screen. */
@media (min-width: 1000px) {
  .atlas-toolbar {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) auto auto auto !important;
    gap: 10px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .atlas-toolbar .search-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  .atlas-toolbar .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .scope-toolbar {
    min-height: 50px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    align-items: center !important;
  }

  .scope-toolbar #center-label {
    margin-left: auto !important;
    max-width: 300px !important;
    text-align: right !important;
  }
}

/* Area list: substantial enough to use, small enough to leave the map visible. */
.map-list-drawer {
  position: absolute !important;
  z-index: 40 !important;
  top: 54px !important;
  left: 14px !important;
  width: min(var(--wa-map-drawer-w), calc(100% - 28px)) !important;
  max-width: min(var(--wa-map-drawer-w), calc(100% - 28px)) !important;
  max-height: calc(100% - 72px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 14px 34px rgba(14,35,55,.16) !important;
}

.map-list-drawer[hidden] {
  display: none !important;
}

.map-list-drawer .list-caption {
  flex: 0 0 auto !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(25,59,56,.10) !important;
}

.map-list-drawer .list-caption strong {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Desktop has one canonical search field: the large one above the map. */
@media (min-width: 900px) {
  .map-list-drawer .list-search-wrap {
    display: none !important;
  }
}

.map-list-drawer .results {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 430px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

.map-list-drawer .results > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep standard map controls visible. */
.map-zoom-controls {
  right: 12px !important;
  z-index: 20 !important;
}

/* Tablet */
@media (min-width: 681px) and (max-width: 1179px) {
  .atlas-shell.atlas-v2 {
    width: min(100% - 20px, 1120px) !important;
  }

  .atlas-body.map-workspace {
    display: block !important;
  }

  .map-area {
    position: relative !important;
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
  }

  .map-area #map {
    width: 100% !important;
    height: 100% !important;
    min-height: 560px !important;
  }

  .map-list-drawer {
    top: 52px !important;
    left: 12px !important;
    width: min(370px, calc(100% - 24px)) !important;
    max-width: min(370px, calc(100% - 24px)) !important;
    max-height: calc(100% - 68px) !important;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .atlas-shell.atlas-v2 {
    width: calc(100% - 12px) !important;
  }

  .map-area {
    position: relative !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
  }

  .map-area #map {
    height: 100% !important;
    min-height: 520px !important;
  }

  .map-list-drawer {
    inset: 52px 8px 8px 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  .map-list-drawer .list-search-wrap {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 32px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px 12px !important;
  }

  .map-list-drawer .list-search-wrap input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .map-list-drawer .results {
    max-height: none !important;
  }
}


/* v1.5.0 – Hintergrundkarten-Auswahl vollständig sichtbar */
.basemap-selector{overflow:visible!important}
.basemap-selector>summary{cursor:pointer!important;min-height:50px!important;display:flex!important;align-items:center!important}
.basemap-selector[open]{position:relative!important;z-index:70!important}
.basemap-selector[open] .basemap-options{
 display:grid!important;grid-template-columns:1fr!important;gap:7px!important;
 max-height:360px!important;overflow-y:auto!important;overflow-x:hidden!important;
 padding:8px!important;margin-top:6px!important;background:#fff!important;
 border:1px solid rgba(25,59,56,.14)!important;border-radius:12px!important;
 box-shadow:0 12px 28px rgba(14,35,55,.13)!important
}
.basemap-option{
 width:100%!important;min-width:0!important;min-height:58px!important;
 display:grid!important;grid-template-columns:42px minmax(0,1fr) 22px!important;
 align-items:center!important;gap:9px!important;padding:8px 10px!important;
 box-sizing:border-box!important;cursor:pointer!important
}
.basemap-option span:nth-child(2){min-width:0!important}
.basemap-option strong,.basemap-option small{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.basemap-option i{justify-self:end!important}

/* v1.5.0 – getrennte Gebietindikatoren */
.indicator-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:10px}
.indicator-mini-grid p{margin:0;padding:9px 10px;border:1px solid rgba(25,59,56,.10);border-radius:10px;background:rgba(247,250,252,.8)}
.indicator-mini-grid small{display:block;margin-top:3px;line-height:1.35}
@media(max-width:680px){.indicator-mini-grid{grid-template-columns:1fr}}


/* v1.5.0 FINAL – Basemap-Dropdown als echtes Overlay */
.layers-panel{overflow:visible!important}
.basemap-selector{position:relative!important;overflow:visible!important}
.basemap-selector[open] .basemap-options{
 position:absolute!important;
 left:0!important;
 right:0!important;
 top:calc(100% + 5px)!important;
 z-index:120!important;
 max-height:330px!important;
}

/* v1.5.0 FINAL – Gebietindikatoren direkt unter der Karte */
.v150-area-indicators{
 margin-top:16px;
 padding:18px;
 border:1px solid rgba(25,59,56,.12);
 border-radius:14px;
 background:#fff;
}
.v150-indicator-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:16px;
 margin-bottom:8px;
}
.v150-indicator-head h3{margin:.15rem 0 0}
.v150-indicator-intro{margin:0 0 14px;color:var(--muted,#5d6d78);max-width:1000px}
.v150-indicator-grid{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:10px;
}
.v150-indicator-card{
 min-width:0;
 padding:14px;
 border:1px solid rgba(25,59,56,.10);
 border-radius:12px;
 background:rgba(247,250,252,.82);
}
.v150-indicator-card>span:first-child{display:block;font-size:.84rem;color:var(--muted,#5d6d78);margin-bottom:5px}
.v150-indicator-card strong{display:block;font-size:1.22rem;line-height:1.2;margin-bottom:7px;color:var(--navy,#0d315b)}
.v150-indicator-card small{display:block;margin-top:6px;color:var(--muted,#5d6d78)}
.v150-indicator-card p{font-size:.78rem;line-height:1.35;margin:8px 0 0;color:var(--muted,#5d6d78)}
.v150-peer{
 display:inline-block;
 font-size:.75rem;
 line-height:1.2;
 padding:4px 7px;
 border-radius:999px;
 background:#eef5f3;
 color:#294b46;
}
@media(max-width:1180px){.v150-indicator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .v150-indicator-grid{grid-template-columns:1fr 1fr}
 .v150-indicator-head{display:block}
 .v150-indicator-head>.pill{display:inline-block;margin-top:8px}
}
@media(max-width:520px){.v150-indicator-grid{grid-template-columns:1fr}}


/* WattAtlas v1.7.0 – Nutzwert & Berichte */
.monitor-next-action .monitor-data-action{white-space:nowrap;align-self:center;position:relative;z-index:2}
.detail-actions .comparison-toggle{min-width:142px;white-space:nowrap}
.v170-indicators,.v170-similar{margin-top:16px;padding:18px;border:1px solid rgba(25,59,56,.12);border-radius:14px;background:#fff}
.v170-indicator-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px}
.v170-indicator-card{padding:12px;border:1px solid rgba(25,59,56,.10);border-radius:10px;background:#f8fbfc;min-width:0}
.v170-indicator-card strong,.v170-indicator-card small,.v170-indicator-card span{display:block}
.v170-indicator-card strong{font-size:1.08rem;margin:5px 0;color:var(--navy,#0d315b)}
.v170-indicator-card p{font-size:.78rem;line-height:1.35;margin:7px 0 0}
.v170-similar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.v170-similar-card{text-align:left;padding:12px;border:1px solid rgba(25,59,56,.13);border-radius:10px;background:#fff;cursor:pointer}
.v170-similar-card:hover,.v170-similar-card:focus-visible{border-color:#1b73e8;box-shadow:0 0 0 2px rgba(27,115,232,.08)}
.v170-similar-card span,.v170-similar-card small{display:block;margin-top:3px}
.v170-report-indicators{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.v170-report-indicators span{padding:8px;border:1px solid rgba(25,59,56,.10);border-radius:8px;background:#f8fbfc}
.v170-report-indicators small,.v170-report-indicators strong{display:block}
@media(max-width:1180px){.v170-indicator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.v170-indicator-grid,.v170-similar-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.v170-indicator-grid,.v170-similar-grid,.v170-report-indicators{grid-template-columns:1fr}}


/* WattAtlas v1.7.2 – fachliche Darstellung */
.v172-indicator-title { font-weight:700; margin-bottom:8px; }
.v172-unknown {
  padding:8px 10px;
  border-radius:8px;
  background:#f7f8fa;
  color:#536273;
}
.v172-note {
  font-size:.82rem;
  line-height:1.35;
  color:#536273;
}


/* v1.7.3 frontend cleanup */
.stat-number,
.stat-label {
  white-space: normal;
}
.admin-run-status {
  word-break: normal;
}


/* v1.7.5 Frontend Stabil: National facts layout fix */
.atlas-national-facts{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(180px,1fr))!important;
 gap:16px!important;
 align-items:stretch!important;
 margin:24px 0!important;
}
.atlas-national-facts article{
 display:flex!important;
 align-items:center!important;
 gap:12px!important;
 min-height:92px!important;
 padding:18px!important;
 border:1px solid #dfe5df!important;
 border-radius:14px!important;
 background:#fff!important;
 box-sizing:border-box!important;
}
.atlas-national-facts article span{
 flex:0 0 34px!important;
 width:34px!important;
 text-align:center!important;
 font-size:24px!important;
}
.atlas-national-facts article div{
 min-width:0!important;
}
.atlas-national-facts strong{
 display:block!important;
 font-size:1.5rem!important;
 line-height:1.15!important;
 margin-bottom:4px!important;
}
.atlas-national-facts small{
 display:block!important;
 white-space:normal!important;
 line-height:1.3!important;
 color:var(--muted,#61736f)!important;
}

@media(max-width:900px){
 .atlas-national-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
 .atlas-national-facts{grid-template-columns:1fr!important}
}

/* Statistikzeilen nicht zusammenkleben */
.explorer-stats span{
 display:flex!important;
 flex-direction:column!important;
 gap:3px!important;
}
.explorer-stats strong{
 line-height:1.2!important;
}