@layer lf-components {
:where(.lf-table-wrap, .table-wrap, .table-modern) {
  overflow: auto;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-color-surface);
}

:where(.lf-table, .data-table, .lead-table) {
  width: 100%;
  border-collapse: collapse;
  color: var(--lf-color-text);
}

:where(.lf-table th, .lf-table td, .data-table th, .data-table td, .lead-table th, .lead-table td) {
  padding: var(--lf-space-3) var(--lf-space-4);
  border-bottom: 1px solid var(--lf-color-border);
  text-align: left;
  vertical-align: middle;
}

:where(.lf-table th, .data-table th, .lead-table th) {
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

:where(.lf-table tbody tr, .data-table tbody tr, .lead-table tbody tr) {
  transition: background var(--lf-transition-fast);
}

:where(.lf-table tbody tr:hover, .data-table tbody tr:hover, .lead-table tbody tr:hover) {
  background: var(--lf-color-surface-muted);
}

:where(.lf-table tbody tr:last-child td, .data-table tbody tr:last-child td, .lead-table tbody tr:last-child td) {
  border-bottom: 0;
}

:where(body.dashboard-client-flat-theme:not(.clients-clear-page) > .shell :is(
  .table-wrap,
  .table-modern,
  .lf-table-wrap,
  .clients-table-scroll
) ) {
  overflow: auto;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-color-surface);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(.data-table:not(.lead-table), .lf-table),
body.dashboard-client-flat-theme:not(.leads-page) > .shell .lead-table ) {
  width: 100%;
  border-collapse: collapse;
  color: var(--lf-color-text);
}

:where(body.dashboard-client-flat-theme > .shell :is(.data-table:not(.lead-table) th, .data-table:not(.lead-table) td, .lf-table th, .lf-table td),
body.dashboard-client-flat-theme:not(.leads-page) > .shell :is(.lead-table th, .lead-table td) ) {
  padding: var(--lf-space-3) var(--lf-space-4);
  border-bottom: 1px solid var(--lf-color-border);
  vertical-align: middle;
}

:where(body.dashboard-client-flat-theme > .shell :is(.data-table:not(.lead-table) th, .lf-table th),
body.dashboard-client-flat-theme:not(.leads-page) > .shell .lead-table th ) {
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

:where(body.dashboard-client-flat-theme > .shell :is(.data-table:not(.lead-table) tbody tr, .lf-table tbody tr),
body.dashboard-client-flat-theme:not(.leads-page) > .shell .lead-table tbody tr ) {
  background: transparent;
  transition:
    background var(--lf-transition-fast),
    box-shadow var(--lf-transition-fast);
}

:where(body.dashboard-client-flat-theme > .shell :is(.data-table:not(.lead-table) tbody tr:hover, .lf-table tbody tr:hover),
body.dashboard-client-flat-theme:not(.leads-page) > .shell .lead-table tbody tr:hover ) {
  background: var(--lf-color-surface-muted);
}

:where(body.dashboard-client-flat-theme > .shell :is(.data-table:not(.lead-table) tbody tr:last-child td, .lf-table tbody tr:last-child td),
body.dashboard-client-flat-theme:not(.leads-page) > .shell .lead-table tbody tr:last-child td ) {
  border-bottom: 0;
}

:where(body.dashboard-client-flat-theme > .shell :is(.company-cell, .client-cell, .lead-person-cell) ) {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--lf-space-3);
}

:where(body.dashboard-client-flat-theme > .shell :is(.company-cell-name, .client-name, .lead-name) ) {
  min-width: 0;
  color: var(--lf-color-text);
  font-weight: var(--lf-font-weight-900);
  overflow-wrap: anywhere;
}

:where(body.dashboard-client-flat-theme > .shell :is(.company-cell-avatar, .client-avatar),
body.dashboard-client-flat-theme:not(.leads-page) > .shell .lead-avatar ) {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface-muted);
  color: var(--lf-color-primary);
  font-size: var(--lf-font-size-sm);
  font-weight: var(--lf-font-weight-900);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(.company-cell-logo, .client-avatar img),
body.dashboard-client-flat-theme:not(.leads-page) > .shell .lead-avatar img ) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 760px) {
  :where(.lf-table th, .lf-table td, .data-table th, .data-table td, .lead-table th, .lead-table td) {
    padding: var(--lf-space-3);
  }
}
}