@layer utilities {
  .form-input-focus {
    @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
  }
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  .form-error {
    @apply text-danger text-xs mt-1;
  }
}

/* 基础样式 - 移动优先设计 */
@layer base {
  /* 移动端默认样式 */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm form-input-focus transition duration-200;
  }
  
  textarea {
    @apply resize-y;
  }
  
  select {
    @apply appearance-none bg-no-repeat bg-right bg-center pr-8;
  }
  
  input[type="checkbox"],
  input[type="radio"] {
    @apply w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary form-input-focus transition duration-200;
  }
  
  input[type="range"] {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary;
  }
  
  button[type="submit"] {
    @apply px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 transition duration-200 font-medium;
  }
  
  button[type="reset"] {
    @apply px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition duration-200 font-medium;
  }
  
  /* PC端样式 - 768px以上屏幕 */
  @screen md {
    /* PC端select不需要占满整行 */
    select {
      @apply w-auto max-w-md;
    }
    
    /* PC端特定输入框可采用更紧凑的布局 */
    .form-row {
      @apply flex flex-wrap gap-4 items-end;
    }
    
    .form-row > div {
      @apply flex-1 min-w-[200px];
    }
    
    /* PC端复选框组横向排列 */
    .checkbox-group {
      @apply flex flex-wrap gap-x-6 gap-y-2;
    }
    
    .checkbox-group > div {
      @apply flex items-center;
    }
    
    /* PC端表单按钮组间距调整 */
    button[type="submit"],
    button[type="reset"],
    button[type="button"] {
      @apply mr-2 mb-2;
    }
  }
}