/*
 * Tabular data. Moved out of admin_shell.css: a table is not admin furniture,
 * and the public site already proves it -- app/views/houses/show.html.erb
 * carries `class="table"` and the site bundle styles it nowhere, borrowing
 * Bootstrap's. That table loses its styling the moment Bootstrap leaves the
 * public bundle unless these rules are portable, which is what this file is.
 *
 * The one scalar reaching outside is --header-h on the sticky head, and that
 * is a token: a public layout with a different header height re-points it
 * rather than editing this file.
 */

/* --- Tables --------------------------------------------------------------- */
/*
 * 39 tables, most of them wider than a phone. admin_nav.js wraps each one in a
 * .scroll-x container at load so the table scrolls inside its own box instead
 * of forcing the page sideways. That is a transitional measure: the per-table
 * decision (cards below 640px for narrow tables, sticky first column for wide
 * ones) is the remaining phase of this work.
 */

/* tabular-nums across every table: the admin's tables are mostly money, dates
   and counts, and system-ui's default proportional figures set "1" narrower
   than "0", so a column of amounts arrives visibly ragged down its own digits.
   It costs nothing on the text columns -- the feature only touches figures. */
.table {
  width: 100%;
  margin-bottom: var(--space-4);
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
}

/* Same role as .field__label, so the same three channels and the same token --
   this rule and that one are the admin's only two "caption above data", and
   they were 0.03em and 0.04em apart for no reason anyone recorded. */
.table > thead > tr > th {
  border-bottom: 2px solid var(--color-border-strong);
  border-top: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

/* The stripe belongs to the row, not to its cells. Painted on the cells it
   outranked every per-cell background a template asks for -- the contract
   status washes on /admin/hyreskontrakt showed on even rows only -- and it beat
   the row hover as well. A cell's own background paints above its row's, so
   this gives a cell back the last word without anyone needing a specificity
   contest to get it. */
.table-striped > tbody > tr:nth-child(odd) {
  background: var(--color-surface);
}

.table-condensed > tbody > tr > td,
.table-condensed > thead > tr > th {
  padding: var(--space-1) var(--space-2);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--color-border);
}

/* A row opens the record it describes, so the whole row is the target rather
   than the few underlined characters of its name -- that underline was both a
   small hit area and visual noise repeated down every line. Templates opt in
   with an explicit data-row-href; admin_nav.js attaches the navigation and
   marks those rows .is-row-link.
   Only those rows get a hover. Tinting a row that does nothing when clicked
   promises an action that isn't there, so plain tables stay still. */
tr.is-row-link {
  cursor: pointer;
}
.table tbody tr.is-row-link:hover > td {
  background: var(--color-brand-wash);
}
.table a:hover,
.table a:focus {
  text-decoration: none;
}
/* Keyboard users never get the row hover, so the link inside still needs a
   visible focus stop. */
/* Figures line up in columns. */
.table td:has(> .rent),
.table [align="right"],
td[style*="text-align: right"] {
  font-variant-numeric: tabular-nums;
}

tr.selected {
  background: var(--color-brand-wash) !important;
}

/* Sticky table heads sit directly under the app bar. This used to be a
   hardcoded `top: 48px`, which silently misaligned whenever the bar changed
   height; both now read the same token. */
thead.sticky th,
.table > thead.sticky > tr > th {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  background: var(--color-inverted);
  color: var(--color-inverted-ink);
  text-transform: capitalize;
}

/* The inverted head needs the inverted ink, and the plain `thead.sticky th`
   selector lost to `.table > thead > tr > th` above -- so the month names
   inherited --color-text-muted (1.3:1 against this ground) and the year links
   kept --color-link, which is purple on near-black. Both are restated here at
   a specificity that wins. Links stay one shade off the ink so the unlinked
   current year still reads as the selected one; in dark mode the head is a
   light strip and that shade goes the other way, which is why this is a token
   and not the --grey-300 it used to be. */
thead.sticky th a,
.table > thead.sticky > tr > th a {
  color: var(--color-inverted-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
thead.sticky th a:hover,
thead.sticky th a:focus,
.table > thead.sticky > tr > th a:hover,
.table > thead.sticky > tr > th a:focus {
  color: var(--color-inverted-ink);
}

/* --- dl-horizontal -------------------------------------------------------- */
/* 11 uses. Bootstrap floated the term into a fixed 180px gutter, which on a
   phone left the definition about eight characters wide. */

.dl-horizontal {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-4);
}
.dl-horizontal > dt {
  float: none;
  width: auto;
  clear: none;
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 500;
  overflow: visible;
  white-space: normal;
}
.dl-horizontal > dd {
  margin: 0;
}
/* Five templates separate their pairs with a bare `<br>` between </dd> and the
   next <dt> -- spacing that did nothing but add a line under the float layout.
   A grid container blockifies every in-flow child, so each of those `<br>`s
   takes a cell of its own and pushes the rest of the list one cell along:
   every second term landed in the value column and its value in the term
   column. Hiding them here fixes all five at once, and keeps the next template
   that inherits the habit from silently scrambling too. */
.dl-horizontal > br {
  display: none;
}
@media (max-width: 35.9375rem) {
  .dl-horizontal {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dl-horizontal > dt {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}