/*
 * addresses.css: the styles that the Pages tab shares with the old list of addresses: the filter bar (the select, the status chips), the popup of the bots and the counter and the actions under the filters. The list of addresses of the Freshness tab is gone, so its rows, its header, its dots, its groups and its details are gone from this file too.
 * Loaded by: assets/css/makieta.css (one file for the mockup); the colours are the tokens of the section tokens.css and their old names: --ink, --ink-2, --ink-3, --line, --band, --surface, --page. Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * @comments-complete 2026-11-07
 */

/* Filter bar */

.addr-select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); color: var(--ink); font: inherit; }

.addr-select { background: var(--surface); }
.addr-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Status chips: unpressed is a plain outline (with nothing pressed every status is shown, so none may look switched off), pressed is filled. */
#addr-statuses .chip, #addr-statuses .chip[aria-pressed="false"] { color: var(--ink); border-style: solid; }
#addr-statuses .chip[aria-pressed="false"] .nm { text-decoration: none; }
#addr-statuses .chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }

/* Popup of the bots: hangs under its button, the list scrolls inside a maximum height. */
.addr-bots { position: relative; }
.addr-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; width: min(340px, calc(100vw - 32px)); padding: 8px; background: var(--surface); border: 1px solid var(--ink-3); border-radius: 10px; box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 25%, transparent); }
.addr-pop-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.addr-pop-actions .mini + .mini { margin-left: 0; }
.addr-pop-actions .mini[aria-pressed="true"] { border-color: var(--ink); background: var(--band); font-weight: 600; }
.addr-bots-list { margin-top: 8px; max-height: min(50vh, 320px); overflow-y: auto; }
.addr-bot { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.addr-bot:hover { background: var(--band); }
.addr-bot input { flex: none; width: 16px; height: 16px; margin: 0; }
.addr-bot .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.addr-bot .vd { flex: none; color: var(--ink-2); font-size: 0.82rem; }

/* Counter and active filters */
.addr-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; }
.addr-count { font-weight: 600; }

.addr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.addr-actions .mini + .mini { margin-left: 0; }
.addr-actions .mini:disabled { color: var(--ink-3); cursor: default; }
.addr-action-status { color: var(--ink-2); font-size: 0.86rem; }
.addr-empty { margin-top: 12px; color: var(--ink-2); }

/* A phone: the bots control takes the whole row and its popup spans the width. */
@media (max-width: 639px) {
  .addr-bots-ctl { flex: 1 1 100%; }
  .addr-pop { left: 0; right: 0; width: auto; }
}