/* mod_vivastation – Sjöfartsverket ViVa */
.viva-station {
  --viva-blue: #00508c;
  --viva-card: #1878bd;
  --viva-card-light: #45b9f2;
  --viva-orange: #f0801e;
  --viva-head-bg: #e6f4fb;
  --viva-line: #1e88e5;
  --viva-grid-line: #dcdcdc;
  font-family: inherit;
  color: inherit;
}
.viva-station *, .viva-station *::before, .viva-station *::after { box-sizing: border-box; }

/* Stationsväljare: först område, sedan station */
.viva-station .viva-switch { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; margin-bottom: 1.25rem; max-width: 520px; }
.viva-station .viva-switch-label { font-size: 1.2rem; font-weight: 600; color: #1d2b3a; margin-top: .35rem; }
.viva-station .viva-switch select { width: 100%; min-width: 0; padding: .55rem .7rem; border: 1px solid #b8c7d4; border-radius: 6px; background: #fff; font: inherit; font-size: 1.05rem; }
.viva-station .viva-switch select:disabled { opacity: .6; }
.viva-station .viva-switch-help { margin: .35rem 0 0; font-size: .9rem; color: #444; }
.viva-station .viva-status { font-size: .85rem; opacity: .75; }

/* Stationsblock */
.viva-station .viva-block + .viva-block { margin-top: 1.75rem; }
.viva-station .viva-head { background: var(--viva-head-bg); border-radius: 6px; padding: .75rem 1rem; margin-bottom: .75rem; }
.viva-station .viva-name { margin: 0; font-size: 1.25rem; color: var(--viva-blue); }
.viva-station .viva-pos { font-size: .85rem; margin-top: .15rem; }
.viva-station .viva-error { background: #fdecea; color: #8a1f11; border-radius: 6px; padding: .75rem 1rem; }
.viva-station .viva-source { font-size: .75rem; margin-top: .5rem; }

/* Kort */
.viva-station .viva-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.viva-station .viva-card { background: var(--viva-card); color: #fff; border-radius: 6px; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.viva-station .viva-label { font-size: 1rem; font-weight: 500; }
.viva-station .viva-value { font-size: 2rem; line-height: 1.1; display: flex; align-items: center; gap: .5rem; }
.viva-station .viva-arrow { width: 1.6rem; height: 1.6rem; flex: none; }
.viva-station .viva-meta { display: flex; justify-content: space-between; font-size: .8rem; margin-top: auto; }
.viva-station .viva-info { display: inline-block; width: 1em; height: 1em; border: 1px solid currentColor; border-radius: 50%; font-size: .7rem; line-height: .95em; text-align: center; font-style: normal; cursor: help; margin-left: .2rem; }
.viva-station .viva-warn { font-size: .75rem; background: rgba(0,0,0,.2); border-radius: 3px; padding: .1rem .3rem; }
.viva-station .viva-spark { background: rgba(255,255,255,.12); border-radius: 4px; padding: .25rem .35rem; }
.viva-station .viva-spark svg { display: block; width: 100%; height: 64px; }
.viva-station .viva-axis { display: flex; justify-content: space-between; font-size: .68rem; opacity: .9; }

/* Vattenståndskort i ViVa-stil */
.viva-station .viva-lv { display: grid; grid-template-columns: 34% 1fr; grid-template-rows: auto auto auto; align-items: center; column-gap: .5rem; padding: .25rem 0 .5rem; }
.viva-station .viva-lv .lv-arrow { width: 70%; max-width: 70px; justify-self: center; display: block; }
.viva-station .viva-lv .lv-wave { grid-column: 1 / -1; width: 100%; height: 1.1rem; display: block; margin: .35rem 0; }
.viva-station .viva-level { container-type: inline-size; }
.viva-station .viva-lv .viva-value { font-size: 2.4rem; font-size: clamp(1.3rem, 12.5cqi, 2.4rem); white-space: nowrap; }
.viva-station .viva-lv .viva-label { overflow-wrap: anywhere; }
.viva-station .viva-lv > * { min-width: 0; }

/* Stor graf */
.viva-station .viva-bigs { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.viva-station .viva-big { margin: 0; background: #fff; border: 1px solid #e3e3e3; border-top: 3px solid var(--viva-blue); border-radius: 4px; padding: .5rem .5rem .35rem; cursor: zoom-in; position: relative; }
.viva-station .viva-big:focus-visible { outline: 3px solid var(--viva-card-light); outline-offset: 2px; }
.viva-station .viva-big svg { display: block; width: 100%; }
.viva-station .viva-big svg text { font-family: inherit; fill: #333; }
.viva-station .viva-legend { display: flex; justify-content: center; align-items: center; gap: .4rem; font-size: .9rem; color: #333; }
.viva-station .viva-legend::before { content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--viva-line); }
.viva-station .viva-hint { position: absolute; bottom: .4rem; right: .6rem; font-size: .75rem; color: #666; background: rgba(255,255,255,.85); padding: 0 .3rem; border-radius: 3px; }
.viva-station .viva-placeholder { visibility: hidden; }

.viva-station .viva-big.is-expanded {
  position: fixed; z-index: 10001; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 100vw; max-height: 100vh; overflow: auto; border-radius: 0; cursor: zoom-out;
  box-shadow: 0 8px 40px rgba(0,0,0,.35); padding: 1rem 1rem .75rem;
}
.viva-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.55); cursor: zoom-out; }
html.viva-noscroll, html.viva-noscroll body { overflow: hidden; }

/* Kompasskort för ström */
.viva-station .viva-compass-card { align-items: stretch; }
.viva-station .viva-compass { display: block; width: 100%; max-width: 172px; margin: 0 auto; overflow: visible; }
.viva-station .viva-compass text { font-family: inherit; }
.viva-station .viva-stream-icon { width: 2.4rem; height: 1.8rem; display: block; }
.viva-station .viva-compass-card .viva-meta { align-items: flex-end; }

/* Små grafer går att förstora */
.viva-station .viva-spark { cursor: zoom-in; }
.viva-station .viva-spark:hover { background: rgba(255,255,255,.2); }
.viva-station .viva-spark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Vattentemperatur m.m. allra längst ner */
.viva-station .viva-last { margin-top: .75rem; }

/* Klickbara kort (vind/ström) och legend med flera serier */
.viva-station .viva-clickable { cursor: zoom-in; }
.viva-station .viva-card.viva-clickable:hover { filter: brightness(1.06); }
.viva-station .viva-card.viva-clickable:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.viva-station .viva-legend { gap: 1rem; flex-wrap: wrap; }
.viva-station .viva-legend:has(.viva-legend-item)::before { content: none; }
.viva-station .viva-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.viva-station .viva-legend-item::before { content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--c, var(--viva-line)); }

/* Karta + listor: bredvid varandra när det får plats (som SMHI-modulen), annars under varandra */
.viva-station { container-type: inline-size; }
.viva-station .viva-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.viva-station .viva-picker .viva-switch { margin-bottom: 0; max-width: none; }
@container (min-width: 640px) {
  .viva-station .viva-picker.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}
.viva-station .viva-picker:not(.has-map) .viva-switch { max-width: 520px; }
.viva-station .viva-mapwrap { border-radius: 6px; overflow: hidden; border: 1px solid #c9d8e4; border-top: 3px solid var(--viva-blue); background: var(--viva-head-bg); position: relative; }
.viva-station .viva-map { width: 100%; aspect-ratio: 520 / 448; min-height: 260px; background: var(--viva-head-bg); z-index: 0; font: inherit; }
.viva-station .viva-map .leaflet-tile-pane { filter: grayscale(1) sepia(.25) hue-rotate(165deg) saturate(1.6) brightness(1.08) contrast(.82); }
.viva-station .viva-map .leaflet-control-attribution { font-size: .7rem; background: rgba(255,255,255,.8); }
.viva-station .viva-map .leaflet-control-attribution a,
.viva-station .viva-map .leaflet-control-zoom a { color: var(--viva-blue); }
.viva-station .viva-map .leaflet-control-zoom { border: 1px solid #c9d8e4; box-shadow: none; }
.viva-station .viva-map .leaflet-interactive:focus { outline: none; }
.viva-map-tip { font: inherit; font-size: .85rem; }
.viva-station .viva-map-bar { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .5rem; background: #fff; border-top: 1px solid #c9d8e4; }
.viva-station .viva-map-btn { font: inherit; font-size: .85rem; padding: .25rem .6rem; border: 1px solid #b8c7d4; border-radius: 4px; background: #fff; color: var(--viva-blue); cursor: pointer; }
.viva-station .viva-map-btn:hover { background: var(--viva-head-bg); }
.viva-station .viva-mapwrap.is-expanded { position: fixed; z-index: 10001; inset: 2vh 2vw; border-radius: 6px; display: flex; flex-direction: column; }
.viva-station .viva-mapwrap.is-expanded .viva-map { aspect-ratio: auto; flex: 1; height: auto; }

/* Eget förval: kryssruta under listorna */
.viva-station .viva-mydefault { display: flex; align-items: flex-start; gap: .55rem; margin-top: .6rem; }
.viva-station .viva-mydefault input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--viva-orange); flex: none; cursor: pointer; }
.viva-station .viva-mydefault input:disabled { cursor: default; }
.viva-station .viva-mydefault label { display: flex; flex-direction: column; cursor: pointer; }
.viva-station .viva-mydefault small { font-size: .8rem; color: #555; }
.viva-station .viva-switch-help { margin: 0 0 .25rem; }