/* pages/farmer/farmer.wxss */
.farmer-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 0;
}

/* 标题栏 */
.header {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.15);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.back-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.back-icon {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
}

.title {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.action-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.edit-icon {
  font-size: 28rpx;
}

/* 养殖户详情卡片 */
.farmer-detail-card {
  margin: 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.farmer-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-text {
  color: #ffffff;
  font-size: 40rpx;
  font-weight: 600;
}

.farmer-basic {
  flex: 1;
}

.farmer-name {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 12rpx;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.card-content {
  padding: 30rpx;
}

.info-section {
  margin-bottom: 40rpx;
}

.info-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 24rpx;
  padding-bottom: 12rpx;
  border-bottom: 2rpx solid #4CAF50;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666666;
  font-size: 28rpx;
  width: 160rpx;
  flex-shrink: 0;
}

.info-value {
  color: #333333;
  font-size: 28rpx;
  font-weight: 500;
  flex: 1;
}

.info-value.highlight {
  color: #4CAF50;
  font-weight: 600;
}

/* 表单样式 */
.farmer-form {
  padding: 30rpx;
}

.form-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 30rpx;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  color: #333333;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 12rpx;
}

.required {
  color: #F44336;
}

.form-input,
.form-textarea {
  width: 100%;
  background: #f8f9fa;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
  border-color: #4CAF50;
  background: #ffffff;
  box-shadow: 0 0 0 4rpx rgba(76, 175, 80, 0.1);
}

.form-input {
  height: 80rpx;
}

.form-textarea {
  min-height: 120rpx;
  resize: vertical;
}

.form-picker {
  width: 100%;
  background: #f8f9fa;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.form-picker:active {
  border-color: #4CAF50;
  background: #ffffff;
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  height: 80rpx;
  box-sizing: border-box;
}

.picker-text {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
}

.picker-arrow {
  color: #999999;
  font-size: 24rpx;
}

/* 操作按钮 */
.action-buttons {
  padding: 30rpx;
  background: #ffffff;
  border-top: 1rpx solid #e8e8e8;
}

.btn-group {
  display: flex;
  gap: 20rpx;
}

.btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.25);
}

.btn-primary:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.25);
}

.btn-secondary {
  background: #f8f9fa;
  color: #666666;
  border: 2rpx solid #e8e8e8;
}

.btn-secondary:active {
  background: #e8e8e8;
  transform: translateY(2rpx);
}

.btn-danger {
  background: linear-gradient(135deg, #F44336 0%, #d32f2f 100%);
  color: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.25);
}

.btn-danger:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(244, 67, 54, 0.25);
}

.battery-icon::after {
  content: '';
  position: absolute;
  right: -4rpx;
  top: 3rpx;
  width: 2rpx;
  height: 6rpx;
  background-color: #333333;
  border-radius: 0 1rpx 1rpx 0;
}

/* 顶部标题栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  height: 100rpx;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
}

.header-title {
  color: #333333;
  font-size: 36rpx;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1.2;
}

.header-actions {
  display: flex;
  gap: 15rpx;
  margin-left: auto;
}

.action-btn {
  width: 30rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 20rpx;
  font-weight: bold;
}

/* 搜索区域 */
.search-section {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 20rpx;
  padding: 0 20rpx;
  height: 70rpx;
  border: 1rpx solid #e0e0e0;
}

.search-icon {
  font-size: 26rpx;
  color: #999999;
  margin-right: 12rpx;
}

.search-input {
  flex: 1;
  font-size: 26rpx;
  color: #333333;
  background: transparent;
}

/* 养殖户列表 */
.farmer-list {
  padding: 20rpx 30rpx;
}

.farmer-card {
  background-color: white;
  border-radius: 16rpx;
  margin: 0 20rpx 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.farmer-card:active {
  transform: scale(0.98);
}

/* 养殖户信息 */
.farmer-info {
  margin-bottom: 20rpx;
}

.farmer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.farmer-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.farmer-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: white;
}

.status-normal {
  background-color: #4CAF50;
}

.status-error {
  background-color: #f44336;
}

.status-pending {
  background-color: #ff9800;
}

.farmer-details {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-label {
  font-size: 28rpx;
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

/* 操作按钮 */
.farmer-actions {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 10rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.edit-btn {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-btn {
  background-color: #fff3e0;
  color: #f57c00;
}

.delete-btn {
  background-color: #ffebee;
  color: #d32f2f;
}

.action-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.action-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
}

.action-text {
  font-size: 24rpx;
  text-align: center;
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 25rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.farmer-name {
  display: flex;
  align-items: center;
}

.farmer-name .label {
  font-size: 26rpx;
  color: #999999;
  margin-right: 8rpx;
}

.farmer-name .value {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
}

.edit-btn {
  background-color: #4CAF50;
  color: #ffffff;
  padding: 10rpx 20rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
  font-weight: 500;
}

/* 卡片内容 */
.card-content {
  padding: 20rpx 25rpx 25rpx;
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14rpx;
  line-height: 1.3;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row .label {
  font-size: 24rpx;
  color: #999999;
  min-width: 140rpx;
  margin-right: 8rpx;
}

.info-row .value {
  font-size: 24rpx;
  color: #333333;
  flex: 1;
  word-break: break-all;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

/* 加载状态 */
.loading-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
  font-size: 28rpx;
  color: #666666;
}

/* 底部新增按钮 */
.bottom-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
}

.add-farmer-btn {
  background-color: #4CAF50;
  color: #ffffff;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 6rpx;
  font-size: 28rpx;
  font-weight: 500;
  width: 100%;
}