/* Station pages: shared header (breadcrumb, title, tabs) and the overview tab */
.breadcrumb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: -.25rem 0 .6rem; padding: 0 .25rem; font-size: .95rem; }
.breadcrumb-bar a { text-decoration: none; }
.station-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.station-photo { flex: none; width: 6.5rem; height: 6.5rem; }
.station-photo img { display: block; width: 100%; height: 100%; border-radius: 22%; }
.station-intro .page-intro { flex: 1 1 18rem; min-width: 0; }
@media (max-width: 575.98px) { .station-photo { width: 4.5rem; height: 4.5rem; } }
.station-intro h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.station-intro h1 .badge { font-size: .85rem; padding: .25rem .8rem; }
.station-intro .page-intro p { margin-bottom: .35rem; }
.facts { list-style: none; padding: 0; margin: 0; color: var(--vw-muted); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .95rem; }
.facts li { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.facts li > i { font-size: 1.2rem; color: var(--vw-offline); }

/* Header actions: the kiosk screen as the prominent call to action, manage as a quiet secondary button */
.station-actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: .5rem; flex: none; }
.station-kiosk, .station-manage { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; }
.station-kiosk { font-weight: 600; box-shadow: 0 3px 10px rgb(94 74 138 / .25); }
.station-kiosk i { margin-right: 0; }
.station-kiosk .station-kiosk-external { font-size: .75em; opacity: .75; }

/* Panels with icon + title */
.panel-header { display: flex; align-items: center; gap: .75rem; }
.panel-icon { width: 1.6rem; height: 1.6rem; color: var(--vw-primary); flex: none; }
.panel-icon-tile { background: var(--vw-primary-soft); border-radius: var(--vw-radius-sm); padding: .4rem; }
.panel-title { flex: 0 1 auto; min-width: 0; font-size: 1.15rem; font-weight: 700; margin: 0; }

.period { position: relative; }
.period svg { position: absolute; left: .9rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); color: var(--vw-text); pointer-events: none; }
.period .form-select { padding-left: 2.8rem; border-radius: var(--vw-radius-sm); }

/* Detections */
.detections { width: 100%; margin-top: 1.25rem; }
.detections th { font-weight: 600; padding-bottom: .6rem; border-bottom: 1px solid var(--vw-border); }
.detections td { vertical-align: middle; border-bottom: 1px solid var(--vw-border); padding-top: .55rem; padding-bottom: .55rem; }
.detections .time { color: var(--vw-muted); white-space: nowrap; }
.species { display: flex; align-items: center; gap: 1.25rem; }
.species-thumb { flex: none; width: 3.3rem; height: 3.3rem; border-radius: 6px; background: var(--vw-paper); border: 1px solid var(--vw-border); overflow: hidden; color: #c9c2b2; display: grid; place-items: center; }
.species-thumb svg { width: 1.8rem; height: 1.8rem; }

/* Today */
.mini-stat { display: flex; gap: .75rem; height: 100%; padding: .9rem; border: 1px solid var(--vw-border); border-radius: var(--vw-radius-sm); }
.mini-icon { flex: none; width: 2.2rem; height: 2.2rem; padding: .35rem; border-radius: var(--vw-radius-sm); background: var(--vw-primary-soft); color: var(--vw-primary); }
.mini-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.mini-label { color: var(--vw-muted); }
.mini-note { color: var(--vw-muted); font-size: .85rem; }

.top-species { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .8rem; }
.top-species li { display: grid; grid-template-columns: 2rem 2.4rem 6rem 1fr 2.5rem; align-items: center; gap: 1rem; }
.rank { width: 2rem; height: 2rem; border-radius: 50%; background: var(--vw-offline-soft); display: grid; place-items: center; font-size: .95rem; }
.top-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 1.4rem; border-radius: 4px; background: var(--vw-offline-soft); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--vw-accent); }
.top-count { text-align: right; }
.mini-icon-plain { background: none; }
.species-thumb-sm { width: 2.4rem; height: 2.4rem; }
.species-thumb-sm svg { width: 1.3rem; height: 1.3rem; }

/* Tabs */
.station-tabs { display: flex; gap: .25rem; margin-bottom: 1.5rem; padding: .4rem; overflow-x: auto; scrollbar-width: none; background: var(--vw-surface); border-radius: var(--vw-radius); box-shadow: var(--vw-shadow); }
.station-tab { position: relative; display: inline-flex; align-items: center; gap: .55rem; flex: none; padding: .6rem 1rem; border-radius: var(--vw-radius-sm); color: var(--vw-muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s; }
.station-tab i { font-size: 1rem; }
.station-tab:hover { color: var(--vw-text); }
.station-tab.active { color: var(--vw-primary); font-weight: 600; }
.station-tab.active::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -.4rem; height: 3px; border-radius: 3px 3px 0 0; background: var(--vw-primary); }
.station-tab:focus-visible { outline: 2px solid var(--vw-primary); outline-offset: -2px; border-radius: var(--vw-radius-sm); }

/* Filter bars (detections and birds tabs) */
.confidence-filter { display: flex; align-items: center; gap: 1rem; margin: 0; }
.confidence-filter .form-select { width: 9rem; border-radius: var(--vw-radius-sm); }
.text-search { position: relative; }
.text-search svg { position: absolute; left: .9rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); color: var(--vw-muted); pointer-events: none; }
.text-search .form-control { padding-left: 2.6rem; border-radius: var(--vw-radius-sm); }

/* Font Awesome icons */
i.panel-icon { width: auto; height: auto; font-size: 1.35rem; }
i.mini-icon { display: grid; place-items: center; font-size: 1.25rem; }
.species-thumb i { font-size: 1.5rem; }
.species-thumb-sm i { font-size: 1.1rem; }

/* Compact header on phones: smaller photo and title, no tagline or optional facts, icon-only manage button */
@media (max-width: 575.98px) {
    .panel-header p { display: none; } /* subtitle under panel titles */
    .station-intro { align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; }
    .station-photo { width: 3.5rem; height: 3.5rem; }
    .station-intro .page-intro h1 { font-size: 1.5rem; gap: .5rem; overflow-wrap: anywhere; }
    .station-intro h1 .badge { font-size: .75rem; padding: .2rem .6rem; }
    .station-tagline, .facts .fact-optional, .station-manage-label { display: none; }
    .facts li { white-space: normal; }
    .station-intro .page-intro { flex-basis: 0; }
    .station-actions { width: 100%; justify-content: flex-start; }
    .station-kiosk { flex: 1 1 auto; justify-content: center; }
    .station-manage { padding: .55rem .8rem; }
}
.species-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; mix-blend-mode: multiply; }