/* Station detections tab: filters and DataTables styled with the design tokens */
.detection-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.25rem 0 .75rem; }

.species-filter { width: 22rem; max-width: 100%; }

.btn-reset { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem; border: 1px solid var(--vw-border); border-radius: var(--vw-radius-sm); background: var(--vw-offline-soft); color: var(--vw-text); }
.btn-reset[hidden] { display: none; }
.btn-reset svg { width: 1.1rem; height: 1.1rem; }
.btn-reset:hover { border-color: var(--vw-primary); color: var(--vw-primary); }

/* Detections table (generic look in css/datatables.css) */
table.dataTable.detections > tbody > tr > td { padding-top: .6rem; padding-bottom: .6rem; }
table.dataTable.detections .species { gap: 1.5rem; }

/* Tiny confidence indicator next to the percentage */
table.dataTable.detections .confidence { display: inline-flex; align-items: center; gap: .5rem; }
table.dataTable.detections .confidence-value { min-width: 2.6rem; font-variant-numeric: tabular-nums; }
table.dataTable.detections .confidence-bar { width: 4rem; height: .5rem; border-radius: 1rem; background: var(--vw-border); overflow: hidden; }
table.dataTable.detections .confidence-bar > span { display: block; height: 100%; background: var(--vw-primary); }

/* Phones: only the text search, full width */
@media (max-width: 575.98px) {
    .detection-filters .period, .detection-filters .confidence-filter { display: none; }
    .species-filter { width: 100%; }
}

/* Narrow screens: the table keeps its width and scrolls horizontally inside its cell */
.dt-layout-cell:has(> table.detections) { overflow-x: auto; }
table.dataTable.detections { min-width: 36rem; }

/* Admin row menu: subtle three-dots button with a small dropdown */
table.dataTable.detections td.row-actions { width: 2.5rem; text-align: right; }
.row-menu { position: relative; display: inline-block; }
.row-menu-toggle { width: 2rem; height: 2rem; border: 0; border-radius: var(--vw-radius-sm); background: none; color: var(--vw-muted); opacity: .6; }
tr:hover .row-menu-toggle, .row-menu-toggle:focus-visible, .row-menu-toggle[aria-expanded="true"] { opacity: 1; }
.row-menu-toggle:hover, .row-menu-toggle[aria-expanded="true"] { background: var(--vw-border); color: var(--vw-text); }
/* Fixed and placed below the button by station-detections.js: the table cell scrolls horizontally and would clip it */
.row-menu-list { position: fixed; z-index: 10; min-width: 10rem; padding: .25rem; border: 1px solid var(--vw-border); border-radius: var(--vw-radius-sm); background: var(--vw-surface); box-shadow: var(--vw-shadow); }
.row-menu-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .75rem; border: 0; border-radius: var(--vw-radius-sm); background: none; color: var(--vw-text); text-align: left; white-space: nowrap; }
.row-menu-item:hover { background: var(--vw-offline-soft); }
.row-menu-item.danger { color: var(--vw-danger); }
.row-menu-item.danger:hover { background: var(--vw-danger-soft); }