@layer components {
  .table-panel {
    overflow-x: auto;
  }

  .table-toolbar {
    min-height: 62px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line);
  }

  .table-search {
    width: min(380px, 40%);
    height: 36px;
    margin-right: auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .table-search .icon {
    width: 14px;
    color: var(--muted);
  }

  .table-search input {
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 12px;
  }

  .data-table {
    min-width: 900px;
  }

  .table-row {
    min-height: 63px;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 2fr .9fr 1.1fr 1fr .9fr .8fr 20px;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #ebe7de;
    font-size: 12px;
  }

  .table-row:not(.table-head):hover {
    background: var(--surface-soft);
  }

  .table-head {
    min-height: 38px;
    color: var(--muted);
    background: #f7f4ed;
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
  }

  .asset-cell {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .asset-cell > i {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    color: var(--green);
    background: var(--green-soft);
    border-radius: 10px;
  }

  .asset-cell .icon {
    width: 16px;
  }

  .asset-cell strong,
  .asset-cell small {
    display: block;
  }

  .asset-cell small {
    color: var(--muted);
    font-size: 10px;
  }

  .util-cell b {
    font-size: 12px;
  }

  .util-cell > i {
    width: 60px;
    height: 3px;
    margin-top: 5px;
    display: block;
    background: #e2dfd7;
  }

  .util-cell em {
    display: block;
    height: 100%;
    background: var(--green);
  }

  .table-row > span:last-child .icon {
    width: 12px;
    color: var(--faint);
  }

  .records-table-wrap {
    width: 100%;
    overflow-x: auto;
  }

  .records-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
  }

  .records-table th,
  .records-table td {
    padding: 13px 15px;
    text-align: left;
  }

  .records-table th {
    color: var(--muted);
    background: var(--surface-soft);
    font-size: 10px;
  }

  .records-table td {
    border-top: 1px solid var(--line);
    font-size: 12px;
  }

  @media (max-width: 680px) {
    .table-toolbar {
      align-items: stretch;
      flex-wrap: wrap;
    }

    .table-search {
      width: 100%;
    }
  }
}