/* listkit.css -- shared styling for the list controls listkit.js injects
   (search box, filter/sort selects, pagination bar, sortable headers).
   Loaded by ALL THREE portals: index.html, admin.html, tenant.html.

   Loading order matters: each portal loads this BEFORE its own stylesheet
   (base.css/style.css, admin.css, tenant.css) so anything a portal already
   styles -- the Owner Portal has had .list-pagination-bar, .page-size-control
   and .sort-btn since the Properties list shipped -- keeps winning. This file
   only has to be good enough to make the Admin and Tenant portals match, and
   must never fight an existing rule.

   Colors are written as token lookups with a chain of fallbacks because the
   three portals do not share one token set: Owner/Admin use --color-*, the
   Tenant Portal uses --ink/--line/--muted. */

/* #5449: the `hidden` attribute must actually hide -- a class that sets
   `display` otherwise beats the UA sheet's `[hidden] { display: none }`. This
   sheet is loaded by all three portals, each of which also loads a stylesheet
   already carrying this rule (#4608), so this copy is defence against a future
   page loading listkit.css without one, not a live fix. Full rationale in
   base.css; asserted in every sibling sheet by
   tests/hiddenAttributeGlobalGuard5449.unit.js. */
[hidden] {
  display: none !important;
}

.listkit-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: var(--text-sm, 0.9rem);
}
.listkit-toolbar[hidden] {
  display: none;
}
.listkit-search,
.listkit-filter,
.listkit-sort {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}
.listkit-toolbar label {
  color: var(--color-text-muted, var(--muted, #565f6c));
  font-size: var(--text-xs, 0.8rem);
  font-weight: 600;
}
.listkit-search-input,
.listkit-filter-select,
.listkit-sort-select {
  min-height: 2.25rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border, var(--line, #d5d9df));
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface-2, var(--surface, #ffffff));
  color: var(--color-text, var(--ink, #171b21));
  font-family: inherit;
  font-size: var(--text-sm, 0.9rem);
}
.listkit-search-input {
  min-width: 15rem;
  padding-right: 1.9rem;
}
.listkit-search-input::-webkit-search-cancel-button {
  /* Replaced by our own clear button, which is keyboard-reachable and
     labelled -- the native one is neither in every browser. */
  -webkit-appearance: none;
  appearance: none;
}
/* The clear "x" sits inside the input's trailing padding. Sized to the 24px
   minimum hit target rather than to the glyph. */
.listkit-search-clear {
  position: absolute;
  right: 0.15rem;
  bottom: 0.15rem;
  width: 1.75rem;
  min-height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md, 0.5rem);
  background: none;
  color: var(--color-text-muted, var(--muted, #565f6c));
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.listkit-search-clear[hidden] {
  display: none;
}
.listkit-search-clear:hover {
  color: var(--color-text, var(--ink, #171b21));
  background: var(--color-surface-offset, var(--soft, #eef3f7));
  filter: none;
}

/* ---- Pagination bar. The Owner Portal already ships these three classes
   (and its own rules override this file); these declarations are what make
   the Admin and Tenant portals render an identical bar. ---- */
.list-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  color: var(--color-text-muted, var(--muted, #565f6c));
  font-size: var(--text-sm, 0.9rem);
}
.list-pagination-bar[hidden] {
  display: none;
}
.list-pagination-bar .page-size-control:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.list-pagination-bar .page-size-control label {
  /* "Rows per page" broke onto three lines in the Tenant Portal at phone
     widths, where the bar sits inside a narrow card. It is a fixed label, so
     let the bar wrap around it instead of wrapping the words. */
  white-space: nowrap;
}
.list-pagination-bar .page-size-select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border, var(--line, #d5d9df));
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface-2, var(--surface, #ffffff));
  color: var(--color-text, var(--ink, #171b21));
  font-family: inherit;
  font-size: var(--text-sm, 0.9rem);
}
.list-pagination-bar .pagination-nav:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.list-pagination-bar .pagination-nav[hidden] {
  display: none;
}
/* .action-btn is an Owner Portal class the other two portals do not define.
   Scoped to inside the pagination bar so this cannot restyle a portal's own
   buttons elsewhere -- and it matters most in the Tenant Portal, where the
   bare `button` selector paints every button as a filled accent block. */
.list-pagination-bar .action-btn {
  min-height: auto;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border: 1px solid var(--color-border, var(--line, #d5d9df));
  background: var(--color-surface-2, var(--surface, #ffffff));
  color: var(--color-primary, var(--blue, #2667a8));
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}
.list-pagination-bar .action-btn:hover:not(:disabled) {
  border-color: var(--color-primary, var(--blue, #2667a8));
  filter: none;
}
.list-pagination-bar .action-btn:disabled {
  color: var(--color-text-muted, var(--muted, #565f6c));
  opacity: 0.5;
  cursor: default;
  text-decoration: none;
}

/* ---- Sortable column headers ---- */
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.sort-btn:hover {
  color: var(--color-primary, var(--blue, #2667a8));
  filter: none;
}
.sort-indicator {
  /* Fixed width so a column's header text does not shift left/right as the
     caret appears and disappears. */
  display: inline-block;
  width: 0.7em;
  font-size: 0.85em;
}
th[aria-sort='ascending'] .sort-btn,
th[aria-sort='descending'] .sort-btn {
  color: var(--color-primary, var(--blue, #2667a8));
}

/* ID 452: opt-in right alignment for money columns in a ListKit report table.
   The host used to write `style="text-align:right"` on its own <th>/<td>; now
   that ListKit builds those elements, the column spec asks for it with
   `align: 'right'` and this rule does the work. Applies to the sort button too,
   since a sortable header's text lives inside an inline-flex button.

   #4574 added font-variant-numeric here rather than a listings-only class:
   digits lining up is what every right-aligned number/money column wants,
   the new listings Rent column included. */
.mini-table th.lk-align-right,
.mini-table td.lk-align-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mini-table th.lk-align-right .sort-btn {
  text-align: right;
}

/* #597 -- generic ListKit `type: 'typeahead'` filter (text input + suggestion
   listbox in place of a plain <select>). Reuses the same box/border tokens as
   .listkit-filter-select above so the two filter types sit consistently side
   by side; the suggestion list styling mirrors the Owner Portal's existing
   .address-suggestions pattern (style.css) but lives here instead, since
   ListKit itself loads on all three portals and this filter type is not
   Owner-Portal-specific. */
.listkit-filter-typeahead {
  position: relative;
}
.listkit-filter-typeahead-input {
  min-height: 2.25rem;
  min-width: 12rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border, var(--line, #d5d9df));
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface-2, var(--surface, #ffffff));
  color: var(--color-text, var(--ink, #171b21));
  font-family: inherit;
  font-size: var(--text-sm, 0.9rem);
}
.listkit-filter-typeahead-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-surface, var(--surface, #ffffff));
  border: 1px solid var(--color-border, var(--line, #d5d9df));
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: var(--shadow-lg, 0 6px 16px rgba(0, 0, 0, 0.12));
  max-height: 15rem;
  overflow-y: auto;
}
.listkit-filter-typeahead-list[hidden] {
  display: none;
}
.listkit-filter-typeahead-list li {
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text, var(--ink, #171b21));
  cursor: pointer;
  line-height: 1.4;
}
.listkit-filter-typeahead-list li:hover,
.listkit-filter-typeahead-list li.is-active {
  background: var(--color-primary-highlight, rgba(38, 103, 168, 0.12));
}
.listkit-filter-typeahead-list li.is-empty {
  cursor: default;
  color: var(--color-text-muted, var(--muted, #565f6c));
  font-style: italic;
}
.listkit-filter-typeahead-list li.is-empty:hover {
  background: transparent;
}