/* =====================================================================
   VREME ŽERJAV — custom dark "kiosk" theme for Belchertown
   Loaded last (see header.html.tmpl), overrides style.css + dark.min.css
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --bg:            #080c12;
    --bg-soft:       #0b1119;
    --card:          #0e1520;
    --card-border:   rgba(255,255,255,0.07);
    --card-border-hi:rgba(255,255,255,0.14);
    --text:          #e7ecf3;
    --text-dim:      #a8b0c0;
    --text-faint:    #7c8494;
    --cyan:          #35d2f4;
    --orange:        #ff7a3d;
    --blue:          #4da3ff;
    --green:         #37d67a;
    --yellow:        #f5c542;
    --red:           #ff5c5c;
    --radius:        14px;
}

/* ---------- base ---------- */
body{
    background: radial-gradient(1200px 600px at 15% -10%, #0d1a2b 0%, var(--bg) 55%) fixed, var(--bg) !important;
    color: var(--text) !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
}
.site-inner, .content, main.content{ background: transparent !important; }

/* ---------- night sky (visible only between sunset and sunrise) ---------- */
.night-sky{
    position: fixed; inset: 0; width:2px; height:2px; border-radius:50%;
    background: transparent; pointer-events: none; z-index: 0;
    opacity: 0; transition: opacity 3s ease;
    animation: star-twinkle 4s ease-in-out infinite;
}
@keyframes star-twinkle{
    0%, 100% { filter: brightness(0.75); }
    50%      { filter: brightness(1.15); }
}
@media (prefers-reduced-motion: reduce){ .night-sky{ animation: none; } }

/* Gentle pulsing glow on the temperature reading */
.outtemp, .outtemp_outer .outtemp{
    animation: temp-pulse 3.6s ease-in-out infinite;
}
@keyframes temp-pulse{
    0%, 100% { filter: brightness(1.15); }
    50%      { filter: brightness(1.32); }
}

/* Weather icon gently floats */
#wxicon{ animation: icon-float 4.5s ease-in-out infinite; }
@keyframes icon-float{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Smooth needle turn when the wind direction updates */
.compass .arrow{ transition: transform 0.8s cubic-bezier(.34,1.4,.64,1); }

@media (prefers-reduced-motion: reduce){
    .outtemp, .outtemp_outer .outtemp, #wxicon, .compass .arrow{
        animation: none !important; transition: none !important;
    }
}
.site-inner, .wrap{ padding-left:16px !important; padding-right:16px !important; box-sizing:border-box; }
@media (min-width: 992px){
    .site-inner, .wrap{ max-width: 90% !important; margin-left:auto !important; margin-right:auto !important; padding-left:20px !important; padding-right:20px !important; }
}
a{ color: var(--cyan); }
a:hover{ color: var(--blue); }
.clear{ clear: both; }

.mono, .wx-stn-info, .stats-title, .snapshot-records-today-header, .snapshot-records-month-header,
.records-header, .table-striped td, .table-striped th{
    font-family: 'JetBrains Mono', monospace !important;
}

/* ---------- header / station title ---------- */
.wx-stn-info-container{
    background: transparent !important;
    border: none !important;
    padding: 22px 4px 18px 4px !important;
}
.wx-stn-name h1{
    color: var(--cyan) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 30px !important;
    letter-spacing: .5px;
    text-shadow: 0 0 22px rgba(53,210,244,.35);
    margin: 0 0 2px 0 !important;
}
.wx-stn-info{
    color: var(--text-faint) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.wx-stn-info a{ color: var(--text-faint) !important; }
.updated, .updated-wrapper{
    color: var(--text-dim) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
}
.onlineMarker, .onlineMarkerOuter .onlineMarker{
    background: var(--green) !important;
    box-shadow: 0 0 8px var(--green);
}
.wx-stn-alert{
    background: rgba(255,92,92,.12) !important;
    border: 1px solid rgba(255,92,92,.35) !important;
    color: var(--red) !important;
    border-radius: 8px;
}

/* ---------- sub-page header (graphs/records/reports/about) — center it ---------- */
.weewx:not(.frontpage) .wx-stn-info-container{ text-align:center; padding:20px 4px !important; }
.weewx:not(.frontpage) .wx-stn-info-container .row{
    display:flex !important; flex-direction:column; align-items:center; gap:4px; margin:0 !important;
}
.weewx:not(.frontpage) .wx-stn-info-container [class*="col-"]{
    float:none !important; width:auto !important; padding:0 !important; text-align:center !important;
}
.weewx:not(.frontpage) .wx-stn-info-current-obs{
    display:flex !important; align-items:center; justify-content:center; gap:8px; order:-1;
}
.weewx:not(.frontpage) .obs-header-outtemp{ font-size:18px; color: var(--cyan) !important; font-weight:600; }
.weewx:not(.frontpage) .obs-header-icon img{ width:26px; }
.weewx:not(.frontpage) .wx-stn-info-social{ display:flex !important; justify-content:center; }

/* ---------- generic card look for every panel ---------- */
.weather-obs-top, .weather-obs-bottom, .station-observations, .current-almanac,
.col-sm-6.stn-quick-stats, .radar_image,
.graph-outer,
.records-table, .table-striped, .noaa_report_container{
    background: var(--card) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
/* These are wrapper <div class="row ..."> elements around #include hooks —
   keep them transparent so we don't get a card-inside-a-card ("double
   bubble"). The actual card look comes from the content they wrap
   (.webcam-card, .stn-quick-stats, .snapshot-records-text, etc). */
.index-hook-after-forecast, .index-hook-after-charts, .index-hook-after-snapshot,
.index-hook-after-station-info, .noaa_reports{
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.index-hook-after-forecast{ margin: 24px 0 !important; }
.border-left, .border-right, .border-top, .border-bottom{ border-color: var(--card-border) !important; }

.temperature-row{ display:flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px 0 !important; }
.temperature-row > div[class*="col-"]{
    float:none !important; width:auto !important; padding: 16px !important; margin:0 !important;
}
.temperature-row .col-lg-4{ flex: 1 1 300px; }
.temperature-row .col-lg-3{ flex: 1 1 260px; }
.temperature-row .col-lg-5{ flex: 2 1 420px; min-height: 100%; }

/* ---------- current temp block ---------- */
/* Belchertown already color-codes the temperature via get_outTemp_color() in
   belchertown.js (sets an inline color on .outtemp_outer) — don't fight it
   with a fixed color, just let it inherit and add a matching glow. */
.outtemp, .outtemp_outer .outtemp{
    font-weight: 600 !important;
    text-shadow: 0 0 26px currentColor;
    filter: brightness(1.15);
}
.outtempunitlabelsuper{ font-weight:600; color: inherit !important; text-shadow: 0 0 18px currentColor; filter: brightness(1.15); }
.outtemp_outer{ white-space:nowrap; }

/* ---------- tidy up / center the whole temperature card ---------- */
.weather-obs-top{ text-align:center; }
.temp-observation{
    display:flex !important; align-items:center; justify-content:center;
    gap:18px; flex-wrap:wrap; margin:0 0 10px 0 !important;
}
.temp-observation > div[class*="col-"]{ float:none !important; width:auto !important; padding:0 !important; }
#wxicon{ display:block; width:88px; height:88px; object-fit:contain; }
.current-obs-container, .current-obs-container + div{ float:none !important; width:100% !important; padding:0 !important; }
.current-obs-text{ font-size:16px; margin-bottom:8px; }
.aqi_outer{ margin-bottom:4px; }
.feelslike{ margin: 6px 0 12px 0 !important; }
.stn-high-low{ border-top: 1px solid var(--card-border); padding-top:12px; margin-top:4px; }

/* ---------- "rain soon" band ---------- */
.rain-soon-band{
    display:none; text-align:center; margin-top:14px; padding:8px 14px;
    background: rgba(77,163,255,.1); border:1px solid rgba(77,163,255,.3);
    border-radius:8px; color: var(--blue) !important; font-size:13px;
}
.rain-soon-band.rain-soon-visible{ display:block; }
.rain-soon-band i{ margin-right:5px; }
.stn-high-low-table{ margin:0 auto; }
.current-obs-text{ color: var(--text-dim) !important; text-transform: lowercase; }
.stn-high-low-table-title{
    color: var(--text-faint) !important; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:1px;
}
.stn-high-low-table .high{ color: var(--orange) !important; font-weight:600; }
.stn-high-low-table .low{ color: var(--blue) !important; font-weight:600; }
.feelslike{ color: var(--text-dim) !important; }

.obs-wind-divider{ display:none !important; height:0 !important; width:0 !important; margin:0 !important; padding:0 !important; border:none !important; background:transparent !important; }
/* Kill every leftover light-gray (#D7D7D7) divider line from the original
   theme — they don't belong in the new dark design and were showing up as
   bright horizontal/vertical lines between cards. */
.temperature-row, .eq-stats-row, .wx-stn-info-container, .current-almanac, .windrow{
    border: none !important;
}
.eq-stats-row{ margin-bottom:0 !important; margin-top:24px !important; }
.forecast-day::after{ display:none !important; content:none !important; }
.compass .direction .curwinddir{ color: var(--cyan) !important; font-weight:600; }
.compass .arrow{ border-bottom-color: var(--cyan) !important; filter: drop-shadow(0 0 6px rgba(53,210,244,.5)); }
.windtext{ color: var(--text-faint) !important; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.windrow .weather-obs-bottom{ overflow:hidden; }
.windrow .current_wind{ display:flex !important; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px; }
.windrow .current_wind > div[class*="col-"]{ float:none !important; width:auto !important; min-width:0; }
.windspeedtable{ overflow:hidden; }
.wind-table{ width:auto !important; margin: 0 auto !important; }
.curwindspeed, .curwindgust{ color: var(--cyan) !important; font-weight:600; font-size: 26px !important; line-height:1.1; }
.mph{ color: var(--text-faint) !important; }
.beaufort{
    color: var(--text-dim) !important; font-family:'JetBrains Mono',monospace; font-size:12px;
    text-transform:capitalize; letter-spacing:.5px; padding-top:10px !important; text-align:center !important;
}

/* ---------- station-observations grid (Veter/Tlak/Dez/UV/Sevanje/PM10 ...) ---------- */
.station-observations{ padding: 14px !important; }
.station-observations table{ width:100%; border-collapse: separate !important; border-spacing: 10px !important; margin: -10px; }
.station-observations tr{
    display: inline-flex !important; flex-direction: column; justify-content:center;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--card-border) !important;
    border-radius: 10px;
    padding: 10px 12px !important;
    width: calc(50% - 20px);
    vertical-align: top;
}
.station-observations td{ display:block !important; border:none !important; padding:2px 0 !important; }
.station-observations .obs-label, .station-observations td:first-child{
    color: var(--text-dim) !important; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:1px; text-transform:uppercase;
}
.station-observations .obs-value, .station-observations td:last-child{
    color: var(--cyan) !important; font-size: 20px; font-weight: 600;
}

/* almanac / sun-moon */
.small-almanac{ border-top:none !important; margin:0 !important; padding:0 !important; }
.sun-moon-title{ color: var(--text-dim) !important; font-family:'JetBrains Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:1.5px; }
.sunrise-value, .sunset-value{ color: var(--yellow) !important; font-weight:600; }
.moon-phase{ color: var(--text) !important; }
.moon-visible{ color: var(--text-dim) !important; }
.sun-moon-modal a{ color: var(--cyan) !important; }

/* animated sunrise->sunset arc, centered, full width */
.small-almanac{ display:flow-root; }
.sun-arc-wrap{ width:100%; text-align:center; margin: 4px 0 10px 0; position:relative; }
.sun-arc{ width:80%; max-width:280px; height:auto; color: var(--card-border-hi); display:inline-block; overflow: visible; }
#sunArcDot{ fill: var(--yellow); opacity:.55; }
#sunArcDotCore{ fill: var(--yellow); transition: cx 0.6s ease, cy 0.6s ease, opacity 0.6s ease; }
#sunArcDot{ transition: cx 0.6s ease, cy 0.6s ease, opacity 0.6s ease; }
.moon-phase-arc-icon{
    position:absolute; font-size:16px; color:#d8dde6; transform: translate(-50%, -50%);
    transition: left 0.6s ease, top 0.6s ease, opacity 0.6s ease; pointer-events:none;
}
.small-almanac .sun{ float:left !important; width:50% !important; text-align:left; }
.small-almanac .moon{ float:right !important; width:50% !important; text-align:right; }
.small-almanac .moon-container{ display:inline-block; text-align:right; }

/* ---------- radar panel ---------- */
.radar-map{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.radar_image{ padding: 10px !important; min-height: 320px; }
.radar_image iframe, .radar_image img{ border-radius: 10px; width:100%; }

/* ---------- forecast row ---------- */
.forecastrow > .forecast-title, .forecastrow > .forecast-menu{
    float:none !important; width:auto !important; display:inline-block; vertical-align:middle;
}
.forecast-title{
    color: var(--text) !important; font-weight:600; font-size:18px !important;
    padding: 6px 4px !important;
}
.forecast-subtitle{ color: var(--text-faint) !important; font-size:12px; }
.forecast-menu{ color: var(--text-faint) !important; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; }
.forecast-button{
    background: var(--card) !important; border:1px solid var(--card-border) !important; color: var(--text-dim) !important;
    border-radius: 6px !important;
}
.forecast-button.selected, .forecast-button:hover{
    background: rgba(53,210,244,.12) !important; color: var(--cyan) !important; border-color: rgba(53,210,244,.4) !important;
}
.forecastrow{
    margin-top: 14px !important;
    background: var(--card) !important; border:1px solid var(--card-border) !important;
    border-radius: var(--radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 16px !important;
    display: flow-root !important;
}
[class*="hr_forecasts"] > div{
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 10px !important;
    box-shadow: none;
    padding: 14px !important;
    text-align: center;
}

/* Default (3hr / 24hr / daily forecast rows): original flexible layout */
[class*="hr_forecasts"]{ display:flex !important; flex-wrap:wrap; gap:12px; margin:0 !important; }
[class*="hr_forecasts"] .forecast-day{ float:none !important; width:auto !important; flex:1 1 130px; margin:0 !important; }

/* 1-hour forecast row only: smaller cards in a fixed-column grid, since
   it can have up to 24 cards and needs to stay compact and balanced. */
.1hr_forecasts{ display:grid !important; grid-template-columns: repeat(4, 1fr) !important; gap:10px !important; }
.1hr_forecasts .forecast-day{ flex:none !important; }
.1hr_forecasts > div{ padding: 8px 4px !important; font-size: 13px; }
@media (min-width: 600px){ .1hr_forecasts{ grid-template-columns: repeat(6, 1fr) !important; } }
@media (min-width: 992px){ .1hr_forecasts{ grid-template-columns: repeat(8, 1fr) !important; } }
@media (min-width: 1400px){ .1hr_forecasts{ grid-template-columns: repeat(12, 1fr) !important; } }

.forecast-day.border-left{ border-left:none !important; }
.forecast-day-label, .day_name{ color: var(--text) !important; font-weight: 600; font-size: 15px; }
.forecast-date, .day_date{ color: var(--text-faint) !important; font-size: 11px; font-family:'JetBrains Mono',monospace; }
.forecast-high{ color: var(--orange) !important; font-weight: 600; font-size: 18px; }
.forecast-low{ color: var(--blue) !important; font-weight: 600; }
.forecast-condition-text{ color: var(--text-dim) !important; font-size: 12px; text-transform: lowercase; }

/* The 1/3/24hr forecast rows use a JS-computed padding-top on
   .forecast-temp-graph to fake a mini temperature-line-graph (higher
   temp = icon pushed up). It's fragile and was making the icon and
   temperature number overlap on our card layout — replace it with a
   plain, reliable stacked layout instead. */
.forecast-temp-graph{
    padding-top: 6px !important; height: auto !important; min-height: 0 !important;
    display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start;
    gap: 2px;
}
.forecast-image{ height: auto !important; }
.forecast-image img{ width: 42px !important; height: 42px !important; object-fit: contain; }
.forecast-conditions, .forecast-conditions-1hour{ min-height: 0 !important; }
.forecast-precip, .forecast-wind{ color: var(--text-faint) !important; font-size: 11px; }

/* MeteoAlarm / fire-danger style badge (used via forecast alert hook) */
.wx-fire-danger, .forecast-alert-badge{
    display:inline-block; margin-top:8px; padding:4px 8px; border-radius:6px;
    background: rgba(255,92,92,.14); border:1px solid rgba(255,92,92,.35);
    color: var(--red) !important; font-size:11px; font-family:'JetBrains Mono',monospace;
}

/* ---------- snapshot stats (daily / monthly summary) ---------- */
.snapshot-records-text{ background:transparent !important; border:none !important; box-shadow:none !important; padding: 0 4px 18px 4px !important; }
.snapshot-records-text a{
    color: var(--text) !important; font-weight:700; font-size:15px; text-decoration:none !important;
}
.stn-quick-stats{ padding: 6px 16px 12px 16px !important; }
/* The OUTER wrapper around the whole snapshot section shares the same
   ".stn-quick-stats" class as the two inner (today/month) cards — keep it
   transparent so we don't get a card wrapping the two cards inside it. */
.col-sm-12.stn-quick-stats, .col-sm-9.stn-quick-stats{
    background: var(--card) !important; border:1px solid var(--card-border) !important;
    border-radius: var(--radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 10px 16px !important;
}
.col-sm-6.stn-quick-stats{
    background: rgba(255,255,255,.03) !important; border:1px solid var(--card-border) !important;
    border-radius: 10px !important; box-shadow:none;
}
.stats-title span{ color: var(--text) !important; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.stn-quick-stats table td{ color: var(--text-dim) !important; padding: 2px 6px !important; font-size: 13px; }
.stn-quick-stats table td b{ color: var(--text-faint) !important; font-weight:500; }
.stn-quick-stats table td:nth-child(2), .stn-quick-stats table td:nth-child(4),
.stn-quick-stats table span{ color: var(--cyan) !important; font-weight:600; }

/* ---------- charts ---------- */
.highcharts-row{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.wx-graph-front{ background:transparent !important; border:none !important; box-shadow:none !important; padding: 0 4px 18px 4px !important; }
.wx-graph-front a, .homepage-graphgroup-title{ color: var(--text) !important; font-weight:700; font-size:15px; text-decoration:none !important; }
.graph-outer{ padding: 24px 16px !important; background: var(--card) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius: var(--radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,.35) !important; margin-top:24px; display:flow-root !important; }
.graph-outer .wx-graph-front{ padding:0 0 6px 0 !important; }
/* Restore a horizontal gutter between chart columns that sit side-by-side
   on desktop (Bootstrap col-sm-6) — our page-wide padding:0 reset removed
   Bootstrap's default gutter, so paired charts were touching. */
.graph-outer [class*="col-"]{ padding: 0 8px !important; box-sizing:border-box; }
/* Highcharts sets an inline margin-top:20px on the chart container itself —
   tighten that up since we already have card padding. */
.graph-outer [class*="col-"] > div[id]{ margin-top:4px !important; }
.wx-buttons-description{ padding:0 0 12px 0 !important; }
.wx-buttons-description .graphpage-title{ color: var(--text) !important; font-weight:700; font-size:15px; }
/* Just add spacing between stacked charts — do NOT change display/flex here,
   Highcharts sizes its SVG off the container's actual box and a flex
   container breaks that (causes squished/overlapping charts and very
   slow, looping reflows). */
.graph-outer > div{ margin-bottom:14px !important; }
.graph-outer > div:last-child{ margin-bottom:0 !important; }
.highcharts-background{ fill: transparent !important; }
.highcharts-title, .highcharts-axis-labels text, .highcharts-legend-item text{ fill: var(--text-dim) !important; }
.highcharts-grid-line{ stroke: rgba(255,255,255,.06) !important; }

/* ---------- heatmap widget (native, rendered at report-generation time) ---------- */
.heatmap-section{
    background: var(--card) !important; border:1px solid var(--card-border) !important;
    border-radius: var(--radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 14px !important; margin-top:14px; overflow:hidden; position:relative;
}
.hm-cell{ cursor:pointer; }
.hm-tooltip{
    display:none; position:absolute; z-index:20; pointer-events:none;
    background:#0a1119; border:1px solid var(--card-border-hi); border-radius:6px;
    padding:5px 9px; font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--text);
    white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.heatmap-title{
    color: var(--text-dim) !important; font-family:'JetBrains Mono',monospace; font-size:12px;
    letter-spacing:1px; text-transform:uppercase; margin-bottom:10px;
}
.heatmap-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.heatmap-tab{
    background: transparent !important; border:1px solid var(--card-border) !important; color: var(--text-dim) !important;
    border-radius: 8px !important; padding:6px 14px; font-family:'JetBrains Mono',monospace; font-size:12px;
    text-transform:uppercase; letter-spacing:.5px; cursor:pointer;
}
.heatmap-tab.active, .heatmap-tab:hover{
    background: rgba(53,210,244,.12) !important; color: var(--cyan) !important; border-color: rgba(53,210,244,.4) !important;
}
.heatmap-panel-hidden{ display:none !important; }
table.hm{ border-collapse:collapse; width:100%; max-width:920px; margin:0 auto; table-layout:fixed; }
table.hm td, table.hm th{ text-align:center; padding:0; }
table.hm th{ font-size:8px; color: var(--text-faint); font-weight:400; padding-bottom:3px; }
.hm-daylabel{ font-size:8px; color: var(--text-faint); padding-right:3px !important; white-space:nowrap; text-align:right !important; }
.hm-daylabel-col{ width:30px; }
.hm-cell{ width:100%; height:18px; border-radius:2px; }
.hm-cell-wrap{ padding:0.5px !important; }
.hm-legend{ display:flex; align-items:center; gap:8px; margin:10px auto 0 auto; max-width:920px; font-size:10px; color: var(--text-faint); font-family:'JetBrains Mono',monospace; }
.hm-legend-bar{ flex:1; height:8px; border-radius:4px;
    background: linear-gradient(to right, rgb(61,152,255), rgb(53,210,244), rgb(55,214,122), rgb(245,197,66), rgb(255,122,61), rgb(255,92,92)); }

/* ---------- about page: monthly/yearly colour-coded history tables ---------- */
.history-tables-wrap{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.history-table-card{
    background: var(--card) !important; border:1px solid var(--card-border) !important;
    border-radius: var(--radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 16px !important;
}
.history-table-card h4{
    color: var(--text-dim) !important; font-family:'JetBrains Mono',monospace; font-size:13px;
    letter-spacing:1px; text-transform:uppercase; margin:0 0 10px 0 !important; font-weight:600;
}
.history-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.history-table-scroll table{
    border-collapse: collapse !important; font-size:12px !important; color: var(--text-dim) !important;
}
.history-table-scroll table td, .history-table-scroll table th{
    border:1px solid rgba(255,255,255,.08) !important; padding:5px 8px !important;
    color: inherit;
}
.history-table-scroll table th{
    background: rgba(255,255,255,.04) !important; color: var(--text) !important; font-weight:600;
}
/* Keep the value-range background colours (already set inline by the
   generator) but make sure the text on top stays readable. */
.history-table-scroll table td[bgcolor]{ color:#0a0e14 !important; font-weight:600; }

/* ---------- webcam(s) — one outer card, shared title ---------- */
.webcam-section{
    background: var(--card) !important; border:1px solid var(--card-border) !important;
    border-radius: var(--radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 16px !important; margin-top:14px;
}
.webcam-section-title{
    color: var(--text) !important; font-weight:700; font-size:15px; margin-bottom:12px;
}
.webcam-grid{ display:flex !important; flex-wrap:wrap; gap:12px; }
.webcam-card{
    flex: 1 1 280px; min-width:0; padding: 10px !important; margin:0 !important;
    background: rgba(255,255,255,.03) !important; border:1px solid var(--card-border) !important;
    border-radius: 10px !important; box-shadow:none !important;
}
.webcam-card .webcam-title{
    color: var(--text-faint) !important; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px;
}
.webcam-card img, .webcam-card iframe{ width:100%; border-radius:8px; display:block; }
.webcam-card img{ cursor: zoom-in; transition: opacity .15s; }
.webcam-card img:hover{ opacity: .85; }

/* ---------- webcam lightbox (click to enlarge) ---------- */
#webcamLightboxOverlay{
    display:none; position:fixed; z-index:9999; inset:0;
    background: rgba(5,8,12,.92); backdrop-filter: blur(4px);
    align-items:center; justify-content:center; flex-direction:column; gap:14px;
    padding: 24px; cursor: zoom-out;
}
#webcamLightboxImg{ max-width:92vw; max-height:82vh; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.6); }
#webcamLightboxCaption{ color: var(--text); font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
#webcamLightboxClose{
    position:absolute; top:18px; right:26px; color:#fff; font-size:34px; font-weight:300;
    line-height:1; cursor:pointer; opacity:.8;
}
#webcamLightboxClose:hover{ opacity:1; }

/* ---------- records page ---------- */
.records-table{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; padding:0 !important; }
.records-table table{ width:100% !important; min-width:640px; border-collapse:collapse !important; table-layout:fixed !important; }
.records-table td{
    padding:10px 12px !important; font-size:13px !important; white-space:nowrap;
    vertical-align:middle !important;
}
.records-table td:first-child{ white-space:normal; color: var(--text) !important; overflow-wrap:break-word; }
.records-table td{ overflow:hidden; text-overflow:ellipsis; }
.records-header{ background: rgba(53,210,244,.08) !important; color: var(--cyan) !important; font-weight:600; }
.records-header-year, .records-header-alltime{ color: var(--text-faint) !important; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; }
.table-striped tr:nth-child(even){ background: rgba(255,255,255,.02) !important; }
.leftborder{ border-left: 1px solid var(--card-border) !important; color: var(--cyan) !important; font-weight:600; }

/* ---------- buttons / nav ---------- */
.btn, .btn-primary, .wx-btn-year{
    background: rgba(53,210,244,.1) !important; border: 1px solid rgba(53,210,244,.35) !important;
    color: var(--cyan) !important; border-radius: 8px !important; box-shadow:none !important;
}
.btn:hover, .btn-primary:hover{ background: rgba(53,210,244,.22) !important; }
.genesis-nav-menu{ background: transparent !important; }
.genesis-nav-menu a{ color: var(--text-dim) !important; }
.genesis-nav-menu a:hover, .menu-item.current-menu-item a{ color: var(--cyan) !important; }

/* ---------- footer ---------- */
.site-footer{ background: transparent !important; color: var(--text-faint) !important; border-top: 1px solid var(--card-border) !important; }
.site-hitcounter{
    text-align:center; margin-top:8px;
}
.site-hitcounter-link{
    font-family:'JetBrains Mono',monospace; font-size:10.5px;
    color: var(--text-faint) !important; letter-spacing:.5px; text-decoration:none !important;
}
.site-hitcounter-link:hover{ color: var(--cyan) !important; text-decoration:underline !important; }
.site-footer a{ color: var(--text-dim) !important; }

/* ---------- modals ---------- */
.modal-content{ background: var(--card) !important; border:1px solid var(--card-border) !important; color: var(--text) !important; border-radius: var(--radius) !important; }
.modal-header, .modal-footer{ border-color: var(--card-border) !important; }

/* =====================================================================
   V2 FIXES — neutralize Bootstrap's nested .row negative margins (these
   were breaking card borders/alignment on both mobile and desktop),
   give the wind + sun/moon blocks a real card, rebuild the top row as
   a proper aligned grid, and make the observation grid robust.
   ===================================================================== */

/* Kill Bootstrap's -15px row margins and col paddings everywhere inside
   the homepage top section — we manage spacing ourselves via gap. */
.weewx.frontpage .row{ margin-left:0 !important; margin-right:0 !important; }
.weewx.frontpage [class*="col-"]{ padding-left:0 !important; padding-right:0 !important; }
.weewx.frontpage .row::after, .weewx.frontpage .row::before{ display:none !important; }

/* Top row becomes a real grid: temp | almanac+obs | radar, all same height */
.temperature-row{
    display: grid !important;
    grid-template-columns: minmax(260px,1fr) minmax(280px,1.15fr) minmax(320px,1.7fr);
    gap: 14px !important;
    align-items: stretch;
}
.temperature-row > div[class*="col-"]{ width:auto !important; float:none !important; min-width:0 !important; }
.temperature-row .col-lg-4, .temperature-row .col-lg-3, .temperature-row .col-lg-5{
    display:flex; flex-direction:column; gap:14px; padding:0 !important; min-width:0;
}

/* Contain floated Bootstrap col-sm-* children so card backgrounds don't
   collapse to zero height (classic float-collapse bug) */
.weather-obs-top, .windrow .weather-obs-bottom, .current-almanac .weather-obs-bottom,
.current-almanac, .stn-quick-stats{ display:flow-root !important; }

/* Each sub-block becomes its own card again, but now spacing is clean */
.weather-obs-top{ padding:18px !important; }
.windrow{ margin:0 !important; }
.windrow .weather-obs-bottom{
    background: var(--card) !important; border:1px solid var(--card-border) !important;
    border-radius: var(--radius) !important; box-shadow:0 8px 24px rgba(0,0,0,.35);
    padding: 16px !important;
}
.obs-wind-divider{ display:none !important; }

.current-almanac{ padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; }
.current-almanac .station-observations{ padding:16px !important; min-width:0; }
.current-almanac .weather-obs-bottom{
    background: var(--card) !important; border:1px solid var(--card-border) !important;
    border-radius: var(--radius) !important; box-shadow:0 8px 24px rgba(0,0,0,.35);
    padding: 16px !important; margin:14px 0 0 0 !important;
}

/* On desktop only: stretch the wind card + sun/moon card to fill the
   column height so the whole top row lines up evenly with the radar. */
@media (min-width: 992px){
    .windrow{ flex:1; display:flex; }
    .windrow .weather-obs-bottom{ flex:1; display:flex !important; flex-direction:column; justify-content:center; }
    .current-almanac .weather-obs-bottom{ flex:1; display:flex !important; flex-direction:column; justify-content:center; }
}

/* Radar fills the full column height */
.radar-map{ height:100%; }
.radar_image{ height:100%; min-height:340px; }
.radar_image iframe{ height:100% !important; min-height:340px; }

/* Robust 2-column card grid for station observations, independent of
   table layout quirks (uses display:contents so <tr> becomes a direct
   grid item of the <table>). */
.station-observations table{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important;
    border-spacing:0 !important; margin:0 !important; width:100% !important; min-width:0;
}
.station-observations tbody{ display:contents !important; }
.station-observations tr{
    display:flex !important; flex-direction:column; justify-content:center;
    width:auto !important; margin:0 !important; min-width:0;
    background: rgba(255,255,255,.03) !important;
    border:1px solid var(--card-border) !important; border-radius:10px !important;
    padding:10px 12px !important;
}
.station-observations td{ display:block !important; width:auto !important; min-width:0; overflow-wrap:break-word; word-break:break-word; white-space:normal; }
.station-observations .obs-value, .station-observations td:last-child{
    color: var(--cyan) !important; font-size: 16px; font-weight: 600; line-height:1.25; overflow-wrap:break-word; word-break:break-word;
}

/* Alert banner: match card radius/spacing */
.wx-stn-alert{ border-radius: var(--radius) !important; padding:12px 16px !important; margin:10px 0 !important; max-height:160px; overflow-y:auto; }
.wx-stn-alert-text{ line-height:1.9; }
.wx-stn-alert-text a{ color: var(--red) !important; font-size:13px !important; }
.wx-stn-alert-text i{ margin-right:4px; font-size:12px; }

/* ---------- responsive: phones ---------- */
@media (max-width: 991px){
    .temperature-row{ display:block !important; }
    .temperature-row > div[class*="col-"]{
        float:none !important; width:auto !important;
        margin: 0 0 8px 0 !important; padding:0 !important;
        min-height:0 !important; height:auto !important;
    }
    .temperature-row > div[class*="col-"]:last-child{ margin-bottom:0 !important; }
    /* Belt-and-suspenders: force margin-top to 0 on every possible element in
       this chain so nothing can add extra space above a column block. */
    .current-almanac, .radar-map, .windrow, .weather-obs-top{ margin-top:0 !important; }
    .current-almanac .station-observations{ padding-top:10px !important; }
    .weather-obs-top{ padding:14px !important; }
    .windrow .weather-obs-bottom{ padding:14px !important; }
    .current-almanac .weather-obs-bottom{ margin-top:8px !important; padding:14px !important; }
    .radar_image{ min-height: 260px; }
    /* .toprow-height forces a 375px min-height on each block — makes sense
       on desktop's 3-column row, but on mobile's single-column stack it
       just leaves big empty gaps under any block shorter than 375px. */
    .toprow-height, .col-lg-4, .col-lg-3, .col-lg-5, .current-almanac, .windrow,
    .weather-obs-top, .weather-obs-bottom, .station-observations{
        min-height:0 !important; height:auto !important; max-height:none !important;
    }
}
@media (max-width: 767px){
    .wx-stn-name h1{ font-size: 22px !important; }
    .radar_image{ min-height: 220px; }
    /* rainWithRainRate ("0,0 mm  0,0 mm/hr") is the 4th observation card —
       it's the longest value shown, shrink just that one so it fits on
       one line instead of wrapping. */
    .station-observations tr:nth-child(4) .obs-value,
    .station-observations tr:nth-child(4) td:last-child{
        font-size: 13px !important; white-space: nowrap;
    }
}
@media (min-width: 992px){
    .station-observations table{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- AQI (PM10) card with 30min/24h bars ---------- */
.aqi-card{ padding: 4px 4px 0 4px; margin-top: 12px; border-top: 1px solid var(--card-border); padding-top: 14px; }
.aqi-card-title{
    color: var(--text-dim) !important; font-family:'JetBrains Mono',monospace; font-size:13px;
    letter-spacing:1px; text-transform:uppercase; margin-bottom:4px;
}
.aqi-card-value{ color: var(--text) !important; font-size:22px; font-weight:700; margin-bottom:12px; }
.aqi-card-unit{ color: var(--text-faint); font-size:13px; font-weight:500; }
.aqi-bar-row{ margin-bottom:12px; }
.aqi-bar-row:last-child{ margin-bottom:0; }
.aqi-bar-head{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.5px;
    color: var(--text-dim); gap:8px;
}
.aqi-bar-badge{ font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; text-transform:none; letter-spacing:0; white-space:nowrap; }
.aqi-bar-track{
    position:relative; height:8px; border-radius:5px;
    background: linear-gradient(to right,
        var(--green) 0%,
        var(--yellow) 20%,
        #f5a742 40%,
        var(--red) 58%,
        #b06bd6 78%,
        #d1472d 100%);
}
.aqi-bar-marker{
    position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
    background:#fff; border:2px solid #0e1520; box-shadow:0 0 0 1.5px rgba(255,255,255,.6), 0 2px 5px rgba(0,0,0,.5);
    transform: translate(-50%, -50%); transition: left 0.6s ease;
}
.aqi-bar-scale{
    display:flex; justify-content:space-between; margin-top:4px;
    font-size:10px; color: var(--text-faint); font-family:'JetBrains Mono',monospace;
}

.aqi-bar-badge.aqi-good      { background: var(--green); }
.aqi-bar-badge.aqi-ok        { background: var(--yellow); }
.aqi-bar-badge.aqi-moderate  { background: #f5a742; }
.aqi-bar-badge.aqi-poor      { background: var(--red); }
.aqi-bar-badge.aqi-verypoor  { background: #b06bd6; }
.aqi-bar-badge.aqi-extreme   { background: #d1472d; }
.aqi-bar-badge.aqi-unknown   { background: var(--text-faint); }
.aqi-bar-badge.aqi-ok, .aqi-bar-badge.aqi-moderate{ color:#1a1a1a; }
.aqi-bar-badge.aqi-good, .aqi-bar-badge.aqi-poor, .aqi-bar-badge.aqi-verypoor,
.aqi-bar-badge.aqi-extreme, .aqi-bar-badge.aqi-unknown{ color:#fff; }

/* ---------- icons for station observation cards, matching vremegrafi.php ----------
   Order follows skin.conf's station_observations list:
   barometer, dewpoint, outHumidity, rainWithRainRate, UV, radiation,
   soilTemp1, lightning_strike_count, pm10_0 */
.station-observations td:first-child{ display:flex !important; align-items:center; gap:6px; line-height:1; overflow:visible !important; white-space:normal !important; }
.station-observations td:first-child::before{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; flex:0 0 18px; font-size:14px; line-height:1; filter: grayscale(.15);
}
.station-observations tr:nth-child(1) td:first-child::before{ content:"🧭"; }
.station-observations tr:nth-child(2) td:first-child::before{ content:"💧"; }
.station-observations tr:nth-child(3) td:first-child::before{ content:"💦"; }
.station-observations tr:nth-child(4) td:first-child::before{ content:"🌧️"; }
.station-observations tr:nth-child(5) td:first-child::before{ content:"☀️"; }
.station-observations tr:nth-child(6) td:first-child::before{ content:"🔆"; }
.station-observations tr:nth-child(7) td:first-child::before{ content:"🌱"; }
.station-observations tr:nth-child(8) td:first-child::before{ content:"⚡"; }
.station-observations tr:nth-child(9) td:first-child::before{ content:"🍃"; }