/* 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. */

.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 {
  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 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.list-pagination-bar .pagination-nav[hidden] {
  display: none;
}
/* .link-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 .link-btn {
  min-height: auto;
  padding: 0.15rem 0.2rem;
  border: 0;
  background: none;
  color: var(--color-primary, var(--blue, #2667a8));
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}
.list-pagination-bar .link-btn:hover:not(:disabled) {
  text-decoration: underline;
  filter: none;
}
.list-pagination-bar .link-btn:disabled {
  color: var(--color-text-faint, var(--muted, #98a1ac));
  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));
}