/* ==========================================================================
   Table — general-purpose, column-driven data table primitive.
   Card frame, striped rows, hover, optional highlighted row, and horizontal
   scroll on overflow. Styled from the shared design tokens.
   ========================================================================== */

.ds-table__scroll {
  width: 100%;
  overflow-x: auto;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 46, 77, 0.04), 0 8px 24px rgba(0, 46, 77, 0.06);
  box-sizing: border-box;
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  color: var(--color-primary-400);
}

/* ─── Header ─── */

.ds-table__head {
  background: var(--color-neutral-150);
}

.ds-table__th {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-primary-400);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-neutral-200);
}

/* ─── Body ─── */

.ds-table__row {
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.ds-table__row--link {
  cursor: pointer;
}

/* ─── Shared compact row action button (overrides the base <Button>) ─── */

.ds-table-cta.wf-btn {
  height: 42px !important;
  padding: 10px 22px !important;
  font-size: 15px !important;
  line-height: 20px !important;
  text-transform: none !important;
}

.ds-table__td {
  padding: 16px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-primary-400);
  border-bottom: 1px solid var(--color-neutral-200);
  vertical-align: middle;
}

.ds-table tbody tr:last-child .ds-table__td {
  border-bottom: none;
}

/* Zebra striping — tint every other row. */
.ds-table--striped tbody tr:nth-child(even) .ds-table__td {
  background: color-mix(in srgb, var(--color-neutral-150) 55%, var(--color-neutral-100));
}

/* Hover */
.ds-table--hoverable tbody .ds-table__row:hover .ds-table__td {
  background: color-mix(in srgb, var(--color-primary-100) 8%, var(--color-neutral-100));
}

/* Highlighted row — left accent bar + subtle wash. */
.ds-table__row--highlight .ds-table__td {
  background: color-mix(in srgb, var(--color-neutral-150) 70%, var(--color-neutral-100));
}

.ds-table__row--highlight .ds-table__td:first-child {
  box-shadow: inset 4px 0 0 var(--color-secondary-400);
}

.ds-table--hoverable tbody .ds-table__row--highlight:hover .ds-table__td {
  background: color-mix(in srgb, var(--color-neutral-200) 55%, var(--color-neutral-100));
}

/* ─── Alignment ─── */

.ds-table__cell--left { text-align: left; }
.ds-table__cell--center { text-align: center; }
.ds-table__cell--right { text-align: right; }

/* ─── Empty state ─── */

.ds-table__empty {
  padding: 48px 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-neutral-500);
}

/* ─── Compact mobile — fit every column with no horizontal scroll ─── */

@media (max-width: 600px) {
  .ds-table--compact-mobile {
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
  }

  /* Drop the fixed column widths so cells size to their (small) content. */
  .ds-table--compact-mobile colgroup col {
    width: auto !important;
  }

  .ds-table--compact-mobile .ds-table__th {
    padding: 8px 4px;
    font-size: 9px;
    line-height: 12px;
    white-space: normal;
  }

  .ds-table--compact-mobile .ds-table__td {
    padding: 9px 3px;
    font-size: 11px;
    line-height: 15px;
  }

  .ds-table--compact-mobile .ds-table__th:first-child,
  .ds-table--compact-mobile .ds-table__td:first-child {
    padding-left: 8px;
  }

  .ds-table--compact-mobile .ds-table__th:last-child,
  .ds-table--compact-mobile .ds-table__td:last-child {
    padding-right: 8px;
  }

  .ds-table--compact-mobile .ds-table__row--highlight .ds-table__td:first-child {
    box-shadow: inset 3px 0 0 var(--color-secondary-400);
  }
}

/* ===================================
   Button – Base
   =================================== */
.wf-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px;
  padding: 16px 28px !important;
  border: 2px solid transparent !important;
  border-radius: 100px !important;
  cursor: pointer;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
  text-transform: capitalize;
  white-space: nowrap;
  position: relative;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* ===================================
   Variant: Blue (Primary)
   =================================== */
.wf-btn--blue {
  background: var(--color-primary-200) !important;
  border-color: var(--color-primary-200) !important;
  color: var(--color-neutral-100) !important;
}

