/* ============================================
   GOGLE MAPS — Stylesheet
   Gleicher Header-Stil wie Gogle Weather
   ============================================ */

/* ---------- VARIABLES ---------- */
:root {
  --bg: #f0f2f5;
  --bg2: #e8eaed;
  --card: rgba(255,255,255,.92);
  --card-border: rgba(255,255,255,.5);
  --glass: rgba(255,255,255,.82);
  --glass-border: rgba(255,255,255,.3);
  --primary: #1a73e8;
  --primary-dark: #1557b0;
  --primary-light: #e8f0fe;
  --primary-glow: rgba(26,115,232,.2);
  --text: #202124;
  --text2: #5f6368;
  --text3: #9aa0a6;
  --text4: #dadce0;
  --border: #e8eaed;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg: 0 2px 12px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
  --radius: 24px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --font: 'Google Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --header-h: 72px;
  --sidebar-w: 260px;
  --transition: all .3s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg: #1a1a2e;
  --bg2: #16213e;
  --card: rgba(30,30,60,.92);
  --card-border: rgba(255,255,255,.08);
  --glass: rgba(20,20,40,.88);
  --glass-border: rgba(255,255,255,.06);
  --primary: #8ab4f8;
  --primary-dark: #669df6;
  --primary-light: rgba(138,180,248,.12);
  --primary-glow: rgba(138,180,248,.15);
  --text: #e8eaed;
  --text2: #9aa0a6;
  --text3: #5f6368;
  --text4: #3c4043;
  --border: rgba(255,255,255,.1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow: 0 1px 4px rgba(0,0,0,.24), 0 4px 16px rgba(0,0,0,.16);
  --shadow-lg: 0 2px 12px rgba(0,0,0,.32), 0 12px 40px rgba(0,0,0,.2);
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  height:100%;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  transition:background .4s,color .4s;
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;outline:none;background:none}
input{border:none;outline:none;background:none;font-family:inherit}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text4);border-radius:8px}

/* ---------- HEADER ---------- */
.header{
  width:100%;
  padding:0 28px;
  display:flex;align-items:center;gap:16px;
  height:var(--header-h);
  position:relative;z-index:1000;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--glass-border);
  transition:var(--transition);
  flex-shrink:0;
}

/* ---------- LOGO ---------- */
.logo{
  display:flex;align-items:center;gap:2px;flex-shrink:0;
  text-decoration:none;user-select:none;
  transition:transform .2s;
}
.logo:hover{transform:scale(1.02)}
.logo-text{
  font-size:22px;font-weight:700;
  letter-spacing:-.5px;line-height:1;
}
.logo-text .g {color:#4285f4}
.logo-text .o1{color:#ea4335}
.logo-text .g2{color:#fbbc04}
.logo-text .l {color:#34a853}
.logo-text .e {color:#ea4335}
.logo-sub{
  font-size:11px;font-weight:600;
  color:var(--text2);letter-spacing:.5px;
  text-transform:uppercase;
  align-self:flex-end;margin-bottom:3px;margin-left:4px;
}

/* ---------- SEARCH ---------- */
.search-wrap{
  flex:1;max-width:600px;
  position:relative;
  display:flex;align-items:center;
}
.search-icon{
  position:absolute;left:16px;
  color:var(--text2);font-size:20px;pointer-events:none;
}
#searchInput{
  width:100%;
  height:46px;
  padding:0 40px 0 48px;
  border-radius:var(--radius-sm);
  background:var(--card);
  border:1.5px solid var(--border);
  color:var(--text);
  font-size:15px;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
#searchInput::placeholder{color:var(--text3)}
#searchInput:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow), var(--shadow);
  background:var(--card);
}
.search-clear{
  position:absolute;right:12px;
  width:28px;height:28px;
  display:none;align-items:center;justify-content:center;
  border-radius:50%;
  color:var(--text2);
  transition:var(--transition);
}
.search-clear:hover{background:var(--bg2);color:var(--text)}
.search-clear.visible{display:flex}
.search-clear .material-symbols-outlined{font-size:18px}

.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  overflow:hidden;z-index:500;
  display:none;
  max-height:320px;overflow-y:auto;
}
.search-results.open{display:block}
.search-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  cursor:pointer;
  transition:background .15s;
}
.search-item:hover{background:var(--primary-light)}
.search-item .material-symbols-outlined{color:var(--primary);font-size:20px;flex-shrink:0}
.search-item-name{font-size:14px;font-weight:500;color:var(--text)}
.search-item-sub{font-size:12px;color:var(--text2)}
.search-loading{padding:16px;text-align:center;color:var(--text2);font-size:14px}

/* ---------- HEADER ACTIONS ---------- */
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  color:var(--text2);
  transition:var(--transition);
}
.icon-btn:hover{background:var(--primary-light);color:var(--primary)}
.icon-btn .material-symbols-outlined{font-size:22px}

/* ---------- LAYOUT ---------- */
.map-wrapper{
  position:relative;
  flex:1;
  display:flex;
  overflow:hidden;
}

/* ---------- MAP ---------- */
#map{
  flex:1;
  height:100%;
  z-index:1;
  transition:filter .4s;
}
[data-theme="dark"] #map{filter:brightness(.85) saturate(.9) hue-rotate(180deg) invert(1)}
[data-theme="dark"] .leaflet-tile{filter:none}

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:absolute;left:16px;top:16px;
  width:var(--sidebar-w);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--card-border);
  z-index:500;
  padding:16px;
  display:flex;flex-direction:column;gap:16px;
  transform:translateX(0);
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
  opacity:1;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.sidebar.hidden{
  transform:translateX(calc(-100% - 32px));
  opacity:0;pointer-events:none;
}

