/* Remembered routings table (Settings > Cronos TIA > TIA code routing).
   The settings column is narrow next to the sidebar, so the layout follows the
   container width (not the viewport): below 900px each row becomes a stacked
   card whose cells carry their column name from data-label. */
.tia-routing-rules {
  container: tia-routing-rules / inline-size;
}

.tia-routing-actions {
  white-space: normal;
}

@container tia-routing-rules (max-width: 899.98px) {
  .tia-routing-table thead {
    display: none;
  }

  .tia-routing-table,
  .tia-routing-table tbody,
  .tia-routing-table tr,
  .tia-routing-table td {
    display: block;
    width: 100%;
  }

  .tia-routing-table tr[id^="tia-code-routing-rule-"] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
  }

  .tia-routing-table td[data-label] {
    border: 0;
    padding: 0.25rem 0.75rem;
  }

  .tia-routing-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
  }

  .tia-routing-table td.tia-routing-actions {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-start;
    padding: 0.25rem 0.75rem;
    text-align: left !important;
  }

  .tia-routing-table td.tia-routing-actions form {
    display: inline-block;
  }
}