/* Stranica stanice v2 (templates/vm-station-page-v2.php) — raspored na kompletu vm-stations-ui.css. v2.0 2026-10-14 */

#vm-stp.vm-station-page { max-width: 1320px; margin: 0 auto; padding: 18px 16px 0; }
@media (min-width: 1000px) { #vm-stp.vm-station-page { width: min(calc(100% - 48px), 1320px); padding: 24px 0 0; } }
#vm-stp .vm-stp-products { margin-top: 4px; }

/* Hero */
#vm-stp .vm-stp-hero { gap: 14px; }
#vm-stp .vm-stp-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
#vm-stp .vm-stp-island {
	position: static; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
	background: var(--sx-glass); border: 1px solid var(--sx-glass-line); font-size: .84rem; font-weight: 750; box-shadow: none; transform: none;
}
#vm-stp .vm-stp-island .vm-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }
#vm-stp .vm-stp-island .vm-dot--stale { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .2); }
#vm-stp .vm-station-hero__island-src { padding: 1px 8px; border-radius: 999px; background: rgba(59, 130, 246, .12); font-size: .72rem; --sx-c: var(--sx-accent-ink); }
#vm-stp .vm-stp-island.vm-island--blink { animation: vmStpBlink 1.4s ease; }
@keyframes vmStpBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } 30% { box-shadow: 0 0 0 6px rgba(22, 163, 74, .35); } }
#vm-stp .vm-stp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
#vm-stp .vm-stp-now { display: flex; align-items: center; gap: 16px; padding: 4px 6px 0; }
#vm-stp .vm-stp-now__icon { flex: none; display: inline-flex; width: 84px; height: 84px; }
#vm-stp .vm-stp-now__icon svg, #vm-stp .vm-stp-now__icon img { width: 84px; height: 84px; }
#vm-stp .vm-stp-now__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#vm-stp .vm-stp-temp { font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#vm-stp .vm-stp-cond { font-size: 1.04rem; font-weight: 750; --sx-c: var(--sx-muted); }
#vm-stp .vm-stp-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
#vm-stp .vm-hero-chip {
	display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 16px;
	background: var(--sx-glass); border: 1px solid var(--sx-glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .9rem; box-shadow: none;
}
#vm-stp .vm-hero-chip svg { flex: none; color: var(--sx-accent-ink); }
#vm-stp .vm-hero-chip__label { --sx-c: var(--sx-soft); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
#vm-stp .vm-hero-chip__val { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Instrumenti u kartici (unutar .vm-sx-raw, zadržavaju svoje boje) */
#vm-stp .vm-stp-instruments .vm-instruments { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }

/* Grafici: traka izvora/perioda kao segment */
#vm-stp .vm-stp-chartbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#vm-stp .vm-source-tabs, #vm-stp .vm-period-tabs {
	display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0;
	padding: 4px; border-radius: 16px; background: var(--sx-tint); border: 1px solid var(--sx-line) !important;
}
#vm-stp .vm-source-tabs::-webkit-scrollbar, #vm-stp .vm-period-tabs::-webkit-scrollbar { display: none; }
#vm-stp .vm-source-tab, #vm-stp .vm-period-tab {
	appearance: none; -webkit-appearance: none; flex: none; margin: 0; min-height: 38px; padding: 6px 13px; border: 0 !important; border-radius: 12px !important;
	background: transparent !important; box-shadow: none !important; font: inherit; font-size: .88rem; font-weight: 750; --sx-c: var(--sx-muted); cursor: pointer; text-transform: none; letter-spacing: 0;
}
#vm-stp .vm-source-tab:hover, #vm-stp .vm-period-tab:hover { background: var(--sx-card-solid) !important; --sx-c: var(--sx-ink); }
#vm-stp .vm-source-tab--active, #vm-stp .vm-period-tab--active { background: var(--sx-grad) !important; --sx-c: #ffffff; box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .8) !important; }
#vm-stp .vm-station-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
#vm-stp .vm-stat-card { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--sx-card-solid); border: 1px solid var(--sx-line); box-shadow: none; text-align: left; }
#vm-stp .vm-stat-card__label { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; --sx-c: var(--sx-soft); }
#vm-stp .vm-stat-card__value { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#vm-stp .vm-station-charts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; min-height: 200px; }
#vm-stp .vm-chart-card { margin: 0; padding: 14px 14px 10px; border-radius: 18px; background: var(--sx-card-solid); border: 1px solid var(--sx-line); box-shadow: none; min-width: 0; }
#vm-stp .vm-chart-card__title { margin: 0 0 8px; font-size: .98rem; font-weight: 800; }
#vm-stp .vm-chart-card--wind-rose { grid-column: 1 / -1; max-width: none !important; margin: 0 !important; }
#vm-stp .vm-chart-card--wind-rose .vm-chart-card__canvas-wrap--polar { margin: 0 auto; max-width: 520px; }
#vm-stp .vm-loading { border-radius: 18px; }
[data-theme="dark"] #vm-stp .vm-stat-card, [data-theme="dark"] #vm-stp .vm-chart-card { background: rgba(15, 23, 42, .6); }

