: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: 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;
}

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

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

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

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

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

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

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

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

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

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

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

@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);
  }
}