/* =====================================================================
   theme.css — világos mód
   =====================================================================
   Minden oldal a saját <style> blokkjában definiálja a :root változóit
   (sötét alapértelmezéssel). Ez a fájl CSAK a világos mód felülírásait
   tartalmazza, és minden oldalon be van hivatkozva.

   Miért `:root[data-theme="light"]` és nem sima `[data-theme="light"]`?
   Így a specificitás (0,2,0) magasabb, mint a lapok `:root`-jáé (0,1,0),
   tehát biztosan felülírja - függetlenül attól, hogy a <link> a lap saját
   <style> blokkja elé vagy mögé kerül. Ez azért fontos, mert hat külön
   oldalról van szó, és nem akartunk mindegyikben sorrendfüggő trükközni.

   A --map-* változók a Leaflet alaptérkép körüli felületekhez kellenek
   (háttér betöltés közben, SVG-címke halo, grafikon rácsvonalak) - magát
   az alaptérkép-csempét a theme.js választja ki témánként (Esri Gray
   Canvas, lásd bindBasemap).
   ===================================================================== */

:root {
  /* sötét mód (alapértelmezés) - a térképhez tartozó értékek */
  --map-bg: #0d1218;
  --map-halo: #0a0e13;          /* SVG feliratok körvonala a térképen */
  --map-overlay-bg: rgba(10, 14, 19, 0.92);
  --grid-line: #1e2730;         /* diagramok rácsvonalai */
}

:root[data-theme="light"] {
  /* "Meleg papír" - krémszínű alap, mint egy régi meteorológiai napló lapja;
     a borostyán égetettebb tónusa és a puha, meleg szürkék tartják a
     sötét módból ismerős karaktert, csak nappali fényben. */
  --bg: #f5efe3;
  --panel: #fffcf5;
  --panel-edge: #e2d5b8;
  --amber: #b5651d;
  --amber-dim: #d9a465;
  --text: #2c2213;
  --muted: #8a7856;

  /* index.html / terkep.html akcentusai */
  --cyan: #0e8a76;
  --red: #b8402a;
  --blue: #34568f;
  --green: #4d8a3c;

  /* duna.html akcentusai */
  --water: #2f6690;
  --rise: #b8402a;
  --fall: #2f8f6c;
  --rain-m: #2f6690;
  --rain-f: #a1701f;

  /* térkép - az Esri Light Gray Canvas alapszínéhez közelítve, hogy ne
     villanjon más szín betöltés közben */
  --map-bg: #f2f0ec;
  --map-halo: #fffcf5;
  --map-overlay-bg: rgba(255, 252, 245, 0.94);
  --grid-line: #e2d5b8;
}

/* A böngésző a szomszédos térkép-csempéket (256x256 px) egymás mellé rakja,
   és a képek élein finom élsimítás miatt halvány rácsvonalak ("varratok")
   látszanak - főleg sima, egyszínű területeken. Ismert Leaflet/böngésző
   rendering-jelenség; a szabványos javítás egy 1px átlátszó körvonal a
   csempéken, ami elveszi a böngésző kedvét az élsimítástól a csempehatáron. */
.leaflet-tile {
  outline: 1px solid transparent;
}

