<!-- 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 (30539 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 29277 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='Mostly Cloudy'
              trans='Pretežno Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=E using  array substitute for NESW=>'S,I,J,Z' output='I' -->
<!-- AW_decode_conds code='::BK' decoded as 'Mostly Cloudy'
   FCpart['weather']='Mostly Cloudy' -->
<!-- AW_octets in=93 octets=7.4  clouds=bkn -->
<!-- AW_img_replace replace icon 'mcloudy.png' with 'bkn.gif' pop=0 -->
<!-- AWforecasttext='Cloudy'
              trans='Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=E using  array substitute for NESW=>'S,I,J,Z' output='I' -->
<!-- AW_decode_conds code='::OV' decoded as 'Overcast'
   FCpart['weather']='Cloudy' -->
<!-- AW_octets in=95 octets=7.6  clouds=bkn -->
<!-- AW_img_replace replace icon 'cloudyn.png' with 'novc.gif' pop=0 -->
<!-- AWforecasttext='Partly Cloudy'
              trans='Delimično Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=SE using  array substitute for NESW=>'S,I,J,Z' output='JI' -->
<!-- AW_decode_conds code='::SC' decoded as 'Partly Cloudy'
   FCpart['weather']='Partly Cloudy' -->
<!-- AW_octets in=64 octets=5.1  clouds=bkn -->
<!-- AW_img_replace replace icon 'pcloudy.png' with 'sct.gif' pop=0 -->
<!-- AWforecasttext='Mostly Clear'
              trans='Pretežno Vedro' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=SE using  array substitute for NESW=>'S,I,J,Z' output='JI' -->
<!-- AW_decode_conds code='::FW' decoded as 'Mostly Clear'
   FCpart['weather']='Mostly Clear' -->
<!-- AW_octets in=24 octets=1.9  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=SE using  array substitute for NESW=>'S,I,J,Z' output='JI' -->
<!-- AW_decode_conds code='::SC' decoded as 'Partly Cloudy'
   FCpart['weather']='Partly Cloudy' -->
<!-- AW_octets in=43 octets=3.4  clouds=sct -->
<!-- AW_img_replace replace icon 'pcloudy.png' with 'sct.gif' pop=0 -->
<!-- AWforecasttext='Mostly Cloudy'
              trans='Pretežno Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NE using  array substitute for NESW=>'S,I,J,Z' output='SI' -->
<!-- AW_decode_conds code='::BK' decoded as 'Mostly Cloudy'
   FCpart['weather']='Mostly Cloudy' -->
<!-- AW_octets in=74 octets=5.9  clouds=bkn -->
<!-- AW_img_replace replace icon 'mcloudyn.png' with 'nbkn.gif' pop=0 -->
<!-- AWforecasttext='Mostly Cloudy'
              trans='Pretežno Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=SSE using  array substitute for NESW=>'S,I,J,Z' output='JJI' -->
<!-- AW_decode_conds code='::BK' decoded as 'Mostly Cloudy'
   FCpart['weather']='Mostly Cloudy' -->
<!-- AW_octets in=78 octets=6.2  clouds=bkn -->
<!-- AW_img_replace replace icon 'mcloudy.png' with 'bkn.gif' pop=0 -->
<!-- AWforecasttext='Mostly Clear'
              trans='Pretežno Vedro' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=ESE using  array substitute for NESW=>'S,I,J,Z' output='IJI' -->
<!-- AW_decode_conds code='::FW' decoded as 'Mostly Clear'
   FCpart['weather']='Mostly Clear' -->
<!-- AW_octets in=17 octets=1.4  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=SSW using  array substitute for NESW=>'S,I,J,Z' output='JJZ' -->
<!-- AW_decode_conds code='::SC' decoded as 'Partly Cloudy'
   FCpart['weather']='Partly Cloudy' -->
<!-- AW_octets in=40 octets=3.2  clouds=sct -->
<!-- AW_img_replace replace icon 'pcloudy.png' with 'sct.gif' pop=0 -->
<!-- AWforecasttext='Mostly Clear'
              trans='Pretežno Vedro' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=SE using  array substitute for NESW=>'S,I,J,Z' output='JI' -->
<!-- AW_decode_conds code='::FW' decoded as 'Mostly Clear'
   FCpart['weather']='Mostly Clear' -->
<!-- AW_octets in=22 octets=1.8  clouds=few -->
<!-- AW_img_replace replace icon 'fairn.png' with 'nfew.gif' pop=0 -->
<!-- AWforecasttext='Mostly Cloudy'
              trans='Pretežno Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NNW using  array substitute for NESW=>'S,I,J,Z' output='SSZ' -->
<!-- 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 'mcloudy.png' with 'bkn.gif' pop=0 -->
<!-- AWforecasttext='Cloudy'
              trans='Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=SE using  array substitute for NESW=>'S,I,J,Z' output='JI' -->
<!-- AW_decode_conds code='::OV' decoded as 'Overcast'
   FCpart['weather']='Cloudy' -->
<!-- AW_octets in=96 octets=7.7  clouds=bkn -->
<!-- AW_img_replace replace icon 'cloudyn.png' with 'novc.gif' pop=0 -->
<!-- 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_shwrs.gif' pop=0 -->
<!-- AWforecasttext='Partly Cloudy'
              trans='Delimično Oblačno' -->
<!-- using translated conditions -->
<!-- AW_WindDirTrans in=NE using  array substitute for NESW=>'S,I,J,Z' output='SI' -->
<!-- AW_decode_conds code='::SC' decoded as 'Partly Cloudy'
   FCpart['weather']='Partly Cloudy' -->
<!-- AW_octets in=48 octets=3.8  clouds=sct -->
<!-- AW_img_replace replace icon 'pcloudyn.png' with 'nsct.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='12/04/2026', UV='4.5' DOW='Sunday' YMD='20260412' -->
<!-- Date='13/04/2026', UV='4.7' DOW='Monday' YMD='20260413' -->
<!-- Date='14/04/2026', UV='4.9' DOW='Tuesday' YMD='20260414' -->
<!-- Date='15/04/2026', UV='5.0' DOW='Wednesday' YMD='20260415' -->
<!-- Date='16/04/2026', UV='4.9' DOW='Thursday' YMD='20260416' -->
<!-- Date='17/04/2026', UV='4.8' DOW='Friday' YMD='20260417' -->
<!-- after date=20260413 processing, shifted 1 entries -->
<!-- Date='13/04/2026', UV='4.7' DOW='Monday' YMD='20260413' -->
<!-- Date='14/04/2026', UV='4.9' DOW='Tuesday' YMD='20260414' -->
<!-- Date='15/04/2026', UV='5.0' DOW='Wednesday' YMD='20260415' -->
<!-- Date='16/04/2026', UV='4.9' DOW='Thursday' YMD='20260416' -->
<!-- Date='17/04/2026', UV='4.8' DOW='Friday' YMD='20260417' -->
<!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:00',se='19:24';
    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:00';
  var se = '19:24';
  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:pointer;
            padding:7px 16px; text-align:center;
            background:rgba(255,150,0,0.15);
            border-bottom:1px solid rgba(255,150,0,0.3);"
     onclick="document.getElementById('ma-modal').style.display='flex'">
  <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;">
          <!-- get-meteoalarm-warning-inc: begin summary ./cache/meteoalarm-summary.html -->
<div align="center" class="advisoryBox" style="text-align: left;background-color: lightyellow; width: 625px;margin: 0 auto !important;">
<p style="text-align: center;width: 99%;"><strong>Upozorenja i najave</strong></p>
<table>
<tr><td><div style="background-color: #FFDB23 !important;width: 40px !important; height:40px !important; border: 1px solid black; margin: 2px; display: block; float: left;"><a href="./wxadvisory.php#alert1"><img src="./ajax-images/meteoalarm_3.svg" style=" margin: 4px; width: 32px; height: 32px;" alt="Thunderstorm" title="Thunderstorm"/></a></div>&nbsp;
</td><td style="text-align:left;">Backa, Srbija</td></tr>
</table>
</div>

<!-- get-meteoalarm-warning-inc: end summary ./cache/meteoalarm-summary.html -->

      <span style="color:var(--accent);font-size:.65rem;">▶ Detalji</span>
      </div>
</div>

<!-- Meteoalarm modal -->
<div id="ma-modal"
     style="display:none;position:fixed;inset:0;z-index:9999;
            background:rgba(0,0,0,0.7);align-items:center;justify-content:center;padding:20px;"
     onclick="if(event.target===this)this.style.display='none'">
  <div style="background:var(--sky);border:1px solid var(--border);border-radius:12px;
              max-width:700px;width:100%;max-height:85vh;overflow-y:auto;
              padding:20px 24px;position:relative;">
    <button onclick="document.getElementById('ma-modal').style.display='none'"
            style="position:absolute;top:12px;right:16px;background:none;border:none;
                   color:var(--muted);font-size:1.2rem;cursor:pointer;line-height:1;">✕</button>
    <div style="font-family:var(--font-cond);font-size:.7rem;font-weight:700;
                text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
                margin-bottom:14px;">
      ⚠️ Vremenska upozorenja      — Meteoalarm
    </div>
    <!-- get-meteoalarm-warning-inc: begin ./cache/meteoalarm-details.html -->
<!-- Fetch Status:
Loaded warning data from './cache/meteoalarm.arr'. Updated:13/04/2026 00:38

 -->
<script type="text/javascript">
// <![CDATA[

if(typeof document.createStyleSheet === "undefined") {
    document.createStyleSheet = (function() {
     function createStyleSheet(href) {
      if(typeof href !== "undefined") {
       var element = document.createElement("link");
       element.type = "text/css";
       element.rel = "stylesheet";
       element.href = href;}
      else {
       var element = document.createElement("style");
       element.type = "text/css";}
      document.getElementsByTagName("head")[0].appendChild(element);
      var sheet = document.styleSheets[document.styleSheets.length - 1];
      if(typeof sheet.addRule === "undefined")
      { sheet.addRule = addRule;}
      if(typeof sheet.removeRule === "undefined")
      { sheet.removeRule = sheet.deleteRule;}
      return sheet;
     }
     function addRule(selectorText, cssText, index) {
      if(typeof index === "undefined") { index = this.cssRules.length;}
      this.insertRule(selectorText + " {" + cssText + "}", index);
     }
     return createStyleSheet;
    })();
}
var sheet = document.createStyleSheet();
sheet.addRule(".tab","overflow: hidden; display: block; border: 0px solid #ccc; background-color: white; text-align: left; margin:  4px; margin-left: 0px;");
sheet.addRule(".tab span","text-align: left; margin:  4px;");
sheet.addRule(".tab label","float: left; border-radius: 4px; background-color: #ccc; border: 1px solid #ddd; cursor: pointer; margin: 3px; margin-bottom: 0px; padding: 3px; ");
sheet.addRule(".tab label:hover","background-color: white;");
sheet.addRule(".tab label.active","border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: transparent; border: 1px solid black; border-bottom: 1px solid white;");
sheet.addRule(".tabcontent","display: none; border-top: none;");
sheet.addRule(".tab a"," text-decoration: underline; color:blue !important;");
function openTab(evt, block,  spanName) {
  var i, tabcontent, tablinks;
  var clssnm    = block+"tabcontent";
  tabcontent = document.getElementsByClassName(clssnm);
  
  for (i = 0; i < tabcontent.length; i++) 
   {tabcontent[i].style.display = "none";}
   
  
  tablinks = document.getElementsByClassName(block+"tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(spanName).style.display = "block";
  evt.currentTarget.className += " active";
}
// ]]>
</script>
<table style="width: 100%; border-collapse: collapse; margin-top: 8px; " >
<tr style="background-color: #FFDB23">
<td colspan="2"><a name="alert1" id="alert1"></a><span style="margin-left: 5px; float: left;"><b>Thunderstorm yellow&nbsp;&nbsp;&nbsp;Backa</b> <small>(RS002)</small></span><span style="float: right; margin-right:5px;"><b>Proveri:&nbsp;</b>14/04/2026 00:00&nbsp;&nbsp;-&nbsp;&nbsp;23:59</span></td>
</tr>
<tr style="background-color: #FFDB23">
<td style="vertical-align: top; width: 110px;"><img src="./ajax-images/meteoalarm_3.svg" style="margin: 4px; width: 100px; max-width: 128px; " alt="./ajax-images/meteoalarm_3.svg" title="Thunderstorm"/></td>
<td style="text-align: left;">
<span class="tab" style="">
<label class="t1tablinks tablinks active"  style="margin-left: 20px;" onclick="openTab(event,'t1', 't1-1')" id="en-GB1">&nbsp;English&nbsp;</label> 
<label class="t1tablinks tablinks "  style="" onclick="openTab(event,'t1', 't1-2')" id="sr1">&nbsp;Srpski&nbsp;</label> 
<label class="t1tablinks tablinks "  style="" onclick="openTab(event,'t1', 't1-3')" id="sr-Latn1">&nbsp;Srpski&nbsp;</label> 
<label class="t1tablinks tablinks "  style="" onclick="openTab(event,'t1', 't1-4')" id="info1">&nbsp;<img src="./ajax-images/meteoalarm_info.svg" alt="info" title="info"/>&nbsp;</label> 
<span id="t1-1" class="t1tabcontent tabcontent" style="clear: left; display: block;">
<b style="text-align: center; width: 100%; display: block;">Thunderstorm Backa yellow<br /></b>
<br />
Local thunderstorms<br />
<br />The risk of thunder stroke, endangered lives of people and animals, operation problems for all electrical devices, the risk of fire initiation, telecommunication problems. Possible problems in the transport of electricity. Possible occurrence of local intensive showers, torrents and strong gust. These phenomena could cause damage to the property and be dangerous to the security of people and animals.<br />
</span>
<span id="t1-2" class="t1tabcontent tabcontent" style="clear: left; display: none;">
<b style="text-align: center; width: 100%; display: block;">Грмљавина Бачка Умерен ниво<br /></b>
<br />
Локална појава грмљавина са или без падавина<br />
<br />Ризик од удара грома, опасност за живот људи и животиња, проблеми у раду свих уређаја који користе електричну енергију, ризик од иницирања појаве ватре, проблеми у телекомуникацијама. Могући проблеми у транспорту електричне енергије због удара грома. Могућа је локална појава интезивних пљускова, бујица и јаких удара ветра са штетама на покретној и непокретној имовини.<br />
</span>
<span id="t1-3" class="t1tabcontent tabcontent" style="clear: left; display: none;">
<b style="text-align: center; width: 100%; display: block;">Grmljavina Bačka Umeren nivo<br /></b>
<br />
Lokalna pojava grmljavina sa ili bez padavina<br />
<br />Rizik od udara groma, opasnost za život ljudi i životinja, problemi u radu svih uređaja koji koriste električnu energiju, rizik od iniciranja pojave vatre, problemi u telekomunikacijama. Mogući problemi u transportu električne energije zbog udara groma. Moguća je lokalna pojava intezivnih pljuskova, bujica i jakih udara vetra sa štetama na pokretnoj i nepokretnoj imovini.<br />
</span>
<span id="t1-4" class="t1tabcontent tabcontent" style="clear: left; display: none;">
<b style="text-align: center; width: 100%; display: block;">Information<br />
</b>
<br />
Originator: <a href="https://www.meteoalarm.rs/" target="_blank">RHMS Serbia</a><br/>
Issued:   <b>12/04/2026 10:30</b><br/>
</span>
</span></td>
</tr>
<tr><td>&nbsp;</td></tr>

</table>
<p style="width: 100%; margin: 8px auto; padding-bottom: 5px; background-color: #DCDCDC;text-align: center; border: 1px solid black;">This warning data is courtesy of and is Copyright &copy; by EUMETNET-METEOalarm (http://www.meteoalarm.org/) and respective National Meteorological Services.<br/>
Used with permission per www.meteoalarm.org <a href="https://meteoalarm.org/page/terms-and-conditions" target="_blank">Terms &amp; Conditions of Reuse</a>.<br/>
Time delays between this website and the www.meteoalarm.org website are possible.<br/>
For the most up to date information about alert levels as published by the participating National Meteorological Services please use <a href="https://www.meteoalarm.org/">www.meteoalarm.org</a>.
<br />
<small>get-meteoalarm-warning-inc.php - V3.16 - 08-Mar-2023<br/>adapted by <a href="https://saratoga-weather.org/wxtemplates/" target="_blank">Saratoga-Weather.org</a> with permission from wrnWarningEU-CAP.php script in <a href="https://pwsdashboard.com" target="_blank">pwsdashboard.com</a>.</small></p>
<!--  get-meteoalarm-warning-inc: end  ./cache/meteoalarm-details.html -->

    <div style="margin-top:14px;text-align:right;">
      <a href="wxadvisory.php" style="font-size:.68rem;color:var(--accent);">
        Puna stranica upozorenja →      </a>
    </div>
  </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:00';
  const set  = '19:24';
  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,
          ajaxrainratehr:    d.currentrainratehr,
          ajaxrainydy:       d.yesterdayrain,
          ajaxrainmo:        d.monthrn,
          ajaxrainyr:        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 || '1';
          const mPct  = 24;
          const mDays = 24;
          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(24, 24, 56);
  });

})();
</script>

