/* Homepage: stats, station list and map */
.panel.stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 1rem 0; }
.stat { display: flex; gap: 1rem; align-items: center; padding: .25rem 1.5rem; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--vw-border); }
.stat-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--vw-primary-soft); color: var(--vw-primary); display: grid; place-items: center; }
.stat-icon svg { width: 1.4rem; height: 1.4rem; }
.stat-icon-plain { background: none; color: var(--vw-offline); }
.stat-icon-dot { background: none; }
.stat-icon-dot::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--vw-online); }
.stat-label { font-size: 1rem; }
.stat-label strong { font-size: 1.15rem; font-weight: 800; }
.stat-note { color: var(--vw-muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) { .panel.stats { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; } .stat:nth-child(3) { border-left: 0; } }
@media (max-width: 575.98px) { .panel.stats { display: none; } } /* phones: straight to the station list */
.stat-icon i { font-size: 1.25rem; }

/* Stations: list and map side by side in one panel (stacked on small screens) */
.panel.stations-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 0; overflow: hidden; min-height: 34rem; }
.stations-side { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.stations-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.search { position: relative; flex: 1; min-width: 12rem; }
.search i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--vw-muted); }
.search .form-control { padding: .6rem .9rem .6rem 2.6rem; border-radius: var(--vw-radius-sm); }


.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: .4rem 1rem; background: var(--vw-offline-soft); color: var(--vw-text); font-weight: 500; }
.filter:hover { background: var(--vw-primary-soft); }
.filter.active { background: var(--vw-primary); color: #fff; }
.sort { width: auto; margin-left: auto; border-radius: var(--vw-radius-sm); }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .45rem; }
.dot-online { background: var(--vw-online); }
.dot-offline { background: var(--vw-offline); }

.station-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.station-item { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1rem; border: 1px solid var(--vw-border); border-radius: var(--vw-radius-sm); cursor: pointer; }
.station-item:hover { border-color: var(--vw-primary-soft); background: var(--vw-bg); }
.station-item.selected { background: var(--vw-primary-soft); border-color: var(--vw-primary-tint); }
.station-thumb { flex: none; width: 6rem; height: 6rem; }
.station-thumb img { display: block; width: 100%; height: 100%; border-radius: 22%; }
.station-main { flex: 1; min-width: 0; line-height: 1.6; }
.station-name { font-weight: 700; font-size: 1.1rem; }
.station-fact { color: var(--vw-text); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-fact i { width: 1rem; margin-right: .5rem; color: var(--vw-muted); text-align: center; }
.station-fact .sep { color: var(--vw-muted); margin: 0 .25rem; }
.station-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .2rem; }
.station-badge { flex: none; font-size: .8rem; padding: .2rem .7rem; }
.station-status { display: none; }
.station-actions-row { display: flex; align-items: center; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--vw-border); }
.station-action { display: inline-flex; align-items: center; gap: .5rem; padding: .15rem 0; border: 0; background: none; color: var(--vw-primary); font-weight: 500; text-decoration: none; }
.station-action:hover { color: var(--vw-primary-hover); text-decoration: underline; }
.station-locate { padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid var(--vw-border); }
.station-link { display: none; color: var(--vw-text); text-decoration: none; padding: .5rem; }
.station-link:hover { color: var(--vw-primary); }

.stations-map { position: relative; min-height: 34rem; border-left: 1px solid var(--vw-border); }
.station-map { position: absolute; inset: 0; }
.map-legend { position: absolute; right: 1rem; bottom: 2rem; z-index: 500; background: var(--vw-surface); border-radius: var(--vw-radius-sm); box-shadow: var(--vw-shadow); padding: .6rem .9rem; font-size: .9rem; line-height: 1.8; }
.dot-selected { background: var(--vw-primary); }

@media (max-width: 991.98px) {
    .panel.stations-panel { grid-template-columns: 1fr; }
    .stations-map { border-left: 0; border-top: 1px solid var(--vw-border); }
}

/* Map popup: station card */
.leaflet-popup-content-wrapper { border-radius: var(--vw-radius); box-shadow: var(--vw-shadow); }
.leaflet-popup-content { margin: 1rem 1.25rem; min-width: 15rem; font-size: .95rem; line-height: 1.6; }
.popup-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .75rem; padding-right: 1rem; }
.popup-head .station-thumb { width: 3rem; height: 3rem; }
.popup-name { font-weight: 700; font-size: 1.05rem; }
.popup-fact i { width: 1rem; margin-right: .6rem; color: var(--vw-muted); text-align: center; }
.popup-button { display: block; margin-top: .9rem; padding: .55rem 1rem; border-radius: var(--vw-radius-sm); background: var(--vw-primary); color: #fff !important; text-align: center; font-weight: 500; text-decoration: none; }
.popup-button:hover { background: var(--vw-primary-hover); }
.leaflet-container a.leaflet-popup-close-button { top: .6rem; right: .6rem; font-size: 1.4rem; color: var(--vw-muted); }

/* Phones: compact status filters on one line, no sorting, cards with a smaller photo and wrapping facts */
@media (max-width: 575.98px) {
    .stations-side { gap: .75rem; }
    .filters { flex-wrap: nowrap; gap: .35rem; }
    .filter { padding: .3rem .7rem; font-size: .875rem; white-space: nowrap; }
    .dot { width: .55rem; height: .55rem; margin-right: .35rem; }
    .sort { display: none; }
    .panel.stations-panel { min-height: 0; }
    .stations-map { display: none; }
    .station-item { align-items: flex-start; gap: .85rem; padding: .75rem; }
    .station-thumb { width: 3.25rem; height: 3.25rem; }
    .station-main { line-height: 1.45; }
    .station-name { font-size: 1rem; overflow-wrap: anywhere; }
    .station-main .status { font-size: .875rem; margin-bottom: .2rem; }
    .station-fact { font-size: .875rem; white-space: normal; padding-left: 1.5rem; text-indent: -1.5rem; } /* hanging indent under the icon */
    .station-fact i { text-indent: 0; } /* inline-block icons inherit the indent */
    .station-link { display: block; align-self: center; padding: .25rem; }
    .station-badge, .station-actions-row { display: none; }
    .station-status { display: inline-flex; }
    .station-head { margin-bottom: 0; }
}