/* =============================================================================
   Agent Meeko - list page layout (Leone, 16 Oct). Paired with core/list-layout.js.
   The title on the left of the top bar, search and buttons on the right, no
   record count, status chips under the tiles.
   ============================================================================= */

.list-toolbar .list-toolbar__title,
.website-toolbar__title { margin: 0; white-space: nowrap; }
.list-layout .list-toolbar .filter-field,
.website-toolbar .filter-field { width: 300px; flex: 0 1 300px; }
.list-layout .record-count { display: none; }
.list-toolbar .list-toolbar__actions { display: flex; align-items: center; gap: 10px; margin: 0; }

/* Phones: the title, then the search on a row of its own, then the buttons
   sharing the width evenly. The fixed 300px search above outranks the shared
   phone toolbar rule, so it has to be undone here. */
@media (max-width: 560px) {
    .list-toolbar .list-toolbar__title { flex: 1 1 auto; min-width: 0; white-space: normal; }
    .list-layout .list-toolbar .filter-field,
    .website-toolbar .filter-field { width: auto; flex: 1 1 100%; min-width: 0; }
    .list-toolbar .list-toolbar__actions { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
    .list-toolbar .list-toolbar__actions > :is(.am-btn, .button),
    .list-toolbar > :is(.am-btn, .button) { flex: 1 0 auto; justify-content: center; }
}

.list-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px var(--gutter) 6px; }
.list-chips[hidden] { display: none; }
.page-surface--gutter .list-chips { padding-left: 0; padding-right: 0; }

/* The column gear row under the top bar (no tiles above it) keeps the shared
   content gap; under tiles it stays tight, the tiles already carry the gap. */
.page-surface.list-layout > .table-cols-bar { margin-top: var(--content-gap-top); }
.page-surface.list-layout > :is(.invoice-widgets, .subscription-widgets, .hr-widgets, .summary-counters, :has(> .summary-counters), .invoice-toolbar) ~ .table-cols-bar { margin-top: 2px; }

/* A page's view tabs (Active / Archived ...) shown as chips. */
.record-tabs.list-chips--tabs { margin: 0; border-bottom: 0; overflow: visible; }
/* The shared list-view-tabs rule (components.css) zeroes the vertical
   padding and outranks .list-chips, which left the chips touching the top
   bar on Subscriptions and Organisations. */
.record-tabs.list-view-tabs.list-chips--tabs { padding: 14px var(--gutter) 6px; }
.list-chips--tabs .record-tab {
    height: 30px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--am-radius);
    background: var(--am-blue-soft); color: var(--am-blue-ink); font-size: 12.5px; font-weight: 500;
}
.list-chips--tabs .record-tab:hover { background: var(--am-blue-soft-hover); color: var(--am-blue-ink); }
.list-chips--tabs .record-tab--active,
.list-chips--tabs .record-tab--active:hover { background: var(--am-blue); color: #fff; }

/* Ads use their own tab buttons (with a count); same chip look. */
.list-chips--tabs .ads-tabs { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.list-chips--tabs .ads-tab {
    height: 30px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--am-radius);
    background: var(--am-blue-soft); color: var(--am-blue-ink); font-size: 12.5px; font-weight: 500;
}
.list-chips--tabs .ads-tab:hover { background: var(--am-blue-soft-hover); }
.list-chips--tabs .ads-tab--selected,
.list-chips--tabs .ads-tab--selected:hover { background: var(--am-blue); color: #fff; }
.list-chips--tabs .ads-tab--selected .ads-tab__count { background: rgba(255, 255, 255, .18); color: #fff; }