@layer components {
  .table-shell {
    width: 100%;
    min-width: 0;
  }

  .table-wrap,
  .route-page .table-wrap,
  #modal .table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-gutter: stable;
  }

  .data-table,
  .route-page table,
  #modal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }

  .data-table thead th,
  .route-page thead th,
  #modal thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: var(--table-header-height);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    background: #f8fafc;
    color: #475569;
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
    white-space: nowrap;
    font-size: var(--type-table-head, var(--fs-xs));
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .data-table tbody td,
  .route-page tbody td,
  #modal tbody td {
    height: var(--table-row-height);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: var(--type-table-cell, var(--fs-md));
    font-weight: 500;
    line-height: var(--lh-table-dense, 1.35);
  }

  .data-table tbody td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .data-table tbody tr:hover td,
  .route-page tbody tr:hover td,
  #modal tbody tr:hover td {
    background: #f8fafc;
  }

  body.dark .route-page tbody tr:nth-child(even) td,
  body.dark #modal tbody tr:nth-child(even) td {
    background: rgba(30, 41, 59, 0.35);
  }

  body.dark .route-page tbody tr:hover td,
  body.dark #modal tbody tr:hover td {
    background: rgba(51, 65, 85, 0.55);
  }

  .inline-actual-cell.flash-success {
    animation: flashOk 520ms ease-out;
  }

  .inline-actual-cell.flash-error {
    animation: flashErr 520ms ease-out;
  }

  .data-table .money-col,
  .data-table .col-money,
  .route-page .money-col,
  #modal .money-col {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
  }
}