<!-- AW-forecast.php (ML) Version 1.03 - 27-Dec-2022 on PHP 7.4.33 -->
<!-- charsetOutput UTF-8 selected for all languages. -->
<!-- AWlangCharsets
Array
(
    [bg] => UTF-8
    [cs] => UTF-8
    [el] => UTF-8
    [he] => UTF-8
    [hu] => UTF-8
    [ro] => UTF-8
    [pl] => UTF-8
    [si] => UTF-8
    [sk] => UTF-8
    [sr] => UTF-8
    [ru] => UTF-8
)
 
-->
<!-- temps in C -->
<!-- loading from ./cache/AW-forecast-json-0-si-sr.txt (30416 bytes) -->
<!-- using charsetInput='UTF-8' charsetOutput='UTF-8' doIconv='' doRTL='' -->
<!-- loaded translations for lang='sr' for period names -->
<!-- translation file ./AWlang/plaintext-parser-lang-sr.txt loaded -->
<!-- using charset 'UTF-8' -->
<!-- using charset 'WINDOWS-1250' -->
<!-- processing JSON entries for forecast -->
<!-- rawJSON size is 29163 bytes -->
<!-- AW_prepareJSON: Success. Valid UTF-8. -->
<!-- json_decode returns  - No errors -->
<!-- Aerisweather JSON success='1' error='' -->
<!-- using 'Europe/Belgrade' for timezone -->
<!-- wind unit for 'si' set to 'm/s' -->
<!-- AWforecasttext='Cloudy with Light Rain Showers'
              trans='Oblačno, Slabi Pljuskovi Kiše' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=N using  array substitute for NESW=>'S,I,J,Z' output='S' -->
<!-- AW_decode_conds code=':VL:RW' decoded as 'Very light rain showers'
   FCpart['weather']='Cloudy with Light Rain Showers' -->
<!-- AW_octets in=100 octets=8  clouds=ovc -->
<!-- AW_img_replace replace icon 'showers.png' with 'hi_shwrs100.gif' pop=100 -->
<!-- AWforecasttext='Partly Cloudy'
              trans='Delimično Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=WNW using  array substitute for NESW=>'S,I,J,Z' output='ZSZ' -->
<!-- AW_decode_conds code='::SC' decoded as 'Partly Cloudy'
   FCpart['weather']='Partly Cloudy' -->
<!-- AW_octets in=54 octets=4.3  clouds=sct -->
<!-- AW_img_replace replace icon 'pcloudyn.png' with 'nsct.gif' pop=0 -->
<!-- AWforecasttext='Cloudy'
              trans='Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NNW using  array substitute for NESW=>'S,I,J,Z' output='SSZ' -->
<!-- AW_decode_conds code='::OV' decoded as 'Overcast'
   FCpart['weather']='Cloudy' -->
<!-- AW_octets in=99 octets=7.9  clouds=bkn -->
<!-- AW_img_replace replace icon 'cloudy.png' with 'ovc.gif' pop=0 -->
<!-- AWforecasttext='Mostly Clear'
              trans='Pretežno Vedro' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NW using  array substitute for NESW=>'S,I,J,Z' output='SZ' -->
<!-- AW_decode_conds code='::FW' decoded as 'Mostly Clear'
   FCpart['weather']='Mostly Clear' -->
<!-- AW_octets in=15 octets=1.2  clouds=few -->
<!-- AW_img_replace replace icon 'fairn.png' with 'nfew.gif' pop=0 -->
<!-- AWforecasttext='Mostly Sunny'
              trans='Pretežno Sunčano' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=N using  array substitute for NESW=>'S,I,J,Z' output='S' -->
<!-- AW_decode_conds code='::FW' decoded as 'Mostly Clear'
   FCpart['weather']='Mostly Sunny' -->
<!-- AW_octets in=28 octets=2.2  clouds=few -->
<!-- AW_img_replace replace icon 'fair.png' with 'few.gif' pop=0 -->
<!-- AWforecasttext='Clear'
              trans='Vedro' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=N using  array substitute for NESW=>'S,I,J,Z' output='S' -->
<!-- AW_decode_conds code='::CL' decoded as 'Clear'
   FCpart['weather']='Clear' -->
<!-- AW_octets in=0 octets=0  clouds=skc -->
<!-- AW_img_replace using curicon=nskc.jpg instead based on cloud coverage -->
<!-- AW_img_replace replace icon 'clearn.png' with 'nskc.gif' pop=0 -->
<!-- AWforecasttext='Sunny'
              trans='Sunčano' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NNW using  array substitute for NESW=>'S,I,J,Z' output='SSZ' -->
<!-- AW_decode_conds code='::CL' decoded as 'Clear'
   FCpart['weather']='Sunny' -->
<!-- AW_octets in=6 octets=0.5  clouds=skc -->
<!-- AW_img_replace replace icon 'sunny.png' with 'skc.gif' pop=0 -->
<!-- AWforecasttext='Mostly Clear'
              trans='Pretežno Vedro' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NW using  array substitute for NESW=>'S,I,J,Z' output='SZ' -->
<!-- AW_decode_conds code='::FW' decoded as 'Mostly Clear'
   FCpart['weather']='Mostly Clear' -->
<!-- AW_octets in=16 octets=1.3  clouds=few -->
<!-- AW_img_replace replace icon 'fairn.png' with 'nfew.gif' pop=0 -->
<!-- AWforecasttext='Partly Cloudy'
              trans='Delimično Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=WNW using  array substitute for NESW=>'S,I,J,Z' output='ZSZ' -->
<!-- AW_decode_conds code='::SC' decoded as 'Partly Cloudy'
   FCpart['weather']='Partly Cloudy' -->
<!-- AW_octets in=47 octets=3.8  clouds=sct -->
<!-- AW_img_replace replace icon 'pcloudy.png' with 'sct.gif' pop=0 -->
<!-- AWforecasttext='Mostly Cloudy with Showers'
              trans='Pretežno Oblačno, Pljuskovi' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NNE using  array substitute for NESW=>'S,I,J,Z' output='SSI' -->
<!-- AW_decode_conds code=':VL:RW' decoded as 'Very light rain showers'
   FCpart['weather']='Mostly Cloudy with Showers' -->
<!-- AW_octets in=80 octets=6.4  clouds=bkn -->
<!-- AW_img_replace replace icon 'mcloudyrn.png' with 'nra10.gif' pop=10 -->
<!-- AWforecasttext='Sunny'
              trans='Sunčano' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=N using  array substitute for NESW=>'S,I,J,Z' output='S' -->
<!-- AW_decode_conds code='::CL' decoded as 'Clear'
   FCpart['weather']='Sunny' -->
<!-- AW_octets in=5 octets=0.4  clouds=skc -->
<!-- AW_img_replace replace icon 'sunny.png' with 'skc.gif' pop=0 -->
<!-- AWforecasttext='Mostly Cloudy'
              trans='Pretežno Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=N using  array substitute for NESW=>'S,I,J,Z' output='S' -->
<!-- AW_decode_conds code='::BK' decoded as 'Mostly Cloudy'
   FCpart['weather']='Mostly Cloudy' -->
<!-- AW_octets in=94 octets=7.5  clouds=bkn -->
<!-- AW_img_replace replace icon 'mcloudyn.png' with 'nbkn.gif' pop=0 -->
<!-- AWforecasttext='Partly Cloudy'
              trans='Delimično Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=WNW using  array substitute for NESW=>'S,I,J,Z' output='ZSZ' -->
<!-- AW_decode_conds code='::SC' decoded as 'Partly Cloudy'
   FCpart['weather']='Partly Cloudy' -->
<!-- AW_octets in=42 octets=3.4  clouds=sct -->
<!-- AW_img_replace replace icon 'pcloudy.png' with 'sct.gif' pop=0 -->
<!-- AWforecasttext='Clear'
              trans='Vedro' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=WNW using  array substitute for NESW=>'S,I,J,Z' output='ZSZ' -->
<!-- AW_decode_conds code='::CL' decoded as 'Clear'
   FCpart['weather']='Clear' -->