/* Tabela (sadržaj iz vm-styles.css, kartica iz kompleta) */
#vm-stp .vm-station-table-wrap.vm-sx-card { padding: 20px 22px 22px; margin: 0; background: var(--sx-card); border: 1px solid var(--sx-card-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); }
#vm-stp .vm-stp-tableraw { border-radius: 16px; overflow: hidden; border: 1px solid var(--sx-line); }

/* O stanici */
#vm-stp .vm-stp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0; }
#vm-stp .vm-stp-facts > div { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--sx-tint); }
#vm-stp .vm-stp-facts dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; --sx-c: var(--sx-soft); }
#vm-stp .vm-stp-facts dd { margin: 2px 0 0; font-weight: 800; }
#vm-stp .vm-stp-forecast .vm-crosslink-box { margin: 0; }

/* Mini-mapa */
#vm-stp .vm-station-minimap { position: relative; z-index: 0; height: 320px; margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--sx-line); background: var(--sx-tint); }

/* Okolne stanice */
#vm-stp .vm-station-related { margin: 0; }
#vm-stp .vm-station-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
#vm-stp a.vm-station-related__card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 16px;
	background: var(--sx-card-solid); border: 1px solid var(--sx-line) !important; --sx-c: var(--sx-ink); transition: transform .18s ease, border-color .18s ease;
}
[data-theme="dark"] #vm-stp a.vm-station-related__card { background: rgba(15, 23, 42, .6); }
#vm-stp a.vm-station-related__card:hover { transform: translateY(-2px); border-color: var(--sx-accent) !important; text-decoration: none !important; }
#vm-stp .vm-station-related__name { font-weight: 800; }
#vm-stp .vm-station-related__alt { font-size: .82rem; --sx-c: var(--sx-soft); }

/* Kišomer u kartici: spoljni okvir daje kartica, sadržaj zadržava svoje stilove */
#vm-stp #vm-section-precip.vm-sx-card { margin: 0; padding: 20px 22px 22px; background: var(--sx-card); border: 1px solid var(--sx-card-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); --spr-bg: var(--sx-card-solid); --spr-border: var(--sx-line); --spr-text: var(--sx-ink); --spr-muted: var(--sx-muted); }

@media (max-width: 900px) {
	#vm-stp .vm-station-charts { grid-template-columns: 1fr; }
	#vm-stp .vm-station-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	#vm-stp.vm-station-page { padding: 12px 12px 0; }
	#vm-stp .vm-stp-now { gap: 12px; }
	#vm-stp .vm-stp-now__icon, #vm-stp .vm-stp-now__icon svg, #vm-stp .vm-stp-now__icon img { width: 64px; height: 64px; }
	#vm-stp .vm-stp-chips { grid-template-columns: 1fr 1fr; }
	#vm-stp .vm-hero-chip { flex-direction: column; align-items: flex-start; gap: 2px; }
	#vm-stp .vm-hero-chip svg { display: none; }
	#vm-stp .vm-hero-chip__val { margin-left: 0; }
	#vm-stp .vm-station-table-wrap.vm-sx-card, #vm-stp #vm-section-precip.vm-sx-card { padding: 16px 14px 18px; border-radius: 20px; }
	#vm-stp .vm-stp-chartbar > * { flex: 1 1 100%; }
	#vm-stp .vm-chart-card { padding: 12px 8px 8px; }
	#vm-stp .vm-station-minimap { height: 260px; }
	#vm-stp .vm-station-related__grid { grid-template-columns: 1fr 1fr; }
}
#vm-stp .vm-station-hero__island-src::before, #vm-stp .vm-station-hero__island-src::after { content: none !important; display: none !important; }