.page-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  margin-bottom: 1.25rem;

}



.page-header__left {

  display: flex;

  align-items: baseline;

  gap: 0.75rem;

}



.page-title {

  margin: 0;

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--color-text);

}



.page-count {

  font-size: 0.875rem;

  color: var(--color-text-muted);

}



.section-title {

  margin: 1.75rem 0 0.75rem;

  font-size: 1.125rem;

  font-weight: 600;

  color: var(--color-text);

}



/* Search bar */

.search-bar {

  display: flex;

  gap: 0.5rem;

  align-items: center;

}



.search-bar__input {

  width: 240px;

  padding: 0.4rem 0.75rem;

  border: 1px solid var(--color-border);

  border-radius: 5px;

  font-size: 0.875rem;

  font-family: inherit;

  background: var(--color-surface);

  color: var(--color-text);

  transition: border-color 0.15s, box-shadow 0.15s;

}



.search-bar__input:focus {

  outline: none;

  border-color: var(--color-accent);

  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 15%, transparent);

}



.table-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: 6px;

  overflow: hidden;

  transition: background-color 0.2s, border-color 0.2s;

}



.data-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.875rem;

}



.data-table thead tr {

  background-color: var(--color-thead-bg);

  border-bottom: 1px solid var(--color-border);

}



.data-table th {

  padding: 0.625rem 1rem;

  text-align: left;

  font-weight: 600;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--color-text-muted);

  white-space: nowrap;

}



.data-table td {

  padding: 0.75rem 1rem;

  color: var(--color-text-secondary);

  vertical-align: top;

}



.data-table__row {

  border-bottom: 1px solid var(--color-border-subtle);

  cursor: pointer;

  transition: background-color 0.1s;

}



.data-table__row:last-child {

  border-bottom: none;

}



.data-table__row:hover {

  background-color: var(--color-row-hover);

}



.data-table__cell--name {

  font-weight: 500;

  color: var(--color-name);

  white-space: nowrap;

}



.data-table__cell-sub {

  display: block;

  font-size: 0.75rem;

  color: var(--color-text-muted);

  margin-top: 0.15rem;

}



.data-table__cell--notes {

  max-width: 260px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: var(--color-text-muted);

}



.table-empty {

  padding: 3rem 1rem;

  text-align: center;

  color: var(--color-text-faint);

  font-size: 0.9rem;

}



/* Kaminari pagination */

.pagination {

  display: flex;

  justify-content: center;

  gap: 0.25rem;

  margin-top: 1.25rem;

  font-size: 0.875rem;

}



.pagination a,

.pagination .current,

.pagination .gap {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 2rem;

  height: 2rem;

  padding: 0 0.5rem;

  border-radius: 4px;

  text-decoration: none;

  color: var(--color-text-secondary);

  border: 1px solid var(--color-border);

}



.pagination a:hover {

  background-color: var(--color-thead-bg);

}



.pagination .current {

  background-color: var(--color-name);

  color: #fff;

  border-color: var(--color-name);

  font-weight: 600;

}



.pagination .gap {

  border-color: transparent;

  color: var(--color-text-faint);

}