<!-- AW_octets in=5 octets=0.4  clouds=skc -->
<!-- AW_img_replace using curicon=nskc.jpg instead based on cloud coverage -->
<!-- AW_img_replace replace icon 'clearn.png' with 'nskc.gif' pop=0 -->
<!-- get-UV-forecast-inc.php V1.09 - 12-Feb-2021 -->
<!-- UV forecast courtesy of and Copyright &copy; KNMI/ESA (http://www.temis.nl/). Used with permission. -->
<!-- UV data load from from cache ./cache/uv-forecast.txt -->
<!-- Date='11/10/2026', UV='2.8' DOW='Sunday' YMD='20261011' -->
<!-- Date='12/10/2026', UV='2.6' DOW='Monday' YMD='20261012' -->
<!-- Date='13/10/2026', UV='2.4' DOW='Tuesday' YMD='20261013' -->
<!-- Date='14/10/2026', UV='2.8' DOW='Wednesday' YMD='20261014' -->
<!-- Date='15/10/2026', UV='2.6' DOW='Thursday' YMD='20261015' -->
<!-- Date='16/10/2026', UV='2.5' DOW='Friday' YMD='20261016' -->
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meteo Subotica - Vreme u Subotici, Srbija</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Syne:wght@400;600;700;800&family=Barlow+Condensed:wght@600;700;800&display=swap" rel="stylesheet">


<style>
  /* ── Default (dark) vars ── no :root so html[data-theme] always wins ── */
  html {
    --sky:       #0d1b2a;
    --sky-mid:   #1b2d42;
    --sky-light: #243447;
    --card:      rgba(255,255,255,0.05);
    --card-b:    rgba(255,255,255,0.09);
    --border:    rgba(255,255,255,0.10);
    --text:      #e8eef5;
    --muted:     #8ea6c0;
    --accent:    #4fc3f7;
    --warm:      #ff8a65;
    --cool:      #64b5f6;
    --green:     #81c784;
    --yellow:    #ffd54f;
    --radius:    14px;
    --font-head: 'Syne', sans-serif;
    --font-mono: 'DM Mono', monospace;
  }
  /* Light theme — set by anti-FOUC setAttribute('data-theme','light') */
  html[data-theme="light"] {
    --sky:    #e8f4fd;
    --sky-mid:#d0eaf8;
    --card:   rgba(255,255,255,0.75);
    --card-b: rgba(255,255,255,0.90);
    --border: rgba(0,100,180,0.14);
    --text:   #0d2840;
    --muted:  #4a7a9b;
    --accent: #0277bd;
    --warm:   #e65100;
    --cool:   #01579b;
    --yellow: #f57f17;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: var(--sky); }
  body {
    background: var(--sky);
    background-image: radial-gradient(ellipse at 20% 10%, rgba(79,195,247,0.07) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 90%, rgba(100,181,246,0.05) 0%, transparent 60%);
    color: var(--text); font-family: var(--font-mono); min-height: 100vh; line-height: 1.5;
    transition: background-color 0.4s ease, color 0.3s ease;
  }
  html[data-theme="light"] body {
    background-image: radial-gradient(ellipse at 30% 0%, rgba(255,220,80,0.15) 0%, transparent 55%),
                      radial-gradient(ellipse at 80% 100%, rgba(2,119,189,0.08) 0%, transparent 55%);
  }
  /* TOP BAR — explicit light override */
  
  
  /* Smooth theme transitions */
  .card, .stat-label, .stat-val, .card-title,
  .baro-big, .rain-big, .wind-dir-big, .wind-speed-big,
  .tmg-cell-val, .tmg-cell-time, .tmg-row-label, .tmg-header,
  .sunmoon-val, .sunmoon-label, .daylight-val, .daylight-change,
  .stations-table th, .stations-table td,
  .media-panel, .media-panel-title {
    transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease;
  }
  
  
  /* GRID */
  .dashboard { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }

  /* CARD BASE */
  .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; transition: border-color 0.2s; }
  .card:hover { border-color: rgba(79,195,247,0.3); }
  .card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0.4; }
  .card-title { font-family: var(--font-head); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
  .card-title svg { opacity: 0.6; flex-shrink: 0; }

  /* GRID COLS */
  .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; } .col-6 { grid-column: span 6; } .col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; }
  @media (max-width: 900px) { .col-4,.col-3,.col-6,.col-8 { grid-column: span 6; } }
  @media (max-width: 580px) { .col-4,.col-3,.col-6,.col-8,.col-12 { grid-column: span 12; } }

  /* ── TEMPERATURE HERO ─── */
  .temp-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
  .temp-wx-icon { flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
  .temp-wx-icon svg { width: 80px; height: 80px; filter: drop-shadow(0 0 12px rgba(255,213,79,0.25)); }
  .temp-hero-right { display: flex; flex-direction: column; gap: 4px; }
  .temp-big { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.4rem, 5.5vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--text); letter-spacing: 0.01em; }
  .temp-condition { font-size: 0.92rem; color: var(--accent); font-family: var(--font-head); font-weight: 600; }
  .temp-feels { font-size: 0.72rem; color: var(--muted); }
  .temp-feels strong { color: var(--text); }

  /* ── TODAY / YESTERDAY GRID ─── */
  .temp-minmax-grid { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
  .tmg-header-row { display: grid; grid-template-columns: 72px 1fr 1fr; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); }
  .tmg-header { font-size: 0.58rem; font-family: var(--font-head); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 6px 12px; }
  .tmg-header:not(:last-child) { border-right: 1px solid var(--border); }
  .tmg-data-row { display: grid; grid-template-columns: 72px 1fr 1fr; }
  .tmg-data-row:not(:last-child) { border-bottom: 1px solid var(--border); }
  .tmg-row-label { font-size: 0.6rem; font-family: var(--font-head); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; display: flex; align-items: center; border-right: 1px solid var(--border); background: rgba(255,255,255,0.02); }
  .tmg-cell { padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
  .tmg-cell:not(:last-child) { border-right: 1px solid var(--border); }
  .tmg-cell-val { font-size: 0.92rem; font-weight: 600; }
  .tmg-cell-time { font-size: 0.62rem; color: var(--muted); }
  .tmg-yest .tmg-cell-val { opacity: 0.65; }

  /* ── DIFF PILLS ─── */
  .temp-diff-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
  .diff-pill { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 0.72rem; }
  .diff-pill-label { color: var(--muted); font-size: 0.62rem; white-space: nowrap; }
  .diff-pill-val { font-weight: 700; font-size: 0.82rem; }
  .diff-up   { color: var(--warm); }
  .diff-down { color: var(--cool); }
  .diff-eq   { color: var(--muted); }

  /* ── THERMO BAR ─── */
  .thermo-bar-wrap { margin-bottom: 16px; }
  .thermo-bar-labels-top { display: flex; justify-content: space-between; font-size: 0.62rem; margin-bottom: 4px; }
  .thermo-bar-track { height: 12px; background: rgba(255,255,255,0.06); border-radius: 6px; position: relative; overflow: visible; }
  .thermo-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #64b5f6 0%, #81c784 40%, #ffd54f 70%, #ff8a65 100%); }
  .thermo-bar-needle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background: var(--sky-mid); border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 10px rgba(79,195,247,0.7); transition: left 0.6s ease; }
  .thermo-bar-minmax { display: flex; justify-content: space-between; font-size: 0.62rem; margin-top: 5px; }

  /* records */
  .rec-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
  .rec-table td { padding: 5px 0; font-size: 0.74rem; }
  .rec-table td:last-child { text-align: right; }
  .rec-table tr { border-bottom: 1px solid var(--border); }
  .rec-table tr:last-child { border-bottom: none; }
  .lbl-hot { color: var(--warm); font-weight: 600; } .lbl-cold { color: var(--cool); font-weight: 600; }

  /* STAT ROWS */
  .stat-list { display: flex; flex-direction: column; gap: 8px; }
  .stat-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid var(--border); gap: 8px; }
  .stat-row:last-child { border-bottom: none; padding-bottom: 0; }
  .stat-label { font-size: 0.72rem; color: var(--muted); }
  .stat-val { font-size: 0.88rem; font-weight: 500; text-align: right; }
  .stat-val.accent { color: var(--accent); }
  .stat-hi { color: var(--warm); } .stat-lo { color: var(--cool); }

  /* ── WIND COMPASS ─── */
  .wind-compass-wrap { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
  .wind-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .wind-dir-big { font-family: 'Barlow Condensed', sans-serif; font-size: 2.6rem; font-weight: 800; color: var(--warm); line-height: 1; letter-spacing: 0.02em; }
  .wind-speed-big { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: 0.02em; }
  .wind-speed-unit { font-size: 1.1rem; font-weight: 400; color: var(--muted); }
  .wind-bft { display: inline-block; background: rgba(79,195,247,0.12); border: 1px solid rgba(79,195,247,0.25); border-radius: 6px; padding: 4px 12px; font-size: 0.72rem; color: var(--accent); margin: 8px 0; font-weight: 500; }
  /* Compass SVG colors adapt to theme via CSS filter */
  #wind-compass-svg svg { filter: drop-shadow(0 0 6px rgba(79,195,247,0.15)); }

  /* BAROMETER */
  .baro-big { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: 0.01em; }
  .baro-trend { font-size: 0.78rem; color: var(--yellow); font-weight: 600; margin-bottom: 12px; }

  /* SUN/MOON */
  .sunmoon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 14px; }
  .sunmoon-item { display: flex; flex-direction: column; gap: 1px; }
  .sunmoon-label { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
  .sunmoon-val { font-size: 0.88rem; font-weight: 500; }
  .moon-section { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
  .moon-section img { width: 48px; height: 48px; }
  .moon-phase-name { font-size: 0.8rem; font-weight: 600; color: var(--yellow); }
  .moon-illum { font-size: 0.72rem; color: var(--muted); }

  /* ── UV BADGE ─── */
  .uv-display { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
  .uv-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid; flex-shrink: 0; transition: all 0.4s ease; }
  .uv-circle-num { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em; }
  .uv-circle-label { font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; font-family: var(--font-head); }
  .uv-info { flex: 1; }
  .uv-category-name { font-family: var(--font-head); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
  /* UV color states */
  .uv-low      { color: #66bb6a; border-color: #66bb6a; background: rgba(102,187,106,0.1); }
  .uv-moderate { color: #ffd54f; border-color: #ffd54f; background: rgba(255,213,79,0.1); }
  .uv-high     { color: #ff8a65; border-color: #ff8a65; background: rgba(255,138,101,0.1); }
  .uv-veryhigh { color: #ef5350; border-color: #ef5350; background: rgba(239,83,80,0.1); }
  .uv-extreme  { color: #ab47bc; border-color: #ab47bc; background: rgba(171,71,188,0.1); }
  .uv-cat-low      { color: #66bb6a; }
  .uv-cat-moderate { color: #ffd54f; }
  .uv-cat-high     { color: #ff8a65; }
  .uv-cat-veryhigh { color: #ef5350; }
  .uv-cat-extreme  { color: #ab47bc; }

  .uv-scale-bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #66bb6a 0%, #ffd54f 25%, #ff8a65 50%, #ef5350 75%, #ab47bc 100%); position: relative; margin: 8px 0 4px; }
  .uv-scale-pointer { position: absolute; top: -5px; width: 2px; height: 16px; background: white; border-radius: 1px; box-shadow: 0 0 5px rgba(255,255,255,0.8); transform: translateX(-50%); transition: left 0.5s ease; }
  .uv-scale-ticks { display: flex; justify-content: space-between; font-size: 0.56rem; color: var(--muted); }

  /* RAIN */
  .rain-big { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--cool); margin-bottom: 2px; letter-spacing: 0.01em; }

  /* FORECAST STRIP */
  .forecast-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .fcst-day { flex: 0 0 120px; background: var(--card-b); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; text-align: center; transition: border-color 0.2s; }
  .fcst-day:hover { border-color: rgba(79,195,247,0.35); }
  .fcst-day-title { font-size: 0.68rem; font-family: var(--font-head); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
  .fcst-day-icon { margin-bottom: 6px; } .fcst-day-icon img { width: 48px; height: 34px; object-fit: contain; }
  .fcst-day-temp { font-size: 0.8rem; font-weight: 500; color: var(--accent); }

  /* MEDIA GRID */
  .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 700px) { .media-grid { grid-template-columns: 1fr; } }
  .media-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .media-panel-title { font-family: var(--font-head); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .media-panel-body { width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .media-panel-body img, .media-panel-body iframe { width: 100%; height: 100%; object-fit: cover; border: none; }

  /* SECTION TITLE */
  .section-title { grid-column: span 12; font-family: var(--font-head); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-top: 4px; }

  /* CLOUD BASE */
  .cloud-base-img { display: flex; justify-content: center; }
  .cloud-base-img img { max-height: 140px; }

  /* DAYLIGHT */
  .daylight-val { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--yellow); margin: 8px 0 2px; }
  .daylight-change { font-size: 0.72rem; color: var(--muted); }

  /* FB / ADS */
  .fb-wrap { grid-column: span 12; display: flex; gap: 14px; flex-wrap: wrap; }
  .fb-wrap > div { flex: 1; min-width: 300px; }
  .ad-panel { text-align: center; }

  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  /* ── STATIONS TABLE ─── */
  .stations-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); }
  .stations-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
  .stations-table thead tr { background: rgba(255,255,255,0.05); border-bottom: 2px solid var(--border); }
  .stations-table th { padding: 10px 14px; text-align: left; font-family: var(--font-head); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .stations-table th:not(:first-child) { text-align: right; }
  .stations-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; }
  .stations-table tbody tr:last-child { border-bottom: none; }
  .stations-table tbody tr:hover { background: rgba(79,195,247,0.05); }
  .stations-table td { padding: 9px 14px; white-space: nowrap; }
  .stations-table td:not(:first-child) { text-align: right; font-family: var(--font-mono); }
  .st-name { font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: 0.82rem; }
  .st-temp { font-weight: 600; color: var(--text); font-size: 0.9rem; }
  .st-hi   { color: var(--warm); }
  .st-lo   { color: var(--cool); }
  .st-time { color: var(--muted); font-size: 0.72rem; }

  /* ── LIVE PULSE ─── */
  .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #66bb6a; margin-right: 5px; flex-shrink: 0; animation: livepulse 2s ease-in-out infinite; }
  @keyframes livepulse { 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(102,187,106,0.5); } 50%{ opacity:0.75; box-shadow:0 0 0 5px rgba(102,187,106,0); } }

  /* AD panel */
  .ad-panel { text-align: center; }
</style>

<script src="wx-icons.js"></script>
</head>
<body>
<script>
(function(){
  var m=localStorage.getItem('wxThemeMode'),r=document.documentElement;
  if(m==='dark'){r.setAttribute('data-theme','dark');}
  else if(m==='light'){r.setAttribute('data-theme','light');}
  else{
    var ri='06:52',se='18:02';
    function p(s){if(!s)return null;s=s.trim();var t=s.replace(/[apm\s]/gi,'').split(':');var h=parseInt(t[0])||0,mi=parseInt(t[1])||0;if(/pm/i.test(s)&&h!==12)h+=12;if(/am/i.test(s)&&h===12)h=0;return h*60+mi;}
    var nm=new Date().getHours()*60+new Date().getMinutes(),sr=p(ri),ss=p(se);
    r.setAttribute('data-theme',(sr&&ss&&nm>=sr&&nm<ss)?'light':'dark');
  }
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

<style>
/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; gap:12px; padding:8px 20px;
  border-bottom:1px solid var(--border); background:var(--card-b);
  position:sticky; top:0; z-index:1000; backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  flex-wrap:wrap;
}
html[data-theme="light"] .topbar { background:rgba(255,255,255,0.92); }

/* Logo */
.topbar-logo a {
  display:flex; align-items:center; gap:14px; text-decoration:none; flex-shrink:0;
}
.topbar-logo svg.logo-icon {
  width:44px; height:44px; flex-shrink:0;
}
.logo-wordmark {
  display:flex; align-items:baseline; gap:0; line-height:1;
  font-family:'DM Sans','DM Mono',sans-serif;
}
.logo-su   { font-size:1.45rem; font-weight:300; color:var(--text);    letter-spacing:-.02em; }
.logo-meteo{ font-size:1.45rem; font-weight:300; color:#F76B1C;        letter-spacing:-.02em; }
.logo-info { font-size:.8rem;   font-weight:300; color:var(--muted);   letter-spacing:.01em; }
html[data-theme="light"] .logo-su { color:#1A1A2E; }
html[data-theme="dark"]  .logo-su { color:#E8EDF2; }

/* Nav */
.topbar-nav { display:flex; gap:2px; flex:1; justify-content:center; flex-wrap:wrap; }
.nav-link {
  padding:5px 14px; border-radius:7px;
  font-size:.75rem; font-weight:600; font-family:var(--font-mono);
  color:var(--muted); transition:.2s; white-space:nowrap; text-decoration:none;
}
.nav-link:hover { color:var(--text); background:var(--card); }
.nav-link.active { color:var(--accent); background:rgba(79,195,247,0.10); }
html[data-theme="light"] .nav-link.active { background:rgba(2,119,189,0.10); }

/* Right controls */
.topbar-right { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.topbar-ctrl {
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:7px; border:1px solid var(--border);
  font-size:.75rem; font-weight:600; font-family:var(--font-mono);
  color:var(--muted); background:var(--card-b);
  cursor:pointer; transition:.2s; white-space:nowrap;
  -webkit-appearance:none; appearance:none; outline:none;
}
.topbar-ctrl:hover { border-color:var(--accent); color:var(--text); }

/* Theme button */
#wx-theme-btn { min-width:90px; justify-content:center; }

/* Lang switcher dropdown */
.lang-switcher { position:relative; }
.lang-current {
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  border-radius:7px; border:1px solid var(--border);
  font-size:.68rem; font-weight:700; font-family:var(--font-mono);
  color:var(--muted); background:var(--card-b);
  cursor:pointer; transition:.2s; user-select:none; white-space:nowrap;
}
.lang-current:hover { border-color:var(--accent); color:var(--text); }
.lang-current svg { width:18px; height:13px; border-radius:2px; flex-shrink:0; }
.lang-current .lang-arrow { font-size:.5rem; opacity:.6; margin-left:1px; }
.lang-dropdown {
  display:none; position:absolute; right:0; top:calc(100% + 4px);
  background:var(--sky); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.3); overflow:hidden; z-index:2000; min-width:90px;
}
.lang-switcher.open .lang-dropdown { display:block; }
.lang-opt {
  display:flex; align-items:center; gap:8px; padding:7px 12px;
  font-size:.68rem; font-weight:700; font-family:var(--font-mono);
  color:var(--muted); cursor:pointer; transition:background .15s; text-decoration:none;
  white-space:nowrap;
}
.lang-opt:hover { background:var(--card); color:var(--text); }
.lang-opt.active { color:var(--accent); }
.lang-opt svg { width:18px; height:13px; border-radius:2px; flex-shrink:0; }

/* ── MOBILE: two rows ───────────────────────────────────────────────────── */
@media(max-width:700px) {
  .topbar {
    padding:8px 12px 0 12px;
    gap:0;
  }
  /* Row 1: logo left, controls right */
  .topbar-logo { flex:1; }
  .topbar-right {
    margin-left:0;
    gap:5px;
    padding-bottom:7px;
  }
  /* Row 2: nav full width with top divider */
  .topbar-nav {
    flex:0 0 100%;
    order:3;
    justify-content:center;
    border-top:1px solid var(--border);
    padding:5px 0 7px;
    gap:2px;
  }
  .nav-link { padding:4px 10px; font-size:.68rem; }
  .topbar-ctrl { padding:4px 8px; font-size:.68rem; }
  #wx-theme-btn { min-width:76px; }
}
</style>

<header class="topbar">
  <div class="topbar-logo">
    <a href="index-modern.php">
      <svg class="logo-icon" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="wxsg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#F5A623"/>
            <stop offset="100%" stop-color="#F76B1C"/>
          </linearGradient>
          <linearGradient id="wxcg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#5BB8F5"/>
            <stop offset="100%" stop-color="#2E86C1"/>
          </linearGradient>
        </defs>
        <g stroke="#F5A623" stroke-width="2.5" stroke-linecap="round" opacity=".85">
          <line x1="28" y1="22" x2="28" y2="16"/>
          <line x1="6"  y1="44" x2="0"  y2="44"/>
          <line x1="50" y1="44" x2="56" y2="44"/>
          <line x1="13" y1="29" x2="9"  y2="25"/>
          <line x1="43" y1="29" x2="47" y2="25"/>
          <line x1="13" y1="59" x2="9"  y2="63"/>
          <line x1="43" y1="59" x2="47" y2="63"/>
        </g>
        <circle cx="28" cy="44" r="17" fill="url(#wxsg)"/>
        <circle cx="36" cy="58" r="10" fill="url(#wxcg)"/>
        <circle cx="50" cy="52" r="14" fill="url(#wxcg)"/>
        <circle cx="64" cy="58" r="10" fill="url(#wxcg)"/>
        <rect x="26" y="58" width="48" height="13" rx="1" fill="url(#wxcg)"/>
      </svg>
      <div class="logo-wordmark">
        <span class="logo-su">su</span><span class="logo-meteo">meteo</span><span class="logo-info">.info</span>
      </div>
    </a>
  </div>

  <nav class="topbar-nav">
        <a href="index-modern.php"
       class="nav-link active">
      🏠 Početna    </a>
        <a href="wx-radar.php"
       class="nav-link">
      🌩️ Radar    </a>
        <a href="wx-forecast.php"
       class="nav-link">
      📅 Prognoza    </a>
        <a href="wx-reports.php"
       class="nav-link">
      📊 Izveštaji    </a>
          </nav>

  <div class="topbar-right">
    <button class="topbar-ctrl" id="wx-theme-btn" onclick="wxToggleTheme()">
      <span id="wx-theme-icon">🌤️</span>
      <span id="wx-theme-label">Auto</span>
    </button>
    <div class="lang-switcher" id="wx-lang-sw" onclick="this.classList.toggle('open')">
      <div class="lang-current">
        <svg viewBox="0 0 18 13" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="4.34" y="0" fill="#C6363C"/><rect width="18" height="4.34" y="4.33" fill="#0C4076"/><rect width="18" height="4.34" y="8.66" fill="#fff"/><rect x="1" y="1" width="5" height="7" rx=".5" fill="#C6363C" opacity=".9"/><rect x="1.5" y="1.3" width="4" height="5.5" fill="#0C4076"/><path d="M3.5 1.3 L3.5 6.8" stroke="#C6A020" stroke-width=".5"/><path d="M1.5 3.5 L5.5 3.5" stroke="#C6A020" stroke-width=".5"/><path d="M1.5 6.8 Q3.5 8.2 5.5 6.8" fill="#C6A020"/></svg> SRB        <span class="lang-arrow">▼</span>
      </div>
      <div class="lang-dropdown">
        <a class="lang-opt active" onclick="wxSwitchLang('sr')" href="#">
          <svg viewBox="0 0 18 13" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="4.34" y="0" fill="#C6363C"/><rect width="18" height="4.34" y="4.33" fill="#0C4076"/><rect width="18" height="4.34" y="8.66" fill="#fff"/><rect x="1" y="1" width="5" height="7" rx=".5" fill="#C6363C" opacity=".9"/><rect x="1.5" y="1.3" width="4" height="5.5" fill="#0C4076"/><path d="M3.5 1.3 L3.5 6.8" stroke="#C6A020" stroke-width=".5"/><path d="M1.5 3.5 L5.5 3.5" stroke="#C6A020" stroke-width=".5"/><path d="M1.5 6.8 Q3.5 8.2 5.5 6.8" fill="#C6A020"/></svg> SRB
        </a>
        <a class="lang-opt" onclick="wxSwitchLang('en')" href="#">
          <svg viewBox="0 0 18 13" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="13" fill="#012169"/><path d="M0,0 L18,13 M18,0 L0,13" stroke="#fff" stroke-width="2.6"/><path d="M0,0 L18,13 M18,0 L0,13" stroke="#C8102E" stroke-width="1.5"/><path d="M9,0 V13 M0,6.5 H18" stroke="#fff" stroke-width="3.5"/><path d="M9,0 V13 M0,6.5 H18" stroke="#C8102E" stroke-width="2"/></svg> ENG
        </a>
        <a class="lang-opt" onclick="wxSwitchLang('hu')" href="#">
          <svg viewBox="0 0 18 13" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="4.34" y="0" fill="#CE2939"/><rect width="18" height="4.34" y="4.33" fill="#fff"/><rect width="18" height="4.34" y="8.66" fill="#477050"/></svg> HU
        </a>
      </div>
    </div>
  </div>
</header>

<script>
/* ── Shared theme + lang JS (wx-header.php) ─────────────────────────── */
var _wxTm = localStorage.getItem('wxThemeMode') || 'auto';

function _wxIsDay() {
  var ri = '06:52';
  var se = '18:02';
  function p(s) {
    if (!s) return null;
    s = s.trim();
    var t = s.replace(/[apm\s]/gi,'').split(':');
    var h = parseInt(t[0])||0, mi = parseInt(t[1])||0;
    if (/pm/i.test(s) && h!==12) h += 12;
    if (/am/i.test(s) && h===12) h = 0;
    return h*60+mi;
  }
  var nm = new Date().getHours()*60+new Date().getMinutes();
  var sr = p(ri), ss = p(se);
  return (sr && ss && nm>=sr && nm<ss);
}

function _wxApplyTheme() {
  var t = _wxTm === 'auto' ? (_wxIsDay() ? 'light' : 'dark') : _wxTm;
  document.documentElement.setAttribute('data-theme', t);
}

function _wxApplyBtn() {
  var icons  = {auto:'🌤️', light:'☀️', dark:'🌙'};
  var labels = {
    auto:  'Auto',
    light: 'Svetla',
    dark:  'Tamna'
  };
  var icon  = document.getElementById('wx-theme-icon');
  var label = document.getElementById('wx-theme-label');
  if (icon)  icon.textContent  = icons[_wxTm];
  if (label) label.textContent = labels[_wxTm];
}

function wxToggleTheme() {
  var seq = ['auto','light','dark'];
  _wxTm = seq[(seq.indexOf(_wxTm)+1) % 3];
  localStorage.setItem('wxThemeMode', _wxTm);
  _wxApplyTheme();
  _wxApplyBtn();
}

function wxSwitchLang(lang) {
  // Build new URL preserving current path + any extra params
  var base = window.location.pathname;
  var extra = '';
  var qs = 'lang=' + lang + (extra ? '&' + extra : '');
  window.location = base + '?' + qs;
}

// Init on load
_wxApplyBtn();

// Close lang dropdown on outside click
document.addEventListener('click', function(e){
  var sw = document.getElementById('wx-lang-sw');
  if(sw && !sw.contains(e.target)) sw.classList.remove('open');
});
// Re-apply theme for logo filter after DOM ready
document.addEventListener('DOMContentLoaded', function() { _wxApplyTheme(); });
</script>
<div style="text-align:right; padding:3px 20px; font-size:.62rem; color:var(--muted); border-bottom:1px solid var(--border); background:var(--card-b);">
  <a href="index.php?version=classic" style="color:var(--muted); text-decoration:underline;"
     onclick="document.cookie='wx_version=classic;path=/;max-age=31536000';">
    → Klasična verzija  </a>
</div>
<div id="ma-bar"
     style="cursor:default;
            padding:7px 16px; text-align:center;
            background:rgba(41,214,96,0.1);
            border-bottom:1px solid rgba(41,214,96,0.2);"
     >
  <div style="max-width:900px;margin:0 auto;font-size:.72rem;font-family:var(--font-mono);
              display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;">
          <span style="color:rgba(41,214,96,0.8);">✅ Nema aktivnih upozorenja za: "Bačka (RS002)"</span>
      </div>
</div>


<script>
/* ══════════════════════════════════════════
   THEME MANAGEMENT
   Anti-FOUC already set data-theme on <html> before first paint.
   Here we only: update the button label, and handle toggle clicks.
   We do NOT call applyCurrentTheme on every WX refresh — that caused
   the theme to flash/reset after load.
══════════════════════════════════════════ */
let _themeMode = localStorage.getItem('wxThemeMode') || 'auto';

function _isCurrentlyDay() {
  const rise = '06:52';
  const set  = '18:02';
  function p(s) {
    if (!s) return null; s = s.trim();
    const parts = s.replace(/[apm\s]/gi,'').split(':');
    let h = parseInt(parts[0])||0, m = parseInt(parts[1])||0;
    if (/pm/i.test(s) && h!==12) h+=12; if (/am/i.test(s) && h===12) h=0;
    return h*60+m;
  }
  const nm = new Date().getHours()*60+new Date().getMinutes();
  const rv = p(rise), sv = p(set);
  return rv!==null && sv!==null && nm>=rv && nm<sv;
}

function _applyThemeAttr(mode) {
  let isDay;
  if (mode === 'light') isDay = true;
  else if (mode === 'dark') isDay = false;
  else isDay = _isCurrentlyDay(); // auto
  document.documentElement.setAttribute('data-theme', isDay ? 'light' : 'dark');
  return isDay;
}

function _updateThemeButton() {
  const icon = document.getElementById('wx-theme-icon');
  const lbl  = document.getElementById('wx-theme-label');
  if (!icon || !lbl) return;
  const isDay = document.documentElement.getAttribute('data-theme') === 'light';
  if (_themeMode === 'auto') { icon.textContent = isDay ? '🌤️' : '🌙'; lbl.textContent = 'Auto'; }
  else if (_themeMode === 'light') { icon.textContent = '☀️'; lbl.textContent = 'Svetla'; }
  else { icon.textContent = '🌙'; lbl.textContent = 'Tamna'; }
  // Redraw compass with new theme
  const dirEl = document.getElementById('ajaxwinddir');
  const cw    = document.getElementById('wind-compass-svg');
  if (cw && dirEl && typeof windCompassSVG === 'function')
    cw.innerHTML = windCompassSVG(dirEl.textContent.trim(), 110);
}

function toggleTheme() {
  if (_themeMode === 'auto')       _themeMode = 'light';
  else if (_themeMode === 'light') _themeMode = 'dark';
  else                             _themeMode = 'auto';
  localStorage.setItem('wxThemeMode', _themeMode);
  _applyThemeAttr(_themeMode);
  _updateThemeButton();
}

// Legacy stubs — applyCurrentTheme only updates the button, never resets theme
function applyDayNightTheme(a,b,c) { return document.documentElement.getAttribute('data-theme')==='light'; }
function applyCurrentTheme() {
  _updateThemeButton();
  return document.documentElement.getAttribute('data-theme') === 'light';
}

/* ══════════════════════════════════════════
   SMART AJAX REFRESH SYSTEM
   - Weather data (clientraw.txt): every 15s → wx-data.php
   - Web camera image:             every 60s → src swap
   - Radar + Lightning images:     every 300s → src swap
   - Stations XML table:           every 300s → wxsu-partial.php
   No full page reload. No ad flicker.
══════════════════════════════════════════ */
(function(){

  let wxRem      = 15;
  let radarRem   = 300;
  let stationRem = 300;
  let camRem     = 60;

  /* ── Live dot flash on update ── */
  function flashDot(ok){
    const dot = document.getElementById('live-dot');
    if(!dot) return;
    dot.style.background = ok ? '#4fc3f7' : '#ef5350';
    setTimeout(()=>{ dot.style.background = '#66bb6a'; }, ok ? 600 : 1200);
  }

  /* ── WX DATA from clientraw.txt via wx-data.php ── */
  function refreshWX(){
    fetch('wx-data.php?t='+Date.now())
      .then(r => r.json())
      .then(d => {
        /* Simple text updates mapped by element ID */
        const map = {
          ajaxtemp:          d.temp_now !== undefined ? parseFloat(d.temp_now).toFixed(1) + (d.temperature ? d.temperature.replace(/[\d\.\-\s]+/,'').trim() : '°C') : d.temperature,
          ajaxtempmax:       d.temp_max !== undefined ? parseFloat(d.temp_max).toFixed(1) + (d.temperature ? d.temperature.replace(/[\d\.\-\s]+/,'').trim() : '°C') : d.maxtemp,
          ajaxtempmin:       d.temp_min !== undefined ? parseFloat(d.temp_min).toFixed(1) + (d.temperature ? d.temperature.replace(/[\d\.\-\s]+/,'').trim() : '°C') : d.mintemp,
          ajaxwind:          d.avgspd,
          ajaxgust:          d.gstspd,
          ajaxwinddir:       d.dirlabel,
          ajaxbeaufortnum:   d.beaufortnum,
          ajaxbeaufort:      (function(t){
            var _lang = 'sr';
            if (_lang === 'en') return t;
            var _bft = {
              sr: {
                'Calm':'Tišina','Light air':'Lahor','Light breeze':'Lak povetarac',
                'Gentle breeze':'Slab vetar','Moderate breeze':'Umeren vetar',
                'Fresh breeze':'Dosta jak vetar','Strong breeze':'Jak vetar',
                'Near gale':'Žestok vetar','Gale':'Olujni vetar',
                'Strong gale':'Jaka oluja','Storm':'Bura','Violent storm':'Žestoka oluja',
                'Hurricane':'Uragan'
              },
              hu: {
                'Calm':'Szélcsend','Light air':'Szellő','Light breeze':'Gyenge szél',
                'Gentle breeze':'Gyenge szél','Moderate breeze':'Mérsékelt szél',
                'Fresh breeze':'Élénk szél','Strong breeze':'Erős szél',
                'Near gale':'Szélvihar','Gale':'Vihar','Strong gale':'Erős vihar',
                'Storm':'Teljes vihar','Violent storm':'Rendkívüli vihar',
                'Hurricane':'Hurrikán'
              }
            };
            var _map = _bft[_lang] || {};
            return _map[t] || t;
          })(d.bftspeedtext),
          ajaxwindmaxgust:   d.maxgst,
          ajaxwindmaxgusttime: d.maxgstt ? ('u ' + d.maxgstt) : '',
          ajaxrain:          d.dayrn !== undefined ? parseFloat(d.dayrn).toFixed(1) + ' mm' : d.dayrn,
          ajaxrainratehr:    d.currentrainratehr !== undefined ? parseFloat(d.currentrainratehr).toFixed(2) + ' mm' : d.currentrainratehr,
          ajaxrainydy:       d.yesterdayrain !== undefined ? parseFloat(d.yesterdayrain).toFixed(1) + ' mm' : d.yesterdayrain,
          ajaxrainmo:        d.monthrn !== undefined ? parseFloat(d.monthrn).toFixed(1) + ' mm' : d.monthrn,
          ajaxrainyr:        d.yearrn !== undefined ? parseFloat(d.yearrn).toFixed(1) + ' mm' : d.yearrn,
          ajaxhumidity:      d.humidity,
          ajaxdew:           d.dewpt,
          ajaxbaro:          d.baro,
          ajaxbarotrendtext: (function(t){
            var _lang = 'sr';
            if (_lang === 'en') return t;
            var _tr = {
              sr: {'Rising':'Raste','Falling':'Pada','Steady':'Stabilno'},
              hu: {'Rising':'Emelkedő','Falling':'Csökkenő','Steady':'Stabil'}
            };
            return (_tr[_lang] || {})[t] || t;
          })(d.pressuretrendname),
          ajaxbaromax:       d.highbaro,
          ajaxbaromin:       d.lowbaro,
          ajaxuv:            d.VPuv,
          ajaxuvword:        (function(t){
            var _lang = 'sr';
            if (_lang === 'en') return t;
            var _uv = {
              sr: {'Low':'Nizak','Moderate':'Umeren','High':'Visok','Very high':'Vrlo visok','Extreme':'Ekstreman'},
              hu: {'Low':'Alacsony','Moderate':'Mérsékelt','High':'Magas','Very high':'Nagyon magas','Extreme':'Extrém'}
            };
            return (_uv[_lang] || {})[t] || t;
          })(d.uvword),
          ajaxfeelslike:     d.feelslike,
          ajaxheatcolorword: d.heatcolourword,
          ajaxsolar:         d.VPsolar,
          ajaxsolarpct:      d.currentsolarpercent,
        };
        Object.entries(map).forEach(([id, val]) => {
          if(val === undefined || val === null || val === '') return;
          const el = document.getElementById(id);
          if(el) el.textContent = val;
        });

        /* Update last data time from clientraw file mtime */
        const lt = document.getElementById('last-data-time');
        if(lt && d.cr_mtime) lt.textContent = (d.date ? d.date + ' ' : '') + d.cr_mtime;

        /* Update wind compass */
        if(d.dirlabel){
          const cw = document.getElementById('wind-compass-svg');
          if(cw && typeof windCompassSVG === 'function')
            cw.innerHTML = windCompassSVG(d.dirlabel, 110);
        }

        /* Update thermometer bar */
        if(d.temp_now !== undefined){
          const range = Math.max(1, d.temp_max - d.temp_min);
          const pct   = Math.min(100, Math.max(0, (d.temp_now - d.temp_min) / range * 100));
          const fill   = document.querySelector('.thermo-bar-fill');
          const needle = document.querySelector('.thermo-bar-needle');
          if(fill)   fill.style.width  = pct + '%';
          if(needle) needle.style.left = pct + '%';
          /* Also update bar min/max labels */
          const labels = document.querySelectorAll('.thermo-bar-labels-top span');
          if(labels[0]) labels[0].textContent = d.temp_min + (d.temperature ? d.temperature.replace(/[\d\.\-]+/,'').trim() : '°C');
          if(labels[2]) labels[2].textContent = d.temp_max + (d.temperature ? d.temperature.replace(/[\d\.\-]+/,'').trim() : '°C');
        }

        /* Update diff pills */
        if(d.temp_now !== undefined && d.temp_24h_ago !== undefined){
          const unit = d.temperature ? d.temperature.replace(/[\d\.\-\s]+/,'').trim() : '°C';
          const el   = document.getElementById('temp-diff-pills');
          if(el && typeof diffPill === 'function')
            el.innerHTML = diffPill(d.temp_now, d.temp_24h_ago, unit, '24h') +
                           diffPill(d.temp_now, d.temp_1h_ago,  unit, '1h');
        }

        /* Update UV circle class */
        const uvCircle = document.querySelector('.uv-circle');
        if(uvCircle && d.VPuv !== undefined){
          const uv = parseFloat(d.VPuv);
          const cls = uv<=2?'uv-low':uv<=5?'uv-moderate':uv<=7?'uv-high':uv<=10?'uv-veryhigh':'uv-extreme';
          uvCircle.className = 'uv-circle ' + cls;
          const ptr = document.querySelector('.uv-scale-pointer');
          if(ptr) ptr.style.left = Math.min(100, uv/11*100).toFixed(1) + '%';
        }

        /* Update weather icon — always follows real sun position, not theme */
        const iconEl = document.getElementById('wx-icon-hero');
        if(iconEl && typeof wxIconAware === 'function'){
          const isRealDayNow = _isCurrentlyDay();
          const currentIcon  = iconEl.dataset.iconNum || '0';
          const mPct  = 1;
          const mDays = 0;
          iconEl.innerHTML = wxIconAware(parseInt(currentIcon), 80, isRealDayNow, mPct, mDays);
        }

        flashDot(true);
      })
      .catch(()=> flashDot(false));
  }

  /* ── CAMERA: swap src with cache-bust ── */
  function refreshCam(){
    const camImg = document.querySelector('#cam-panel img');
    if(camImg){ const b=camImg.src.split('?')[0]; camImg.src=b+'?'+Date.now(); }
  }

  /* ── RADAR + LIGHTNING: swap src with cache-bust ── */
  function refreshRadar(){
    ['#radar-img','#lightning-img','#front-img'].forEach(sel => {
      const el = document.querySelector(sel);
      if(el){ const b=el.src.split('?')[0]; el.src=b+'?'+Date.now(); }
    });
  }

  /* ── STATIONS TABLE: fetch wxsu-partial.php ── */
  function refreshStations(){
    fetch('wxsu-partial.php?t='+Date.now())
      .then(r => r.text())
      .then(html => {
        const tbody = document.querySelector('#stations-tbody');
        if(tbody) tbody.innerHTML = html;
      })
      .catch(()=>{});
  }

  /* ── TICK every second (no countdown display) ── */
  function tick(){
    wxRem--; stationRem--; radarRem--; camRem--;
    if(wxRem      <= 0){ refreshWX();       wxRem      = 15;  }
    if(camRem     <= 0){ refreshCam();      camRem     = 300;  }
    if(radarRem   <= 0){ refreshRadar();    radarRem   = 300; }
    if(stationRem <= 0){ refreshStations(); stationRem = 300; }
  }

  window.addEventListener('load', function(){
    applyCurrentTheme();      // apply saved/auto theme immediately
    setTimeout(refreshWX, 1500);  // first WX fetch after 1.5s
    setInterval(tick, 1000);

    // Guarantee sun + moon icons are rendered (fallback in case DOMContentLoaded fired too early)
    var sunEl  = document.getElementById('sun-daylight-svg');
    var moonEl = document.getElementById('moon-daylight-svg');
    if(sunEl && !sunEl.innerHTML.trim() && typeof wxIcon === 'function')
      sunEl.innerHTML = wxIcon(0, 56);
    if(moonEl && !moonEl.innerHTML.trim() && typeof moonPhaseSVG === 'function')
      moonEl.innerHTML = moonPhaseSVG(1, 0, 56);
  });

})();
</script>

<div style="display:none">
<!-- CR '10/11/2026 11:07:59 CEST' is 12 secs old -->
<!-- ./clientraw.txt file age = 11 secs. -->
</div>

<main class="dashboard">

  <div class="section-title">
    <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5" fill="none"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>
    Pregled    <span style="margin-left:auto; display:flex; align-items:center; gap:5px; font-weight:400; text-transform:none; letter-spacing:0; font-size:0.62rem;">
      <span class="live-dot" id="live-dot"></span>
      <span style="color:var(--muted);">Poslednji podaci:</span>
      <span id="last-data-time" style="color:var(--text); font-weight:600; font-family:var(--font-mono);">11/10/2026 11:05</span>
    </span>
  </div>

  <!-- ═══ TEMPERATURA ═══ -->
  <div class="card col-4">
    <div class="card-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>
      Temperatura    </div>

    <!-- Hero: big SVG icon + temp + condition -->
    <div class="temp-hero">
      <div class="temp-wx-icon" id="wx-icon-hero" data-icon-num="0"></div>
      <div class="temp-hero-right">
        <div class="temp-big">
          <span class="ajax" id="ajaxtemp">14.3&deg;C</span>
        </div>
        <div class="temp-condition ajax">Sunčano, suvo</div>
        <div class="temp-feels">
          Osećaj: <strong><span class="ajax" id="ajaxfeelslike">14&deg;C</span></strong>
        </div>
      </div>
    </div>

    <!-- Today / Yesterday two-row grid -->
    <div class="temp-minmax-grid">
      <div class="tmg-header-row">
        <div class="tmg-header"></div>
        <div class="tmg-header" style="color:var(--warm)">▲ Maksimum</div>
        <div class="tmg-header" style="color:var(--cool)">▼ Minimum</div>
      </div>
      <div class="tmg-data-row">
        <div class="tmg-row-label">Danas</div>
        <div class="tmg-cell">
          <span class="tmg-cell-val" style="color:var(--warm)"><span class="ajax" id="ajaxtempmax">14.3&deg;C</span></span>
          <span class="tmg-cell-time">10:57</span>
        </div>
        <div class="tmg-cell">
          <span class="tmg-cell-val" style="color:var(--cool)"><span class="ajax" id="ajaxtempmin">11.2&deg;C</span></span>
          <span class="tmg-cell-time">00:29</span>
        </div>
      </div>
      <div class="tmg-data-row tmg-yest">
        <div class="tmg-row-label">Juče</div>
        <div class="tmg-cell">
          <span class="tmg-cell-val" style="color:var(--warm)">19.0&deg;C</span>
          <span class="tmg-cell-time">15:51</span>
        </div>
        <div class="tmg-cell">
          <span class="tmg-cell-val" style="color:var(--cool)">6.6&deg;C</span>
          <span class="tmg-cell-time">01:07</span>
        </div>
      </div>
    </div>

    <!-- Compact diff pills -->
    <div class="temp-diff-row" id="temp-diff-pills">
      <!-- rendered by JS below -->
    </div>

    <!-- Modern thermometer bar -->
        <div class="thermo-bar-wrap">
      <div class="thermo-bar-labels-top">
        <span style="color:var(--cool); font-size:0.68rem; font-weight:600;">11.2&deg;C</span>
        <span style="font-size:0.62rem; color:var(--muted);">Termometar</span>
        <span style="color:var(--warm); font-size:0.68rem; font-weight:600;">14.3&deg;C</span>
      </div>
      <div class="thermo-bar-track">
        <div class="thermo-bar-fill" style="width:100%"></div>
        <div class="thermo-bar-needle" style="left:100%"></div>
      </div>
      <div class="thermo-bar-minmax" style="color:var(--muted); font-size:0.62rem;">
        <span>Min</span>
        <span style="color:var(--accent); font-weight:600;">14.3&deg;C</span>
        <span>Maks</span>
      </div>
    </div>

    <!-- Records -->
    <table class="rec-table">
      <tr>
        <td><span class="lbl-hot">Aps. maksimum</span></td>
        <td>26.2&deg;C &mdash; 2014</td>
      </tr>
      <tr>
        <td><span class="lbl-cold">Aps. minimum</span></td>
        <td>1.3&deg;C &mdash; 2010</td>
      </tr>
      <tr>
        <td colspan="2" style="font-size:0.62rem; color:var(--muted); padding-top:6px;">* Rekordi sa stanice od 7-Nov-2009</td>
      </tr>
    </table>

    <script>
    (function(){
      // isRealDay = based on actual sunrise/sunset, NEVER on theme choice
      const isRealDay = _isCurrentlyDay();
      const moonPct   = 1;
      const moonDays  = 0;

      // Weather icon — follows real sun position, not user theme
      document.getElementById('wx-icon-hero').innerHTML =
        wxIconAware(0, 80, isRealDay, moonPct, moonDays);

      // Diff pills
      const now    = 14.3;
      const prev24 = 14.6;
      const prev1h = 13.6;
      const unit   = '°C';
      document.getElementById('temp-diff-pills').innerHTML =
        diffPill(now, prev24, unit, '24h') +
        diffPill(now, prev1h, unit, '1h');
    })();
    </script>
  </div>

  <!-- ═══ VETAR ═══ -->
  <div class="card col-4">
    <div class="card-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"/></svg>
      Vetar    </div>

    <div class="wind-compass-wrap">
      <!-- SVG Compass -->
      <div id="wind-compass-svg"></div>
      <div class="wind-info">
        <div class="wind-dir-big"><span class="ajax" id="ajaxwinddir">Z</span></div>
        <div style="font-size:0.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px;">brzina</div>
        <div class="wind-speed-big">
          <span class="ajax" id="ajaxwind">0.0</span>
          <span class="wind-speed-unit"> m/s</span>
        </div>
      </div>
    </div>

    <div class="wind-bft">
      <span class="ajax" id="ajaxbeaufortnum">0</span> Bft
      &mdash; <span class="ajax" id="ajaxbeaufort">Tišina</span>
    </div>

    <div class="stat-list">
      <div class="stat-row">
        <span class="stat-label">Maks.</span>
        <span class="stat-val"><span class="ajax" id="ajaxgust">1.2</span></span>
      </div>
      <div class="stat-row">
        <span class="stat-label">Danas maks udar</span>
        <span class="stat-val stat-hi">
          <span class="ajax" id="ajaxwindmaxgust">2.3</span> m/s
          <span class="ajax" id="ajaxwindmaxgusttime"> u 02:16</span>
        </span>
      </div>
      <div class="stat-row">
        <span class="stat-label">Maks. meseca</span>
        <span class="stat-val">7.0 m/s &mdash; 9/10</span>
      </div>
      <div class="stat-row">
        <span class="stat-label">Maks. godine</span>
        <span class="stat-val">40.1 m/s &mdash; 3/1</span>
      </div>
      <div class="stat-row">
        <span class="stat-label">Najjači udar vetra</span>
        <span class="stat-val stat-hi">
          <span class="convWind">40.1 m/s</span><br>
          <span style="font-size:0.65rem; color:var(--muted)">3/1/2026</span>
        </span>
      </div>
    </div>
    <script>
      document.getElementById('wind-compass-svg').innerHTML = windCompassSVG('W', 110);
    </script>
  </div>

  <!-- ═══ KIŠA / SNEG ═══ -->
  <div class="card col-4">
    <div class="card-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="16" y1="13" x2="16" y2="21"/><line x1="8" y1="13" x2="8" y2="21"/><line x1="12" y1="15" x2="12" y2="23"/><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"/></svg>
      Padavine          </div>

          <div class="rain-big"><span class="ajax" id="ajaxrain">5.1 mm</span></div>
      <div style="font-size:0.72rem; color:var(--muted); margin-bottom:14px;">Danas</div>
      <div class="stat-list">
        <div class="stat-row"><span class="stat-label">Trend (/hr)</span><span class="stat-val accent"><span class="ajax" id="ajaxrainratehr">0.00 mm</span></span></div>
        <div class="stat-row"><span class="stat-label">Maks Intenzitet (/hr)</span><span class="stat-val"><span class="ajax">5.3 mm</span></span></div>
        <div class="stat-row"><span class="stat-label">Juče</span><span class="stat-val"><span class="ajax" id="ajaxrainydy">8.1 mm</span></span></div>
                <div class="stat-row"><span class="stat-label">Prethodnih 7 dana</span><span class="stat-val"><span class="convRain">    14.7 mm</span></span></div>
        <div class="stat-row"><span class="stat-label">Mesec</span><span class="stat-val"><span class="ajax" id="ajaxrainmo">19.6 mm</span></span></div>
        <div class="stat-row"><span class="stat-label">Oktobar prosek</span><span class="stat-val"><span class="convRain">    52.7 mm</span></span></div>
        <div class="stat-row">
          <span class="stat-label">Odstupanje</span>
          <span class="stat-val">
            <span style="color:var(--cool)">▼</span> 33.1 mm          </span>
        </div>
        <div class="stat-row"><span class="stat-label">Sezona</span><span class="stat-val"><span class="ajax" id="ajaxrainyr">325.4 mm</span></span></div>
                <div class="stat-row">
          <span class="stat-label">Poslednja kiša datum/vreme</span>
          <span class="stat-val" style="font-size:0.72rem;">11/10/2026<br>u   05:34</span>
        </div>
      </div>
      </div>

  <!-- ═══ VLAŽNOST & BAROMETAR ═══ -->
  <div class="card col-4">
    <div class="card-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
      Vlažnost &amp; Pritisak    </div>
    <div class="stat-list">
      <div class="stat-row">
        <span class="stat-label">Vlažnost</span>
        <span class="stat-val accent"><strong><span class="ajax" id="ajaxhumidity">91</span>%</strong></span>
      </div>
      <div class="stat-row"><span class="stat-label stat-hi">Maksimum</span><span class="stat-val stat-hi">92% u 08:05</span></div>
      <div class="stat-row"><span class="stat-label stat-lo">Minimum</span><span class="stat-val stat-lo">87% u 00:00</span></div>
      <div class="stat-row">
        <span class="stat-label">Tačka rose</span>
        <span class="stat-val"><span class="ajax" id="ajaxdew">12.8&deg;C</span></span>
      </div>
    </div>
    <div style="border-top:1px solid var(--border); margin:14px 0 12px;"></div>
    <div class="baro-big"><span class="ajax" id="ajaxbaro">1001.4 hPa</span></div>
    <div class="baro-trend">
      <span class="ajax" id="ajaxbarotrendtext">Stabilno</span>
      <span class="ajax" id="ajaxbaroarrow" style="font-size:0.72rem; font-weight:400; color:var(--muted)">
         <span style="color:var(--cool)">▼</span> -0.3 hPa/hr      </span>
    </div>
    <div class="stat-list">
      <div class="stat-row"><span class="stat-label stat-hi">Maksimum</span><span class="stat-val stat-hi"><span class="ajax" id="ajaxbaromax">1001.7 </span> u 09:02</span></div>
      <div class="stat-row"><span class="stat-label stat-lo">Minimum</span><span class="stat-val stat-lo"><span class="ajax" id="ajaxbaromin">999.0 </span> u 01:32</span></div>
    </div>
  </div>

  <!-- ═══ SUNCE / MESEC ═══ -->
  <div class="card col-4">
    <div class="card-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
      Astronomija    </div>
    <div class="sunmoon-grid">
      <div class="sunmoon-item"><span class="sunmoon-label">Izlazak Sunca</span><span class="sunmoon-val" style="color:var(--yellow)">06:52</span></div>
      <div class="sunmoon-item"><span class="sunmoon-label">Zalazak Sunca</span><span class="sunmoon-val" style="color:var(--warm)">18:02</span></div>
      <div class="sunmoon-item"><span class="sunmoon-label">Izlazak Meseca</span><span class="sunmoon-val">07:48</span></div>
      <div class="sunmoon-item"><span class="sunmoon-label">Zalazak Meseca</span><span class="sunmoon-val">17:55</span></div>
    </div>
    <div class="stat-list">
      <div class="stat-row"><span class="stat-label">Pun Mesec</span><span class="stat-val">04:12 UTC 26 oktobar 2026</span></div>
      <div class="stat-row"><span class="stat-label">Mlad Mesec</span><span class="stat-val">07:03 UTC 9 novembar 2026</span></div>
    </div>
    <div style="border-top:1px solid var(--border); margin:12px 0; padding-top:12px;">
      <!-- Daylight + Moon: titles in same row, images + values below -->
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:0 12px;">

        <!-- OBDANICA title -->
        <div class="card-title" style="margin-bottom:6px;">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></svg>
          Obdanica        </div>

        <!-- MESEC title -->
        <div class="card-title" style="margin-bottom:6px; justify-content:center;">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
          Mesec        </div>

        <!-- OBDANICA: sun SVG (always) + hours + change -->
        <div style="display:flex; flex-direction:column; align-items:flex-start; gap:4px;">
          <div style="filter:drop-shadow(0 0 8px rgba(255,213,79,0.4));"><svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" width="56" height="56"><circle cx="28" cy="28" r="14.56" fill="#ffd54f"/><g stroke="#ffd54f" stroke-width="2.5" stroke-linecap="round" opacity="0.65"><line x1="45.9" y1="28" x2="50.4" y2="28"/><line x1="40.7" y1="40.7" x2="43.8" y2="43.8"/><line x1="28" y1="45.9" x2="28" y2="50.4"/><line x1="15.3" y1="40.7" x2="12.2" y2="43.8"/><line x1="10.1" y1="28" x2="5.6" y2="28"/><line x1="15.3" y1="15.3" x2="12.2" y2="12.2"/><line x1="28" y1="10.1" x2="28" y2="5.6"/><line x1="40.7" y1="15.3" x2="43.8" y2="12.2"/></g></svg></div>
          <div class="daylight-val">11:10</div>
          <div class="daylight-change">-00:03:11             minuta</div>
        </div>

        <!-- MESEC: moon phase SVG (PHP-rendered) + info -->
        <div style="display:flex; flex-direction:column; align-items:center; gap:4px;"><svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" width="56" height="56"><circle cx="28" cy="28" r="23.52" fill="#1a2535" opacity="0.4"/><circle cx="28" cy="28" r="23.52" fill="none" stroke="rgba(255,253,231,0.15)" stroke-width="1"/></svg>          <div style="font-size:0.63rem; color:var(--yellow); font-weight:600; line-height:1.3; text-align:center;">Rastući srp</div>
          <div style="font-size:0.6rem; color:var(--muted); line-height:1.3; text-align:center;">1% Osvetljenost</div>
          <div style="font-size:0.58rem; color:var(--muted); text-align:center;">0 dana u ciklusu</div>
        </div>

      </div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function(){
      var pct  = 1;
      var days = 0;

      // Sun SVG — always show clear/sunny icon under "Obdanica"
      var sunEl = document.getElementById('sun-daylight-svg');
      if(sunEl) {
        if(typeof wxIcon === 'function') {
          sunEl.innerHTML = wxIcon(0, 56);
        } else {
          // Inline fallback sun SVG if wxIcon not loaded yet
          sunEl.innerHTML = '<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><circle cx="28" cy="28" r="11" fill="#ffd54f"/><g stroke="#ffd54f" stroke-width="2.5" stroke-linecap="round" opacity="0.65">' +
            [0,45,90,135,180,225,270,315].map(function(a){var r2=a*Math.PI/180,x1=(28+Math.cos(r2)*14.5).toFixed(1),y1=(28+Math.sin(r2)*14.5).toFixed(1),x2=(28+Math.cos(r2)*19.5).toFixed(1),y2=(28+Math.sin(r2)*19.5).toFixed(1);return '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'"/>';}).join('') +
            '</g></svg>';
        }
      }

      // Moon SVG — always show current phase under "Mesec"
      var moonEl = document.getElementById('moon-daylight-svg');
      if(moonEl) {
        if(typeof moonPhaseSVG === 'function') {
          moonEl.innerHTML = moonPhaseSVG(pct, days, 56);
        } else {
          // Inline fallback crescent SVG
          moonEl.innerHTML = '<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="mfb" cx="38%" cy="32%" r="68%"><stop offset="0%" stop-color="#fffde7"/><stop offset="100%" stop-color="#f9a825"/></radialGradient></defs><circle cx="28" cy="28" r="17" fill="#1a2535"/><path d="M28 11 A17 17 0 1 0 28 45 A13 13 0 1 1 28 11 Z" fill="url(#mfb)"/></svg>';
        }
      }
    });
    </script>
  </div>

  <!-- ═══ UV / SOLAR ═══ -->
  <div class="card col-4">
    <div class="card-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
      UV Indeks / Sunce    </div>

          <div class="uv-display">
        <div class="uv-circle uv-low">
          <span class="uv-circle-num ajax" id="ajaxuv">1.0</span>
          <span class="uv-circle-label">UV</span>
        </div>
        <div class="uv-info">
          <div class="uv-category-name uv-cat-low ajax" id="ajaxuvword">Nizak</div>
          <div class="uv-scale-bar"><div class="uv-scale-pointer" style="left:9%"></div></div>
          <div class="uv-scale-ticks"><span>0</span><span>3</span><span>6</span><span>8</span><span>11+</span></div>
        </div>
      </div>
      <div class="stat-list">
        <div class="stat-row"><span class="stat-label stat-hi">Najviši:</span><span class="stat-val stat-hi">1.0 @ 10:13</span></div>
      </div>
      <div style="margin-top:12px; padding:10px; background:rgba(255,138,101,0.07); border:1px solid rgba(255,138,101,0.2); border-radius:8px; font-size:0.72rem;">
        ⚠️ Upozorenje! Izlaganje suncu bez zaštite: <strong style="color:var(--warm)">112</strong> minuta!
      </div>
    
          <div style="border-top:1px solid var(--border); margin:12px 0; padding-top:12px;">
        <div style="font-size:0.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px;">Sunce</div>
        <div style="font-size:1.6rem; font-family:var(--font-head); font-weight:800;"><span class="ajax" id="ajaxsolar">181</span> W/m² (<span class="ajax" id="ajaxsolarpct">39</span>%)</div>
        <div style="font-size:0.72rem; color:var(--warm); margin-top:4px;">Najviši: 181 @ 11:05</div>
      </div>
    
  </div>


  <!-- ═══════════════════════════════════════════
       SECTION 2 — OKOLNE STANICE
  ═══════════════════════════════════════════ -->
  <div class="section-title" style="margin-top:8px;">
    <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5" fill="none"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>
    Stanica  </div>

  <div class="col-12">
    <div class="stations-table-wrap">
      <table class="stations-table">
        <thead>
          <tr>
            <th>Stanica</th>
            <th>Ažurirano</th>
            <th>Temperatura</th>
            <th>Pritisak</th>
            <th>smera vetra</th>
            <th>Vetar (m/s)</th>
            <th>Vlažnost</th>
            <th>Padavine</th>
          </tr>
        </thead>
        <tbody id="stations-tbody">
          <tr><td class="st-name">Subotica-Zorka</td><td class="st-time">11:05</td><td class="st-temp">14.3 °C</td><td>1001.4 hPa</td><td>W</td><td>0.0 m/s</td><td>91 %</td><td>5.1 mm</td></tr>
<tr><td class="st-name">Subotica-Aleksandrovo</td><td class="st-time">11:04</td><td class="st-temp">23.7 °C</td><td>1012.5 hPa</td><td>NNE</td><td>0.8 m/s</td><td>63 %</td><td>11.5 mm</td></tr>
<tr><td class="st-name">Palić - RHMZ</td><td class="st-time">11:00</td><td class="st-temp">14.5 °C</td><td>999.7 hPa</td><td>WNW</td><td>2.7 m/s</td><td>100 %</td><td>-</td></tr>
<tr><td class="st-name">Kanjiža</td><td class="st-time">11:04</td><td class="st-temp">14.0 °C</td><td>1008.5 hPa</td><td>NW</td><td>1.1 m/s</td><td>99 %</td><td>20.8 mm</td></tr>
<tr><td class="st-name">Senta</td><td class="st-time">11:05</td><td class="st-temp">14.0 °C</td><td>1004.1 hPa</td><td>W</td><td>0.8 m/s</td><td>97 %</td><td>7.9 mm</td></tr>
<tr><td class="st-name">Bačka Topola</td><td class="st-time">11:05</td><td class="st-temp">14.0 °C</td><td>1006.1 hPa</td><td>NW</td><td>0.6 m/s</td><td>97 %</td><td>8.6 mm</td></tr>
<tr><td class="st-name">Novo Orahovo</td><td class="st-time">11:05</td><td class="st-temp">14.0 °C</td><td>1006.8 hPa</td><td>NW</td><td>3.1 m/s</td><td>98 %</td><td>8.6 mm</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ═══════════════════════════════════════════
       SECTION 3 — PROGNOZA (5 dana, Best Match)
  ═══════════════════════════════════════════ -->
  <div class="section-title" style="margin-top:8px;">
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
    Prognoza    <span style="margin-left:auto; font-size:0.6rem; color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0;">
      <a href="wx-forecast.php" style="color:var(--accent); text-decoration:none; font-weight:600;">
        10 dana →      </a>
      &nbsp;·&nbsp; Open-Meteo best_match
    </span>
  </div>

    <div class="col-12">
    <div style="display:grid; grid-template-columns:repeat(5,1fr); gap:10px;">
          <div class="card" style="padding:14px 12px; text-align:center; cursor:pointer;
           border-color:var(--yellow);"
           onclick="window.location='wx-forecast.php'">
        <div style="font-family:var(--font-head); font-size:0.62rem; font-weight:700;
             letter-spacing:0.1em; text-transform:uppercase;
             color:var(--yellow); margin-bottom:2px;">
          Danas        </div>
        <div style="font-size:0.58rem; color:var(--muted); margin-bottom:6px;">11.10</div>

        <!-- Icon — shared om_mini_icon() from forecast-openmeteo.php -->
        <div style="display:flex; justify-content:center; margin:4px 0 6px; filter:drop-shadow(0 0 4px rgba(0,0,0,.2));">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" width="52" height="52"><g opacity="1"><ellipse cx="26" cy="16.9" rx="10.9" ry="6.2" fill="#b0bec5"/><ellipse cx="21.1" cy="19.1" rx="7.8" ry="4.7" fill="#90a4ae"/><ellipse cx="29.8" cy="19.7" rx="6.2" ry="4" fill="#cfd8dc"/></g><g fill="#64b5f6"><ellipse cx="11.7" cy="29.9" rx="1.4" ry="3.1" transform="rotate(-18,11.7,29.9)"/><ellipse cx="16.4" cy="31.5" rx="1.4" ry="3.1" transform="rotate(-18,16.4,31.5)"/><ellipse cx="21.1" cy="33" rx="1.4" ry="3.1" transform="rotate(-18,21.1,33)"/></g></svg>        </div>

        <!-- Temps -->
        <div style="display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:4px;">
          <span style="font-family:var(--font-num); font-size:1.1rem; font-weight:700; color:var(--warm);">15.0°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">9.7°</span>
        </div>

                <div style="font-size:0.62rem; color:var(--accent); margin-bottom:3px;">
          💧 100%
          <span style="color:var(--muted);"> · 5.4mm</span>        </div>
        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          NNW 5.3 m/s        </div>

        <div style="font-size:0.58rem; color:var(--muted); margin-top:3px; line-height:1.3;">Slaba kiša</div>
      </div>
          <div class="card" style="padding:14px 12px; text-align:center; cursor:pointer;
           "
           onclick="window.location='wx-forecast.php'">
        <div style="font-family:var(--font-head); font-size:0.62rem; font-weight:700;
             letter-spacing:0.1em; text-transform:uppercase;
             color:var(--muted); margin-bottom:2px;">
          Pon        </div>
        <div style="font-size:0.58rem; color:var(--muted); margin-bottom:6px;">12.10</div>

        <!-- Icon — shared om_mini_icon() from forecast-openmeteo.php -->
        <div style="display:flex; justify-content:center; margin:4px 0 6px; filter:drop-shadow(0 0 4px rgba(0,0,0,.2));">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" width="52" height="52"><g opacity="1"><ellipse cx="20.8" cy="18.2" rx="10.9" ry="6.2" fill="#b0bec5"/><ellipse cx="15.9" cy="20.4" rx="7.8" ry="4.7" fill="#90a4ae"/><ellipse cx="24.6" cy="21" rx="6.2" ry="4" fill="#cfd8dc"/></g><g opacity="0.7"><ellipse cx="31.2" cy="28.6" rx="7.1" ry="4.1" fill="#b0bec5"/><ellipse cx="28" cy="30" rx="5.1" ry="3.1" fill="#90a4ae"/><ellipse cx="33.7" cy="30.4" rx="4.1" ry="2.7" fill="#cfd8dc"/></g></svg>        </div>

        <!-- Temps -->
        <div style="display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:4px;">
          <span style="font-family:var(--font-num); font-size:1.1rem; font-weight:700; color:var(--warm);">13.9°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">8.1°</span>
        </div>

        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          NW 4.6 m/s        </div>

        <div style="font-size:0.58rem; color:var(--muted); margin-top:3px; line-height:1.3;">Oblačno</div>
      </div>
          <div class="card" style="padding:14px 12px; text-align:center; cursor:pointer;
           "
           onclick="window.location='wx-forecast.php'">
        <div style="font-family:var(--font-head); font-size:0.62rem; font-weight:700;
             letter-spacing:0.1em; text-transform:uppercase;
             color:var(--muted); margin-bottom:2px;">
          Uto        </div>
        <div style="font-size:0.58rem; color:var(--muted); margin-bottom:6px;">13.10</div>

        <!-- Icon — shared om_mini_icon() from forecast-openmeteo.php -->
        <div style="display:flex; justify-content:center; margin:4px 0 6px; filter:drop-shadow(0 0 4px rgba(0,0,0,.2));">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" width="52" height="52"><circle cx="14.3" cy="14.3" r="6.4" fill="#ffd54f"/><g opacity="1"><ellipse cx="26" cy="28.6" rx="9" ry="5.1" fill="#b0bec5"/><ellipse cx="22" cy="30.4" rx="6.4" ry="3.8" fill="#90a4ae"/><ellipse cx="29.2" cy="30.9" rx="5.1" ry="3.3" fill="#cfd8dc"/></g></svg>        </div>

        <!-- Temps -->
        <div style="display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:4px;">
          <span style="font-family:var(--font-num); font-size:1.1rem; font-weight:700; color:var(--warm);">15.4°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">5.3°</span>
        </div>

        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          N 4.6 m/s        </div>

        <div style="font-size:0.58rem; color:var(--muted); margin-top:3px; line-height:1.3;">Djelimično oblačno</div>
      </div>
          <div class="card" style="padding:14px 12px; text-align:center; cursor:pointer;
           "
           onclick="window.location='wx-forecast.php'">
        <div style="font-family:var(--font-head); font-size:0.62rem; font-weight:700;
             letter-spacing:0.1em; text-transform:uppercase;
             color:var(--muted); margin-bottom:2px;">
          Sri        </div>
        <div style="font-size:0.58rem; color:var(--muted); margin-bottom:6px;">14.10</div>

        <!-- Icon — shared om_mini_icon() from forecast-openmeteo.php -->
        <div style="display:flex; justify-content:center; margin:4px 0 6px; filter:drop-shadow(0 0 4px rgba(0,0,0,.2));">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" width="52" height="52"><g opacity="1"><ellipse cx="20.8" cy="18.2" rx="10.9" ry="6.2" fill="#b0bec5"/><ellipse cx="15.9" cy="20.4" rx="7.8" ry="4.7" fill="#90a4ae"/><ellipse cx="24.6" cy="21" rx="6.2" ry="4" fill="#cfd8dc"/></g><g opacity="0.7"><ellipse cx="31.2" cy="28.6" rx="7.1" ry="4.1" fill="#b0bec5"/><ellipse cx="28" cy="30" rx="5.1" ry="3.1" fill="#90a4ae"/><ellipse cx="33.7" cy="30.4" rx="4.1" ry="2.7" fill="#cfd8dc"/></g></svg>        </div>

        <!-- Temps -->
        <div style="display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:4px;">
          <span style="font-family:var(--font-num); font-size:1.1rem; font-weight:700; color:var(--warm);">15.5°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">3.6°</span>
        </div>

        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          NNW 2.6 m/s        </div>

        <div style="font-size:0.58rem; color:var(--muted); margin-top:3px; line-height:1.3;">Oblačno</div>
      </div>
          <div class="card" style="padding:14px 12px; text-align:center; cursor:pointer;
           "
           onclick="window.location='wx-forecast.php'">
        <div style="font-family:var(--font-head); font-size:0.62rem; font-weight:700;
             letter-spacing:0.1em; text-transform:uppercase;
             color:var(--muted); margin-bottom:2px;">
          Čet        </div>
        <div style="font-size:0.58rem; color:var(--muted); margin-bottom:6px;">15.10</div>

        <!-- Icon — shared om_mini_icon() from forecast-openmeteo.php -->
        <div style="display:flex; justify-content:center; margin:4px 0 6px; filter:drop-shadow(0 0 4px rgba(0,0,0,.2));">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" width="52" height="52"><g opacity="1"><ellipse cx="20.8" cy="18.2" rx="10.9" ry="6.2" fill="#b0bec5"/><ellipse cx="15.9" cy="20.4" rx="7.8" ry="4.7" fill="#90a4ae"/><ellipse cx="24.6" cy="21" rx="6.2" ry="4" fill="#cfd8dc"/></g><g opacity="0.7"><ellipse cx="31.2" cy="28.6" rx="7.1" ry="4.1" fill="#b0bec5"/><ellipse cx="28" cy="30" rx="5.1" ry="3.1" fill="#90a4ae"/><ellipse cx="33.7" cy="30.4" rx="4.1" ry="2.7" fill="#cfd8dc"/></g></svg>        </div>

        <!-- Temps -->
        <div style="display:flex; flex-direction:column; align-items:center; gap:1px; margin-bottom:4px;">
          <span style="font-family:var(--font-num); font-size:1.1rem; font-weight:700; color:var(--warm);">17.1°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">6.0°</span>
        </div>

        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          NW 2.3 m/s        </div>

        <div style="font-size:0.58rem; color:var(--muted); margin-top:3px; line-height:1.3;">Oblačno</div>
      </div>
        </div>
  </div>
  
  <!-- ═══════════════════════════════════════════
       SECTION 4 — MAPS & IMAGES
  ═══════════════════════════════════════════ -->
  <div class="section-title" style="margin-top:8px;">
    <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5" fill="none"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>
    Kamera / Satelitska slika / Radar  </div>

  <div class="col-12">
    <div class="media-grid">
      <div class="media-panel" id="cam-panel">
        <div class="media-panel-title">Kamera</div>
        <div class="media-panel-body">
          <video id="Ad_Video" style="width: 380px; height: 285px; object-fit: fill; display: block; margin: 0; padding: 0;" autoplay muted loop playsinline>
            <source id="Video_Source" src="https://sumeteo.info/latest.mp4?1791709691" type="video/mp4">
          </video>
        </div>
      </div>
      <div class="media-panel">
        <div class="media-panel-title">Satelitski snimak</div>
        <div class="media-panel-body">
            <iframe id="windy-frame"
               src="https://embed.windy.com/embed2.html?lat=46.13&lon=19.65&detailLat=46.13&detailLon=19.65&width=380&height=285&zoom=6&level=surface&overlay=satellite&product=satellite&menu=&message=&marker=false&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=m%2Fs&metricTemp=%C2%B0C&radarRange=-1"
               style="width:380px;height:285px;border:none;display:block;"
               loading="lazy" allowfullscreen>
            </iframe>
        </div>
      </div>
      <div class="media-panel">
        <div class="media-panel-title">Radarska slika</div>
        <div class="media-panel-body">
            <iframe id="windy-frame"
               src="https://embed.windy.com/embed2.html?lat=46.13&lon=19.65&detailLat=46.13&detailLon=19.65&width=380&height=285&zoom=6&level=surface&overlay=radar&product=radar&menu=&message=&marker=false&calendar=now&pressure=&type=map&detail=&metricWind=m%2Fs&metricTemp=%C2%B0C&radarRange=-1"
               style="width:380px;height:285px;border:none;display:block;"
               loading="lazy" allowfullscreen>
            </iframe>
        </div>
      </div>
    </div>
  </div>

  <!-- LIGHTNING / FRONT / AD -->
  <div class="section-title" style="margin-top:4px;">
    <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5" fill="none"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>
    Detektor grmljavine / Kretanje frontova  </div>

  <div class="col-12">
    <div class="media-grid">
      <div class="media-panel">
        <div class="media-panel-title">Detektor grmljavine</div>
        <div class="media-panel-body">
            <iframe id="windy-frame"
               src="https://embed.windy.com/embed2.html?lat=46.13&lon=19.65&detailLat=46.13&detailLon=19.65&width=380&height=285&zoom=6&level=surface&overlay=thunder&product=thunder&menu=&message=&marker=false&calendar=now&pressure=&type=map&detail=&metricWind=m%2Fs&metricTemp=%C2%B0C&radarRange=-1"
               style="width:380px;height:285px;border:none;display:block;"
               loading="lazy" allowfullscreen>
            </iframe>
        </div>
      </div>
      <div class="media-panel">
        <div class="media-panel-title">Kretanje frontova</div>
        <div class="media-panel-body">
          <img id="front-img" src="https://prognoza.hr/web_fronte_sutra12.jpg" alt="Front Analysis" style="width:100%;height:100%;object-fit:cover;">
        </div>
      </div>
      <div class="media-panel">
        <div class="media-panel-title">Oglasi</div>
        <div class="media-panel-body ad-panel">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3263928548756519" crossorigin="anonymous"></script>
          <ins class="adsbygoogle" style="display:block;width:100%;height:100%" data-ad-client="ca-pub-3263928548756519" data-ad-slot="6435755206" data-ad-format="auto"></ins>
          <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        </div>
      </div>
    </div>
  </div>


</main>


<!-- end of ajax-dashboard-modern.php -->
</body>
</html>