/* ---------- Admin console (#/review: js/admin-shell.js, admin-queue-view.js, admin-tabs.js, contacts-admin.js) ----------
   Opt-in layout, prefix ad-. The shared .suggest-screen is not used here, so the other pages that share it stay unchanged.
   Layout follows the width the page really has (container queries on .ad-wrap), not the window: the app sidebar takes 284 px from
   860 px and the ad rails take more when they are on. Only the phone "Area" select follows the window, because it stands in for the
   sidebar group. The 760 px split threshold is ADMIN_SPLIT_MIN in js/admin-shell.js: keep the two in step. */

.ad-wrap { container-type: inline-size; container-name: ad; }
.ad-screen { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 14px; max-width: 1240px; margin: 0 auto; }
.ad-head { display: flex; flex-direction: column; gap: 10px; }
.ad-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.ad-title:focus, .ad-item-title:focus { outline: none; }
.ad-h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.ad-muted { color: var(--text-muted); }
.ad-empty { margin: 0; padding: 20px 16px; font-size: 15px; color: var(--text-muted); }
.ad-note { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--success-bg); color: var(--success-text); font-size: 14px; }

/* The phone "Area" select; from 860 px the sidebar group does this job. */
.ad-area-select { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); }
.ad-area-select select { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
@media (min-width: 860px) { .ad-area-select { display: none; } }

/* Sidebar group counts (js/admin-shell.js sidebarAdminGroupHtml) */
.sidebar-nav-link .ad-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.sidebar-nav-link.active .ad-count { color: var(--brand-text); }

/* ---------- Filters ---------- */
.ad-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ad-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ad-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 0; font-size: 13px; color: var(--text-muted); }
.ad-field select { width: 100%; min-width: 0; min-height: 44px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.ad-flag { flex: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.ad-flag[aria-pressed="true"] { border-color: var(--brand-text); background: var(--brand-tint); color: var(--brand-text); }
.ad-search { flex: 1 1 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.ad-filters-one .ad-field { flex: 0 1 260px; }
.ad-how, .ad-unverified { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0 12px; }
.ad-how > summary, .ad-unverified > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; color: var(--text-muted); }
.ad-unverified > summary { font-weight: 600; color: var(--text); }
.ad-how[open], .ad-unverified[open] { padding-bottom: 8px; }

/* ---------- List and detail ---------- */
.ad-split { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ad-list-pane, .ad-detail { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ad-list { display: flex; flex-direction: column; }
.ad-row {
  display: flex; flex-direction: column; gap: 3px; width: 100%; min-height: 72px; box-sizing: border-box; padding: 10px 14px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer;
}
.ad-row:last-child { border-bottom: none; }
.ad-row:hover { background: var(--surface-2); }
.ad-row[aria-current="true"] { background: var(--brand-tint); }
.ad-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-muted); }
.ad-row-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-row-age { flex: none; }
.ad-row-title, .ad-row-line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-row-title { font-size: 15px; font-weight: 600; }
.ad-row-line { font-size: 14px; color: var(--text-muted); }
.ad-flagged { color: var(--danger-text); }
.ad-detail { padding: 16px; }

/* The selected item */
.ad-item { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ad-back { order: -3; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
.ad-item-head { order: -2; display: flex; flex-direction: column; gap: 4px; }
.ad-meta { margin: 0; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.ad-item-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ad-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--brand-text); }
.ad-summary { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.ad-summary > strong:first-child { display: none; } /* the heading above already says it */
.ad-summary .card-desc { font-size: 15px; }
.ad-effects { display: flex; flex-direction: column; gap: 6px; }
.ad-effect { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.ad-effect strong { color: var(--text); font-weight: 600; }
.ad-action-block { order: -1; display: flex; flex-direction: column; gap: 10px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ad-btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.ad-btn-danger { color: var(--danger-text); border-color: var(--danger-text); }
.ad-actions .ad-btn:first-child:nth-last-child(n+2) { flex: 1 1 auto; }
.ad-reject { color: var(--danger-text); }
.ad-tech { border-top: 1px solid var(--border); padding-top: 4px; font-size: 14px; color: var(--text-muted); }
.ad-tech > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.ad-tech details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--brand-text); }
.ad-foot { min-width: 0; }

/* One column (phone): the list, or the item as its own screen with the actions under the heading */
@container ad (max-width: 759px) {
  .ad-wrap[data-view="list"] .ad-detail { display: none; }
  .ad-wrap[data-view="item"] .ad-controls,
  .ad-wrap[data-view="item"] .ad-list-pane,
  .ad-wrap[data-view="item"] .ad-foot,
  .ad-wrap[data-view="item"] .ad-area-select { display: none; }
  .ad-wrap[data-view="item"] .ad-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* kept for the page title and the announcer */
  .ad-wrap[data-view="item"] .ad-detail { border: none; background: none; padding: 0; }
  .ad-wrap[data-view="item"] .ad-item-title { font-size: 22px; }
  .ad-actions .ad-btn:first-child { flex: 1 1 40%; }
}

/* Two panes (wide): a compact list on the left, the item on the right, each scrolling on its own */
@container ad (min-width: 760px) {
  .ad-split { display: grid; grid-template-columns: minmax(280px, 370px) minmax(0, 1fr); gap: 16px; align-items: stretch; height: calc(100dvh - var(--topbar-h, 96px) - 260px); min-height: 440px; }
  .ad-list-pane, .ad-detail { overflow-y: auto; min-height: 0; scrollbar-color: var(--border) transparent; }
  .ad-detail { padding: 20px 22px; }
  .ad-back { display: none; }
  .ad-item-head, .ad-action-block { order: 0; }
  .ad-filters { flex-wrap: nowrap; }
  .ad-search { flex: 2 1 0; }
  .ad-field { flex: 0 1 180px; }
  .ad-filters-one .ad-field { flex: 0 1 260px; }
}

/* ---------- Activity: a table when wide, cards on phones ---------- */
.ad-table-wrap { min-width: 0; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ad-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ad-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
@container ad (max-width: 719px) {
  .ad-table, .ad-table tbody, .ad-table tr, .ad-table td { display: block; }
  .ad-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ad-tr { margin-bottom: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .ad-table td { padding: 2px 0; border: none; }
  .ad-table td:empty { display: none; }
  .ad-table td::before { content: attr(data-label) ": "; color: var(--text-muted); }
}

/* ---------- Rewards catalog: catalog left, Add form right when wide ---------- */
.ad-rewards { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ad-rw-catalog, .ad-rw-add { min-width: 0; }
@container ad (min-width: 760px) {
  .ad-rewards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 24px; align-items: start; }
}

/* ---------- Contacts: lookup on the left, what is stored on the right when wide ---------- */
.ad-contacts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ad-ct-lookup, .ad-ct-result { min-width: 0; }
@container ad (min-width: 760px) {
  .ad-contacts { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
}

/* ---------- Users (js/admin-users.js) ---------- */
.ad-users td:first-child { overflow-wrap: break-word; word-break: normal; }
@media (min-width: 700px) { .ad-users td:first-child { min-width: 200px; } }
.ad-users [data-remove-user] { white-space: nowrap; }
.ad-users td[data-label="Remove"]::before { content: none; }