/* ==========================================================================
   Agreements list — queues, toolbar, table / card rows, bulk bar, trash
   ========================================================================== */

.ag { display: flex; flex-direction: column; }

/* --------------------------------------------------------------- queues -- */
.ag-tabs { margin: 0 0 var(--s-7); }

/* -------------------------------------------------------- saved searches -- */
.ag-saved {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-4); margin-bottom: var(--s-6);
}
.ag-saved__label {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-11); font-weight: 620; color: var(--tx-4);
  text-transform: uppercase; letter-spacing: .06em;
}
.ag-saved__label svg { color: var(--tx-4); }
.ag-saved__chip { padding-left: var(--s-2); }
.ag-saved__apply {
  height: 24px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  font-size: var(--fs-12); color: var(--tx-2); font-weight: 520;
  transition: color var(--dur-1) var(--ease);
}
.ag-saved__apply:hover { color: var(--tx-accent); }

/* -------------------------------------------------------------- toolbar -- */
.ag-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-5); margin-bottom: var(--s-6);
}
.ag-toolbar .searchbox { max-width: 100%; }
.ag-toolbar .searchbox__clear[hidden] { display: none; }
.ag-toolbar .btn.is-on {
  border-color: var(--a-300); background: var(--bg-selected); color: var(--tx-accent);
}
.ag-toolbar .btn .badge { margin-left: 2px; }

.ag-chips {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-4); margin: calc(var(--s-3) * -1) 0 var(--s-7);
}

/* ------------------------------------------------------- filter popover -- */
.ag-filter { width: 320px; max-width: calc(100vw - 24px); }
.ag-filter__head {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-6) var(--s-7); border-bottom: 1px solid var(--br-1);
}
.ag-filter__body {
  display: flex; flex-direction: column; gap: var(--s-7);
  padding: var(--s-7); max-height: min(58vh, 460px); overflow-y: auto;
}
.ag-filter__statuses {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.ag-filter__check .check__text { font-size: var(--fs-12); }

/* ---------------------------------------------------------------- table -- */
.ag-tablewrap { overflow: hidden; }
.ag-skelhead { padding: var(--s-6) var(--s-7); border-bottom: 1px solid var(--br-1); background: var(--bg-sunken); }

.ag-table { table-layout: fixed; }
.ag-table td, .ag-table th { overflow: hidden; }
.ag-table tbody tr:last-child td { border-bottom: 0; }
.ag-table tbody tr:focus-visible { outline: 2px solid var(--a-500); outline-offset: -2px; }
.ag-table th.cell-tight, .ag-table td.cell-tight { width: 42px; }
.ag-table .ag-td-recips, .ag-table thead th:nth-child(3) { width: 186px; }
.ag-table .ag-td-status, .ag-table thead th:nth-child(4) { width: 168px; }
.ag-table .ag-td-status > .row { flex-wrap: wrap; row-gap: 3px; }
.ag-table .ag-td-prog, .ag-table thead th:nth-child(5) { width: 126px; }
.ag-table .ag-td-prog .prog { height: 6px; }
.ag-table .ag-td-when, .ag-table thead th:nth-child(6) { width: 96px; white-space: nowrap; color: var(--tx-2); }
.ag-table .ag-row__menu { opacity: .55; transition: opacity var(--dur-2) var(--ease); }
.ag-table tbody tr:hover .ag-row__menu,
.ag-table tbody tr:focus-within .ag-row__menu { opacity: 1; }

.ag-body[data-density="compact"] .ag-table td { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.ag-body[data-density="compact"] .ag-name__sub { display: none; }
.ag-body[data-density="compact"] .ag-name__ic { width: 24px; height: 24px; }

/* name cell */
.ag-name { display: flex; align-items: center; gap: var(--s-6); min-width: 0; }
.ag-name__ic {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-8);
  display: grid; place-content: center;
  background: var(--bg-sunken); color: var(--tx-3);
  border: 1px solid var(--br-1);
}
.ag-name__ic.is-ok { background: var(--ok-50); color: var(--ok-500); border-color: var(--ok-100); }
.ag-name__t { font-weight: 570; font-size: var(--fs-13); color: var(--tx-1); }
.ag-table .ag-name__t {
  white-space: normal; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ag-body[data-density="compact"] .ag-table .ag-name__t { -webkit-line-clamp: 1; }
.ag-name__sub {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-11); color: var(--tx-3);
}
.ag-name__tags { display: inline-flex; gap: var(--s-3); }

/* ---------------------------------------------------------------- cards -- */
.ag-cards {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ag-card {
  display: flex; flex-direction: column; gap: var(--s-6);
  padding: var(--s-7); cursor: pointer;
}
.ag-card:focus-visible { outline: 2px solid var(--a-500); outline-offset: 1px; }
.ag-card.is-selected { border-color: var(--a-300); background: var(--bg-selected); }
.ag-card__top { display: flex; align-items: flex-start; gap: var(--s-5); }
.ag-card__title {
  font-size: var(--fs-14); font-weight: 590; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ag-card__pills { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ag-card__recips { min-height: 22px; }
.ag-card__foot {
  display: flex; align-items: flex-end; gap: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--br-1);
}

/* -------------------------------------------------------- empty / pager -- */
.ag-empty { padding: var(--s-8) 0; }
.ag-pager {
  display: flex; align-items: center; gap: var(--s-8);
  flex-wrap: wrap; margin-top: var(--s-7);
}
.ag-pager__size { display: inline-flex; align-items: center; gap: var(--s-4); }
.ag-pager__size .select { width: 72px; }
.ag-pager .pager { flex: 1 1 auto; justify-content: flex-end; }

/* ------------------------------------------------------------- bulk bar -- */
.ag-bulk {
  position: fixed; left: 50%; bottom: var(--s-9);
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-7);
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-8);
  background: var(--bg-inverse); color: var(--tx-inverse);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xl);
  transform: translate(-50%, 130%);
  opacity: 0;
  transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  max-width: calc(100vw - var(--s-10));
}
.ag-bulk.is-in { transform: translate(-50%, 0); opacity: 1; }
.ag-bulk__count { font-size: var(--fs-13); white-space: nowrap; }
.ag-bulk__count strong { font-size: var(--fs-15); margin-right: 3px; }
.ag-bulk__actions { display: flex; align-items: center; gap: var(--s-4); overflow-x: auto; scrollbar-width: none; }
.ag-bulk__actions::-webkit-scrollbar { display: none; }
.ag-bulk .btn--secondary,
.ag-bulk .btn--danger-outline {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .2);
  color: var(--tx-inverse);
  box-shadow: none;
}
.ag-bulk .btn--secondary:hover:not(:disabled),
.ag-bulk .btn--danger-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .34);
}
.ag-bulk .btn--danger-outline { color: #ffbdbd; }
.ag-bulk .btn--ghost { color: var(--tx-inverse); opacity: .75; }
.ag-bulk .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: var(--tx-inverse); opacity: 1; }
.ag-bulk .btn:disabled { opacity: .35; }
:root[data-theme="dark"] .ag-bulk .btn--secondary,
:root[data-theme="dark"] .ag-bulk .btn--danger-outline,
:root[data-theme="dark"] .ag-bulk .btn--ghost { color: var(--tx-inverse); }