<div style="display:none">
<!-- CR '04/13/2026 00:41:38 CEST' is 10 secs old -->
<!-- ./clientraw.txt file age = 9 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);">13/04/2026 00:40</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="1"></div>
      <div class="temp-hero-right">
        <div class="temp-big">
          <span class="ajax" id="ajaxtemp">7.3&deg;C</span>
        </div>
        <div class="temp-condition ajax">Noć, suvo</div>
        <div class="temp-feels">
          Osećaj: <strong><span class="ajax" id="ajaxfeelslike">7&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">7.3&deg;C</span></span>
          <span class="tmg-cell-time">00:37</span>
        </div>
        <div class="tmg-cell">
          <span class="tmg-cell-val" style="color:var(--cool)"><span class="ajax" id="ajaxtempmin">6.3&deg;C</span></span>
          <span class="tmg-cell-time">00:03</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)">15.7&deg;C</span>
          <span class="tmg-cell-time">16:22</span>
        </div>
        <div class="tmg-cell">
          <span class="tmg-cell-val" style="color:var(--cool)">-1.3&deg;C</span>
          <span class="tmg-cell-time">05:33</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;">6.3&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;">7.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;">7.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.9&deg;C &mdash; 2024</td>
      </tr>
      <tr>
        <td><span class="lbl-cold">Aps. minimum</span></td>
        <td>0.2&deg;C &mdash; 2022</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   = 24;
      const moonDays  = 24;

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

      // Diff pills
      const now    = 7.3;
      const prev24 = 2.2;
      const prev1h = 6.2;
      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">IJI</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.9</span>
          <span class="wind-speed-unit"> m/s</span>
        </div>
      </div>
    </div>

    <div class="wind-bft">
      <span class="ajax" id="ajaxbeaufortnum">1</span> Bft
      &mdash; <span class="ajax" id="ajaxbeaufort">Light Air</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">2.0</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.6</span> m/s
          <span class="ajax" id="ajaxwindmaxgusttime"> u 00:12</span>
        </span>
      </div>
      <div class="stat-row">
        <span class="stat-label">Maks. meseca</span>
        <span class="stat-val">11.4 m/s &mdash; 1/4</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('ESE', 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">0.0 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">0.0 mm</span></span></div>
        <div class="stat-row"><span class="stat-label">Juče</span><span class="stat-val"><span class="ajax" id="ajaxrainydy">0.0 mm</span></span></div>
                <div class="stat-row"><span class="stat-label">Prethodnih 7 dana</span><span class="stat-val"><span class="convRain">     0.0 mm</span></span></div>
        <div class="stat-row"><span class="stat-label">Mesec</span><span class="stat-val"><span class="ajax" id="ajaxrainmo">0.5 mm</span></span></div>
        <div class="stat-row"><span class="stat-label">April prosek</span><span class="stat-val"><span class="convRain">    29.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> 29.2 mm          </span>
        </div>
        <div class="stat-row"><span class="stat-label">Sezona</span><span class="stat-val"><span class="ajax" id="ajaxrainyr">131.3 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;">1/4/2026<br>u   01: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">56</span>%</strong></span>
      </div>
      <div class="stat-row"><span class="stat-label stat-hi">Maksimum</span><span class="stat-val stat-hi">58% u 00:00</span></div>
      <div class="stat-row"><span class="stat-label stat-lo">Minimum</span><span class="stat-val stat-lo">56% u 00:24</span></div>
      <div class="stat-row">
        <span class="stat-label">Tačka rose</span>
        <span class="stat-val"><span class="ajax" id="ajaxdew">-0.9&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">1006.4 hPa</span></div>
    <div class="baro-trend">
      <span class="ajax" id="ajaxbarotrendtext">Pada</span>
      <span class="ajax" id="ajaxbaroarrow" style="font-size:0.72rem; font-weight:400; color:var(--muted)">
         <span style="color:var(--cool)">▼</span> -1.0 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">1007.1 </span> u 00:00</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">1006.1 </span> u 00:36</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:00</span></div>
      <div class="sunmoon-item"><span class="sunmoon-label">Zalazak Sunca</span><span class="sunmoon-val" style="color:var(--warm)">19:24</span></div>
      <div class="sunmoon-item"><span class="sunmoon-label">Izlazak Meseca</span><span class="sunmoon-val">03:56</span></div>
      <div class="sunmoon-item"><span class="sunmoon-label">Zalazak Meseca</span><span class="sunmoon-val">13:29</span></div>
    </div>
    <div class="stat-list">
      <div class="stat-row"><span class="stat-label">Pun Mesec</span><span class="stat-val">02:13 UTC 2 april 2026</span></div>
      <div class="stat-row"><span class="stat-label">Mlad Mesec</span><span class="stat-val">11:52 UTC 17 april 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">13:24</div>
          <div class="daylight-change">+00:03:10             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"><defs><radialGradient id="ms_om2400x240r525" cx="38%" cy="32%" r="68%"><stop offset="0%" stop-color="#fffde7"/><stop offset="55%" stop-color="#ffd54f"/><stop offset="100%" stop-color="#f9a825"/></radialGradient><radialGradient id="mgl_om2400x240r525" cx="50%" cy="50%" r="50%"><stop offset="58%" stop-color="#ffd54f" stop-opacity="0"/><stop offset="100%" stop-color="#ffd54f" stop-opacity="0.2"/></radialGradient><clipPath id="cp_om2400x240r525"><circle cx="28" cy="28" r="23.52"/></clipPath></defs><circle cx="28" cy="28" r="37.63" fill="url(#mgl_om2400x240r525)"/><circle cx="28" cy="28" r="23.52" fill="#1a2535"/><g clip-path="url(#cp_om2400x240r525)"><path d="M 28 4.48 A 23.52 23.52 0 0 0 28 51.52 A 12.23 23.52 0 0 1 28 4.48 Z" fill="url(#ms_om2400x240r525)"/></g><circle cx="28" cy="28" r="23.52" fill="none" stroke="rgba(255,253,231,0.18)" stroke-width="1"/></svg>          <div style="font-size:0.63rem; color:var(--yellow); font-weight:600; line-height:1.3; text-align:center;">Opadajući srp</div>
          <div style="font-size:0.6rem; color:var(--muted); line-height:1.3; text-align:center;">24% Osvetljenost</div>
          <div style="font-size:0.58rem; color:var(--muted); text-align:center;">24 dana u ciklusu</div>
        </div>

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

      // 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">0.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:0%"></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">0.0 @ 00:00</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)">720</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">0</span> W/m² (<span class="ajax" id="ajaxsolarpct">0</span>%)</div>
        <div style="font-size:0.72rem; color:var(--warm); margin-top:4px;">Najviši: 0 @ 00:00</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">00:39</td><td class="st-temp">7.3 °C</td><td>1006.4 hPa</td><td>ESE</td><td>0.9 m/s</td><td>56 %</td><td>0.0 mm</td></tr>
<tr><td class="st-name">Subotica-Aleksandrovo</td><td class="st-time">00:40</td><td class="st-temp">14.0 °C</td><td>1018.2 hPa</td><td>SW</td><td>0.3 m/s</td><td>49 %</td><td>0.0 mm</td></tr>
<tr><td class="st-name">Palić - RHMZ</td><td class="st-time">00:00</td><td class="st-temp">8.0 °C</td><td>1005.6 hPa</td><td>NNE</td><td>1.0 m/s</td><td>53 %</td><td>-</td></tr>
<tr><td class="st-name">Kanjiža</td><td class="st-time">00:39</td><td class="st-temp">7.0 °C</td><td>1013.7 hPa</td><td>N</td><td>0.0 m/s</td><td>59 %</td><td>0.0 mm</td></tr>
<tr><td class="st-name">Senta</td><td class="st-time">00:40</td><td class="st-temp">7.0 °C</td><td>1008.8 hPa</td><td>NW</td><td>0.8 m/s</td><td>62 %</td><td>0.0 mm</td></tr>
<tr><td class="st-name">Bačka Topola</td><td class="st-time">00:40</td><td class="st-temp">8.0 °C</td><td>1011.9 hPa</td><td>ESE</td><td>0.0 m/s</td><td>59 %</td><td>0.0 mm</td></tr>
<tr><td class="st-name">Novo Orahovo</td><td class="st-time">00:40</td><td class="st-temp">7.0 °C</td><td>1011.5 hPa</td><td>ENE</td><td>1.1 m/s</td><td>69 %</td><td>0.0 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="wxforecast.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='wxforecast.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;">13.04</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);">18.6°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">6.8°</span>
        </div>

        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          E 5.5 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='wxforecast.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;">14.04</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="0.55"><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);">17.2°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">11.4°</span>
        </div>

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

        <div style="font-size:0.58rem; color:var(--muted); margin-top:3px; line-height:1.3;">Slaba rosulja</div>
      </div>
          <div class="card" style="padding:14px 12px; text-align:center; cursor:pointer;
           "
           onclick="window.location='wxforecast.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;">15.04</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="0.55"><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);">19.1°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">10.9°</span>
        </div>

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

        <div style="font-size:0.58rem; color:var(--muted); margin-top:3px; line-height:1.3;">Slaba rosulja</div>
      </div>
          <div class="card" style="padding:14px 12px; text-align:center; cursor:pointer;
           "
           onclick="window.location='wxforecast.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;">16.04</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);">21.2°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">10.1°</span>
        </div>

                <div style="font-size:0.62rem; color:var(--accent); margin-bottom:3px;">
          💧 15%
                  </div>
        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          SE 2.5 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='wxforecast.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;">
          Pet        </div>
        <div style="font-size:0.58rem; color:var(--muted); margin-bottom:6px;">17.04</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);">20.5°</span>
          <span style="font-family:var(--font-num); font-size:.88rem; font-weight:500; color:var(--cool);">10.9°</span>
        </div>

                <div style="font-size:0.62rem; color:var(--accent); margin-bottom:3px;">
          💧 24%
                  </div>
        
        <div style="font-size:0.6rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:3px;">
          NNE 3.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>
  </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?1776033708" 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>