.sidebar-header{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:600;color:var(--primary);
}
.sidebar-header .material-symbols-outlined{font-size:20px}

.layer-section{display:flex;flex-direction:column;gap:8px}
.layer-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}

.layer-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.layer-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 6px;
  border-radius:var(--radius-xs);
  background:var(--bg);
  color:var(--text2);
  font-size:11px;font-weight:500;
  transition:var(--transition);
  border:1.5px solid transparent;
}
.layer-btn .material-symbols-outlined{font-size:20px}
.layer-btn:hover{background:var(--primary-light);color:var(--primary)}
.layer-btn.active{
  background:var(--primary-light);
  color:var(--primary);
  border-color:var(--primary);
}

.quick-btns{display:flex;flex-direction:column;gap:4px}
.quick-btn{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  border-radius:var(--radius-xs);
  background:var(--bg);
  color:var(--text2);
  font-size:13px;font-weight:500;
  transition:var(--transition);
  text-align:left;
}
.quick-btn .material-symbols-outlined{font-size:17px;color:var(--primary)}
.quick-btn:hover{background:var(--primary-light);color:var(--primary)}

.coord-display{
  font-size:12px;color:var(--text2);
  background:var(--bg);
  padding:8px 12px;
  border-radius:var(--radius-xs);
  font-variant-numeric:tabular-nums;
  font-family:monospace;
  line-height:1.8;
}

/* ---------- MAP CONTROLS ---------- */
.map-controls{
  position:absolute;right:16px;bottom:40px;
  display:flex;flex-direction:column;gap:4px;
  z-index:400;
}
.map-ctrl-btn{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);
  border-radius:var(--radius-xs);
  box-shadow:var(--shadow);
  color:var(--text);
  font-size:22px;
  border:1px solid var(--border);
  transition:var(--transition);
  backdrop-filter:blur(10px);
}
.map-ctrl-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.map-ctrl-btn .material-symbols-outlined{font-size:20px}

/* ---------- SIDEBAR TOGGLE ---------- */
.sidebar-toggle{
  position:absolute;left:16px;bottom:40px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);
  border-radius:var(--radius-xs);
  box-shadow:var(--shadow-lg);
  color:#fff;
  z-index:400;
  transition:var(--transition);
}
.sidebar-toggle:hover{background:var(--primary-dark)}
.sidebar-toggle .material-symbols-outlined{font-size:22px}

/* ---------- LEAFLET OVERRIDES ---------- */
.leaflet-control-zoom{display:none}
.leaflet-control-attribution{
  background:rgba(255,255,255,.75)!important;
  backdrop-filter:blur(8px);
  font-size:10px;
  border-radius:8px 0 0 0!important;
}
[data-theme="dark"] .leaflet-control-attribution{background:rgba(0,0,0,.5)!important;color:#aaa}

/* ---------- TOAST ---------- */
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.toast{
  position:fixed;bottom:32px;left:50%;
  transform:translateX(-50%);
  background:var(--text);
  color:var(--bg);
  padding:10px 20px;
  border-radius:var(--radius-xs);
  font-size:14px;font-weight:500;
  box-shadow:var(--shadow-lg);
  z-index:9999;
  opacity:0;pointer-events:none;
  white-space:nowrap;
  transition:opacity .3s;
}
.toast.show{opacity:1;animation:slideUp .3s ease}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .header{padding:0 14px;gap:8px}
  .logo-sub{display:none}
  .search-wrap{max-width:unset}
  .sidebar{width:220px}
  --sidebar-w:220px;
}
@media(max-width:480px){
  .header-actions .icon-btn:first-child{display:none}
  .sidebar{left:8px;top:8px;width:200px}
}