.wf-btn--blue:hover {
  background: var(--color-primary-300) !important;
  border-color: var(--color-primary-300) !important;
  color: var(--color-neutral-100) !important;
}

.wf-btn--blue:focus-visible {
  background: var(--color-primary-200) !important;
  border-color: var(--color-primary-200) !important;
  color: var(--color-neutral-100) !important;
  outline: none;
  box-shadow: inset 0 0 0 4px var(--color-neutral-100);
}

/* ===================================
   Variant: Light Blue
   =================================== */
.wf-btn--light-blue {
  background: var(--color-neutral-150) !important;
  border-color: var(--color-neutral-150) !important;
  color: var(--color-primary-300) !important;
}

.wf-btn--light-blue:hover {
  background: var(--color-neutral-200) !important;
  border-color: var(--color-neutral-200) !important;
  color: var(--color-primary-400) !important;
}

.wf-btn--light-blue:focus-visible {
  background: var(--color-neutral-150) !important;
  border-color: var(--color-primary-200) !important;
  color: var(--color-primary-400) !important;
  outline: none;
  box-shadow: inset 0 0 0 4px var(--color-neutral-100);
}

/* ===================================
   Variant: Red
   =================================== */
.wf-btn--red {
  background: var(--color-secondary-400) !important;
  border-color: var(--color-secondary-400) !important;
  color: var(--color-neutral-100) !important;
}

.wf-btn--red:hover {
  background: var(--color-secondary-500) !important;
  border-color: var(--color-secondary-500) !important;
  color: var(--color-neutral-100) !important;
}

.wf-btn--red:focus-visible {
  background: var(--color-secondary-400) !important;
  border-color: var(--color-secondary-400) !important;
  color: var(--color-neutral-100) !important;
  outline: none;
  box-shadow: inset 0 0 0 4px var(--color-neutral-100);
}

/* ===================================
   Variant: Outline White (for dark backgrounds)
   =================================== */
.wf-btn--outline-white {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-neutral-100) !important;
}

.wf-btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--color-neutral-100) !important;
}

.wf-btn--outline-white:focus-visible {
  background: transparent !important;
  border-color: var(--color-neutral-100) !important;
  color: var(--color-neutral-100) !important;
  outline: none;
}

/* ===================================
   Variant: Outline Blue
   =================================== */
.wf-btn--outline-blue {
  background: transparent !important;
  border: 1px solid var(--color-neutral-200) !important;
  color: var(--color-primary-400) !important;
}

.wf-btn--outline-blue:hover {
  background: rgba(0, 61, 102, 0.05) !important;
  border-color: var(--color-neutral-300) !important;
  color: var(--color-primary-400) !important;
}

.wf-btn--outline-blue:focus-visible {
  background: transparent !important;
  border: 2px solid var(--color-primary-300) !important;
  color: var(--color-primary-400) !important;
  outline: none;
}

/* ===================================
   Variant: Subscribe (Red, square-ish)
   =================================== */
.wf-btn--subscribe {
  background: var(--color-secondary-400) !important;
  border-color: var(--color-secondary-400) !important;
  border-radius: 12px;
  color: var(--color-neutral-100) !important;
}

.wf-btn--subscribe:hover {
  background: var(--color-secondary-500) !important;
  border-color: var(--color-secondary-500) !important;
  color: var(--color-neutral-100) !important;
}

.wf-btn--subscribe:focus-visible {
  background: var(--color-secondary-400) !important;
  border-color: var(--color-secondary-400) !important;
  color: var(--color-neutral-100) !important;
  outline: none;
  box-shadow: inset 0 0 0 4px var(--color-neutral-100);
}

/* ==========================================================================
   RID Table — Retirement Index Directory. Search + filter + sort controls
   above the shared <Table> primitive; this file styles the controls and the
   custom cell content (city, rate, score chip). Rows/stripes/card come from
   table.css.
   ========================================================================== */

.rid {
  width: 100%;
  color: var(--color-primary-400);
  box-sizing: border-box;
}

.rid *,
.rid *::before,
.rid *::after {
  box-sizing: border-box;
}

/* ─── Controls ─── */

.rid__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 0 20px;
}

/* Search reuses the shared <TextInput>; grows to fill the row but stays
   compact so the filters get the room they need. */
