/* Width overrides are scoped to desktop; mobile tables keep their card layouts. */
.table-columns-scroll {
  min-width: 0;
  max-width: 100%;
}
.table-column-resizer { display: none; }

@media (min-width: 761px) and (any-hover: hover) and (any-pointer: fine) {
  .table-columns-scroll {
    overflow-x: auto;
    width: 100%;
  }
  .table-column-anchor { position: relative; }
  .table-column-resizer {
    display: block;
    position: absolute;
    z-index: 2;
    inset-block: 0;
    right: 0;
    width: 12px;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
  }
  .table-column-resizer::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 2px;
    width: 2px;
    border-radius: 2px;
    background: var(--muted, #747474);
    opacity: .22;
  }
  .table-column-resizer:hover::after,
  .table-column-resizer:focus-visible::after,
  .table-column-resizer[data-dragging]::after {
    background: var(--orange-dark, #985000);
    opacity: 1;
    width: 3px;
  }
  .table-column-resizer:focus-visible {
    outline: 2px solid var(--orange, #c06c18);
    outline-offset: -2px;
  }
  table.table-columns-adjusted {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .table-columns-adjusted > colgroup > .table-column-width,
  .table-columns-adjusted > thead > tr > .table-column-heading {
    width: var(--table-column-width) !important;
  }
  .table-columns-adjusted > thead > tr > .table-column-heading {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .table-columns-adjusted .sort-button {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .table-columns-adjusted > tbody > tr > th,
  .table-columns-adjusted > tbody > tr > td {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .table-column-dragging,
  .table-column-dragging * {
    cursor: col-resize !important;
    user-select: none !important;
  }
}

/* Canonical fit policy for every static/dynamic application table. No data is clipped.
   Display remains the consumer's responsibility, including existing mobile cards. */
table.table-columns-fit {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  white-space: normal;
}
.table-columns-fit > thead > tr > th,
.table-columns-fit > tbody > tr > th,
.table-columns-fit > tbody > tr > td,
.table-columns-fit > tfoot > tr > td {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.table-columns-fit :is(th, td) :is(strong, small, span, a, button, label) {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* A caption always uses the available width. Consumers switching a table to
   mobile blocks must switch its caption to a block in the same breakpoint;
   table-caption inside a block table creates a narrow anonymous table box. */
.table-columns-fit > caption { box-sizing: border-box; width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.table-columns-fit .button, .table-columns-fit button, .table-columns-fit select {
  box-sizing: border-box; max-width: 100%; white-space: normal;
}
.table-columns-fit .row-actions, .table-columns-fit .quote-main,
.table-columns-fit .superinvestor-actions-content { flex-wrap: wrap; }
.table-columns-fit .sort-button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* Nine-column portfolios still need room for the action control at tablet widths. */
@media (min-width: 701px) {
  #portfolio-dialog .portfolio-table.table-columns-fit :is(th, td):last-child { padding-inline: 4px; }
  #portfolio-dialog .portfolio-table.table-columns-fit th:last-child { width: 9%; }
  #portfolio-dialog .portfolio-table.table-columns-fit th:first-child { width: 23%; }
}
.table-columns-fit .feature-plan-choice { min-width: 0; flex-wrap: wrap; }
.investors-table.table-columns-fit .actions-column { width: 18%; }
.investors-table.table-columns-fit thead th:first-child { width: 36%; }
.watchlist-table.table-columns-fit .watchlist-entry-name { min-width: 0; }
/* The rule is prose, so it wraps instead of determining the width of the table. */
.planning-table.table-columns-fit thead th:nth-child(1) { width: 24%; }
.planning-table.table-columns-fit thead th:nth-child(2) { width: 28%; }
.planning-table.table-columns-fit thead th:nth-child(3) { width: 16%; }
.planning-table.table-columns-fit thead th:nth-child(4) { width: 18%; }
.planning-table.table-columns-fit thead th:nth-child(5) { width: 14%; }
.planning-table.table-columns-fit .planning-process-heading { flex-wrap: wrap; }
.planning-table.table-columns-fit .planning-help[open] { flex-basis: 100%; }
.planning-table.table-columns-fit td:last-child > .button {
  width: 100%; display: flex; justify-content: center; margin-top: var(--ds-space-2);
}
.planning-table.table-columns-fit .planning-status { max-width: 100%; box-sizing: border-box; }
/* Sidebars and dialogs can make a table narrow even on a desktop viewport. */
.table-scroll, .table-columns-scroll, .dataportalyze-table-scroll {
  min-width: 0; max-width: 100%; container-type: inline-size;
}
@container (max-width: 650px) {
  .planning-table.table-columns-fit { display: block; }
  .planning-table.table-columns-fit colgroup, .planning-table.table-columns-fit thead { display: none; }
  .planning-table.table-columns-fit tbody { display: grid; gap: var(--ds-space-3); }
  .planning-table.table-columns-fit tr {
    display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--ds-space-3);
    border: var(--ds-border-width) solid var(--ds-color-border); border-radius: var(--ds-radius-panel);
  }
  .planning-table.table-columns-fit td { display: block; border: 0; padding: var(--ds-space-2) 0; }
  .planning-table.table-columns-fit td::before {
    content: attr(data-label); display: block; margin-bottom: var(--ds-space-1);
    color: var(--ds-color-text-muted); font-size: var(--ds-font-size-caption); font-weight: var(--ds-font-weight-heading);
  }
  .planning-table.table-columns-fit .table-column-resizer { display: none; }
}

.table-columns-fit .row-actions, .table-columns-fit .quote-main,
.table-columns-fit .crypto-security-link, .table-columns-fit .security-identity {
  min-width: 0; max-width: 100%;
}
.table-columns-fit .crypto-security-link > span:last-child { min-width: 0; }