/* Guild and house directory pages: build on the landing theme tokens defined in home.css */

.directory-title {
  margin: 0;
  font-size: 20px;
}

/* A row of controls above a listing, e.g. the house name filter */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
}

.filter-input {
  flex: 1 1 auto;
  min-width: 160px;
  padding: 6px 10px;
  color: white;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: #17140f;
  background-image: var(--surface-control);
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* An informational line above a listing, e.g. where to buy a home or found a guild */
.page-note {
  margin: 0;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 13px;
  border-bottom: 1px solid var(--border-color);
}

.page-note-name {
  color: var(--accent);
  font-weight: bold;
}

/* A link within a listing table, e.g. a guild name or a house owner */
.table-link {
  color: white;
  text-decoration: none;
}

.table-link:hover {
  color: var(--accent);
}

/* Ownership status in the house listing */
.status-available {
  color: var(--online);
}

.status-owned {
  color: var(--muted);
}

/* Single-fact panel body (the guild's guildhall) */
.panel-body {
  padding: 16px;
}

.info-value {
  margin: 0;
  font-size: 15px;
}

/* Detail header: a muted line of facts under a house name */
.detail-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* The catalog blurb describing a house: a full-width line under the title and its meta */
.house-description {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* The identity row places the house preview beside its facts, centered against them and wrapping on a narrow screen */
.house-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 16px;
}

.house-identity .stat-list {
  flex: 1 1 240px;
  min-width: 0;
}

/* The preview image of a house, shown only when one exists for its identifier */
.house-preview {
  flex: 0 0 auto;
}

.house-preview-image {
  display: block;
  width: 152px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

/* A house's facts as a compact list of label/value lines */
.stat-list {
  display: flex;
  flex-direction: column;
}

.stat-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* The negative margin lets the zebra band extend past the label/value while they stay aligned with the column */
  margin: 0 -8px;
  padding: 4px 8px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.stat-line:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.25);
}

.stat-line:last-child {
  border-bottom: none;
}

.stat-label {
  color: var(--muted);
  font-weight: normal;
  white-space: nowrap;
}

.stat-value {
  text-align: right;
}

/* Region header row that collapses or expands each city's block of houses */
.player-table tbody tr.region-row {
  cursor: pointer;
  user-select: none;
  background-color: var(--surface-raised);
}

.player-table tbody tr.region-row th {
  padding: 8px 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}

.region-caret {
  display: inline-block;
  width: 1.2em;
  color: var(--muted);
}

/* A collapsed region hides its houses, leaving only the header row */
.player-table tbody.region-group.collapsed tr:not(.region-row) {
  display: none;
}

/* Area subheader row: collapses its own block of houses, nested within the city */
.player-table tbody tr.area-row {
  cursor: pointer;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.2);
}

.player-table tbody tr.area-row th {
  padding: 6px 12px 6px 28px;
  color: var(--muted);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.area-caret {
  display: inline-block;
  width: 1.2em;
  color: var(--muted);
}

/* A collapsed area hides its own houses while the rest of the city stays visible */
.player-table tbody tr.house-row.area-collapsed {
  display: none;
}

/* The rent and size columns hold numbers, which read better right-aligned */
.player-table thead th:nth-child(2),
.player-table thead th:nth-child(3),
.player-table tbody td:nth-child(2),
.player-table tbody td:nth-child(3) {
  text-align: right;
}

/* The highscores board right-aligns its number columns (level and the ranked value); the compound
   selector outranks the house-listing alignment above, which also matches .player-table by column */
.player-table.highscore-table thead th,
.player-table.highscore-table tbody td {
  text-align: right;
}

/* The rank, name, and vocation identify each row rather than rank it, so they stay to the left */
.player-table.highscore-table thead th:nth-child(1),
.player-table.highscore-table tbody td:nth-child(1),
.player-table.highscore-table thead th:nth-child(2),
.player-table.highscore-table tbody td:nth-child(2),
.player-table.highscore-table thead th:nth-child(3),
.player-table.highscore-table tbody td:nth-child(3) {
  text-align: left;
}

.highscore-table .rank-cell {
  color: var(--muted);
}

/* The row of tabs that chooses which board is shown */
.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.board-tab {
  padding: 5px 12px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: #17140f;
  background-image: var(--surface-control);
}

.board-tab:hover {
  color: white;
  border-color: var(--accent);
}

/* The tab whose board is currently shown */
.board-tab.active {
  color: var(--accent);
  border-color: var(--accent);
}