.rid__search {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 360px;
}

/* Filters reuse the shared <Autocomplete>; constrain each to a tidy width
   (the wf-field defaults to 100%). */
.rid__filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rid__filters > .rid__filter {
  flex-shrink: 0;
}

.rid__filters > .rid__filter:nth-child(1) { width: 172px; }
.rid__filters > .rid__filter:nth-child(2) { width: 230px; }
.rid__filters > .rid__filter:nth-child(3) { width: 215px; }

/* ─── Cell content ─── */

.rid__rank {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-neutral-400);
}

.rid__city {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
}

.rid__city-name {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-primary-400);
  white-space: nowrap;
}

.rid__city:hover .rid__city-name {
  color: var(--color-primary-200);
}

.rid__city-seg {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-neutral-500);
  white-space: nowrap;
}

.rid__val {
  font-weight: 600;
  color: var(--color-primary-400);
  white-space: nowrap;
}

.rid__val--rate {
  color: var(--color-primary-200);
}

/* Best rate in view is called out in red, matching the Rates table. */
.rid__val--top {
  color: var(--color-secondary-400);
}

.rid__val--muted {
  color: var(--color-neutral-300);
}

/* ─── Score (colour-coded by tier, aligned to the rating palette) ─── */

.rid__score {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  white-space: nowrap;
}

.rid__score-n {
  font-size: 20px;
  line-height: 1;
}

.rid__score-d {
  font-size: 12px;
  color: var(--color-neutral-400);
}

.rid__score--high .rid__score-n { color: #1B8A4B; }
.rid__score--good .rid__score-n { color: var(--color-primary-200); }
.rid__score--mid  .rid__score-n { color: #9A6A1E; }
.rid__score--low  .rid__score-n { color: #D97A3F; }
.rid__score--poor .rid__score-n { color: var(--color-secondary-400); }

/* ─── Load more / fetch status ─── */

.rid__more {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.rid__status {
  padding-top: 16px;
  text-align: center;
  font-weight: 500;
  color: var(--color-neutral-500);
}

.rid__retry {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary-200);
  text-decoration: underline;
  cursor: pointer;
}

.rid__retry:hover {
  color: var(--color-primary-100);
}

/* ─── Mobile cards — hidden on desktop, replace the table on phones ─── */

.rid__cards {
  display: none;
}

/* ─── Responsive ─── */

@media (max-width: 860px) {
  .rid__controls {
    gap: 10px;
  }

  .rid__filters {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .rid__filters > .rid__filter:nth-child(1),
  .rid__filters > .rid__filter:nth-child(2),
  .rid__filters > .rid__filter:nth-child(3) {
    width: 100%;
  }
}

/* One card per city on phones, matching the rates cards. */
@media (max-width: 600px) {
  .rid__desktop {
    display: none;
  }

  .rid__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .rid__card {
    background: var(--color-neutral-150);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 46, 77, 0.08);
    padding: 24px 20px 20px;
    cursor: pointer;
  }

  .rid__card--empty {
    cursor: default;
    text-align: center;
    padding: 32px 20px;
    font-weight: 500;
    color: var(--color-neutral-500);
  }

  .rid__card-body {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
  }

  .rid__card-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .rid__card-city {
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-primary-500);
    text-decoration: none;
  }

  .rid__card-seg {
    margin-top: 6px;
    font-family: 'Inter Display', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-neutral-500);
  }

  /* Rate is the first stat row; sized to match the other stat values. */
  .rid__card-ratev {
    font-family: 'Ubuntu', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-100);
  }

  .rid__card-ratev--top {
    color: var(--color-secondary-400);
  }

  /* Stats stack one per row — label left, value right. */
  .rid__card-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
  }

  .rid__card-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .rid__card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
    white-space: nowrap;
  }

  .rid__card-stat-val {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-400);
  }

  .rid__card-stat-val.rid__val--muted {
    color: var(--color-neutral-300);
  }

  /* Match the score to the other stat values so every row is the same size. */
  .rid__card-stat .rid__score-n {
    font-size: 17px;
    line-height: 1.25;
  }

  .rid__card-stat .rid__score-d {
    font-size: 12px;
  }

  .rid__card-footer {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-neutral-200);
  }
}