/* --- világos módban finomhangolt elemek --- */
:root[data-theme="light"] body {
  background: var(--bg);
}
:root[data-theme="light"] .leaflet-container {
  background: var(--map-bg) !important;
}
:root[data-theme="light"] #map {
  background: var(--map-bg);
}
/* a sötét módban jól működő "izzó" hatások világosban túl haloványak */
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel {
  box-shadow: 0 1px 3px rgba(20, 32, 43, 0.07);
}
/* Leaflet vezérlők */
:root[data-theme="light"] .leaflet-bar a {
  background: var(--panel);
  color: var(--text);
  border-color: var(--panel-edge);
}
:root[data-theme="light"] .leaflet-bar a:hover { background: #f2f5f8; }
:root[data-theme="light"] .leaflet-popup-content-wrapper,
:root[data-theme="light"] .leaflet-popup-tip {
  background: var(--panel);
  color: var(--text);
  border-color: var(--panel-edge);
}

/* --- a téma-váltó gomb (a theme.js szúrja be) --- */
.theme-toggle {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--panel-edge);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.theme-toggle:hover { color: var(--text); border-color: var(--amber-dim); }
.theme-toggle .tt-icon { font-size: 12px; line-height: 1; }

/* =====================================================================
   Duna-oldal saját SVG-térképe
   =====================================================================
   Ez nem Leaflet, hanem kézzel rajzolt SVG (Natural Earth geometriából),
   ezért a színei nem a csempékből jönnek - itt külön kell megadni a
   világos megfelelőket, különben sötét folt maradna a világos lapon.
   ===================================================================== */
:root[data-theme="light"] .sea        { fill: #dce7f0; }
:root[data-theme="light"] .land       { stroke: #a8bccd; }
:root[data-theme="light"] .land.basin { fill: #f4f8fb; }
:root[data-theme="light"] .land.other { fill: #e6ecf2; stroke: #bdcbd8; }
:root[data-theme="light"] .cty        { fill: #7e8fa0; }
:root[data-theme="light"] .trib       { stroke: #7fa9c9; }
:root[data-theme="light"] .flowbg     { stroke: rgba(3, 105, 161, .16); }
:root[data-theme="light"] .flowdash   { stroke: #0b4f7a; opacity: .55; }
/* a feliratok körvonala világosban fehér, hogy olvashatók maradjanak */
:root[data-theme="light"] .nm,
:root[data-theme="light"] .dl,
:root[data-theme="light"] .rl         { stroke: #ffffff; }
:root[data-theme="light"] .nm         { fill: #14202b; }
:root[data-theme="light"] .le         { fill: #5a6b7a; }
:root[data-theme="light"] .n-eq       { fill: #7e8fa0; }
:root[data-theme="light"] .n-na       { stroke: #7e8fa0; }
:root[data-theme="light"] .rl-m       { fill: #0b4f7a; }
:root[data-theme="light"] .rl-f       { fill: #8a5a00; }
:root[data-theme="light"] .ball       { background: #7e8fa0; }

/* radar/térkép oldali apróságok */
:root[data-theme="light"] .node       { stroke: #ffffff; }
:root[data-theme="light"] .badge.b-eq { background: rgba(20,32,43,.06); }
:root[data-theme="light"] .row:hover,
:root[data-theme="light"] .row.sel    { background: rgba(20,32,43,.05); }
:root[data-theme="light"] .layer-item:hover  { background: rgba(176,111,0,.10); }
:root[data-theme="light"] .layer-item.active { background: rgba(176,111,0,.16); }
:root[data-theme="light"] .rb.on             { background: rgba(176,111,0,.12); }
:root[data-theme="light"] .layer-menu {
  box-shadow: 0 10px 30px rgba(20, 32, 43, .16);
}
:root[data-theme="light"] .nav-tab.active {
  background: rgba(176, 111, 0, .12);
}

/* modellteszt.html akcentusai - a sötét módban használt fehér-áttetsző
   overlay-ek (kijelölt gomb, sáv-háttér, panel-háttér) világos alapon
   szinte láthatatlanok lennének, ezért itt sötét tónusú megfelelőt kapnak. */
:root[data-theme="light"] .mt-var-btn.on,
:root[data-theme="light"] .mt-rc-btn.on {
  background: rgba(44, 34, 19, 0.05);
  border-color: #cbb98a;
}
:root[data-theme="light"] .mt-bar-wrap {
  background: rgba(44, 34, 19, 0.07);
}
:root[data-theme="light"] .mt-bucket,
:root[data-theme="light"] .mt-rc-stat {
  background: rgba(44, 34, 19, 0.03);
}

/* fejléc-logó (favicon.svg mint kis logó a nav-tabs elején) */
.site-logo-link { display: inline-flex; align-items: center; margin-right: 4px; flex-shrink: 0; }
.site-logo { width: 22px; height: 22px; display: block; }