.form-rows,
.tab-wrapper,
div.formset-wrapper,
div.formset {
  background-color: var(--color-base-50);
}

.dark .form-rows,
.dark .tab-wrapper,
.dark div.formset-wrapper,
.dark div.formset {
  background-color: color-mix(in oklch, var(--color-base-900) 85%, transparent);
}

.form-rows > .border-b nav > a.active {
  background-color: var(--color-base-50) !important;
}

.form-rows > .border-b nav > a.active::after {
  background-color: var(--color-base-50) !important;
}

.dark .form-rows > .border-b nav > a.active,
.dark .form-rows > .border-b nav > a.active::after {
  background-color: color-mix(
    in oklch,
    var(--color-base-900) 85%,
    transparent
  ) !important;
}

/* ── Visible links ───────────────────────────────────────────────────────── */

/* Changelist: links inside data cells and first-column <th scope="row"> (change-form link) */
/* Exclude <thead> th links (column sort headers) by scoping to tbody */
#result_list td a,
#result_list tbody th a {
  color: var(--color-primary-600);
  text-decoration: underline;
}
#result_list td a:hover,
#result_list tbody th a:hover {
  color: var(--color-primary-700);
}
.dark #result_list td a,
.dark #result_list tbody th a {
  color: var(--color-primary-400);
}
.dark #result_list td a:hover,
.dark #result_list tbody th a:hover {
  color: var(--color-primary-300);
}

/* Changeform: links in readonly field values and help text */
.readonly a,
.help a {
  color: var(--color-primary-600);
  text-decoration: underline;
}
.readonly a:hover,
.help a:hover {
  color: var(--color-primary-700);
}
.dark .readonly a,
.dark .help a {
  color: var(--color-primary-400);
}
.dark .readonly a:hover,
.dark .help a:hover {
  color: var(--color-primary-300);
}

/* ── Subscription changelist: force minimum column widths for editable cells ── */
#result_list .field-billing_ref {
  min-width: 18rem;
}
#result_list .field-comment {
  min-width: 22rem;
}

/* ── Changeform field density ────────────────────────────────────────────── */
/* Unfold's default label/field row (.field-line) reserves 10px top/bottom
   padding per row, which adds up fast on forms with many fields. Tighten it
   globally. */
.field-line {
  padding-block: 0.375rem !important; /* was py-2.5 (10px) */
}

/* compressed_fields (on by default) puts the label in a fixed 224px-wide
   column beside the value — great for a single field per row, but on rows
   that hold several fields (e.g. offer/order line items: quantity, unit,
   price, discount all sharing one row) that fixed label width alone can
   exceed the available column width. The label+value flex row then
   overflows its grid column and visually overlaps the next field. Stack the
   label above the value instead on any row with more than one field. */
@media (min-width: 1024px) {
  .field-row.grid .field-line {
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }
  .field-row.grid .field-line > div:first-child {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: normal !important;
  }
}

/* Autocomplete (select2) selections don't truncate long option labels by
   default, so e.g. a long price-plan name spills past its own field and
   overlaps the field next to it instead of being clipped. */
.select2-selection__rendered {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}