/* ----------------------------------------------------------------- trash -- */
.ag-trash { overflow: hidden; }
.ag-trashrow {
  display: flex; align-items: center; gap: var(--s-7);
  padding: var(--s-7) var(--s-8);
  border-bottom: 1px solid var(--br-1);
}
.ag-trashrow:last-child { border-bottom: 0; }
.ag-trashrow__ic {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-8);
  display: grid; place-content: center;
  background: var(--bg-sunken); color: var(--tx-4); border: 1px solid var(--br-1);
}
.ag-trashrow__name { font-size: var(--fs-13); font-weight: 570; }
.ag-trashrow__when { flex: none; gap: 3px; align-items: flex-end; text-align: right; }
.ag-trashrow__acts { flex: none; }

/* ------------------------------------------------------------ utilities -- */
.ag-hide-sm { display: inline; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1120px) {
  .ag-table .ag-td-recips { display: none; }
  .ag-table thead th:nth-child(3) { display: none; }
}
@media (max-width: 940px) {
  .ag-table .ag-td-prog { display: none; }
  .ag-table thead th:nth-child(5) { display: none; }
  .ag-toolbar__view { display: none; }
}
@media (max-width: 760px) {
  .ag-hide-sm { display: none; }
  .ag-toolbar { gap: var(--s-4); }
  .ag-toolbar .searchbox { width: 100% !important; }
  .ag-toolbar .spacer { display: none; }
  .ag-cards { grid-template-columns: 1fr; }
  .ag-trashrow { flex-wrap: wrap; gap: var(--s-5); }
  .ag-trashrow__when { align-items: flex-start; text-align: left; }
  .ag-trashrow__acts { width: 100%; }
  .ag-trashrow__acts .btn { flex: 1; }

  .ag-bulk {
    left: 0; right: 0; bottom: 0; max-width: none;
    border-radius: var(--r-16) var(--r-16) 0 0;
    flex-direction: column; align-items: stretch; gap: var(--s-5);
    padding: var(--s-6) var(--s-7);
    padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
    transform: translate(0, 130%);
  }
  .ag-bulk.is-in { transform: translate(0, 0); }
  .ag-bulk__count { text-align: center; }
  .ag-bulk__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); overflow: visible; }
  .ag-bulk__actions .btn { width: 100%; }
}
@media (max-width: 420px) {
  .ag-filter__statuses { grid-template-columns: 1fr; }
  .ag-pager { gap: var(--s-5); }
  .ag-pager .pager { justify-content: space-between; width: 100%; }
  .ag-bulk__actions { grid-template-columns: repeat(2, 1fr); }
  .ag-card { padding: var(--s-6); }
}